ECharts 柱状图
上一节我们学习到了折线图,相信大家对折线图的作用和使用场景都有所了解,这一节我们继续来看一下跟折线图相似的图形——柱状图。柱状图又称条形图,与折线图类似,用于表示事物多维之变化趋势。
官方定义:
柱状/条形图通过柱形的高度/条形的宽度 来表现数据的大小,用于有至少类目轴或时间轴的直角坐标系上。
解释
柱状图(柱状图)使用竖直(水平)的柱子表示序列数值的图表,形如:
在 ECharts 上可通过配置项的 series 传入 type = bar
的对象完成柱状图配置。由于配置项繁多, 对此已有详尽介绍,在此不赘述。下面会提供丰富的示例,介绍柱状图的常见场景。
在 ECharts 中,通过传入 xAxis、yAxis、series 三个关键,即可完成柱状图的配置,示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_210_2@: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: { type: 'value' },
series: [
{
data: [, , , , , , ],
type: 'bar',
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
示例有几个关键点:
柱状图与折线图的形态与语义极其相似,所以在 ECharts 中两者、配置基本一致,唯一区别仅在于 type 的取值。例如上例中若为 type = line
,其他配置均不变更,可得图表:
条形图是用横向的柱子来展现数据,一般用于纵向的数据对比,其实就是 x 轴、y 轴对调的柱状图。例如上例中,对调 xAxis、yAxis 的配置值就可以实现条形图,示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_210_2@: {
feature: {
saveAsImage: {},
},
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
xAxis: { type: 'value' },
series: [
{
data: [, , , , , , ],
type: 'bar',
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
当需要表达多部分数据占比关系的时候,可以使用堆叠柱状图方式实现。示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_210_2@: {
feature: {
saveAsImage: {},
},
},
title: { text: '每日销售额', left: 'center', top: },
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: { type: 'value' },
series: [
{
data: [, , , , , , ],
type: 'bar',
name: '水果',
// 通过定义 stack 启动堆叠模式
// 相同 stack 值的序列会堆叠在一起
stack: 'search engine',
},
{
data: [, , , , , , ],
type: 'bar',
name: '蔬菜',
stack: 'search engine',
},
{
data: [, , , , , , ],
type: 'bar',
name: '百货',
stack: 'search engine',
},
],
legend: { data: ['水果', '蔬菜', '百货'], show: true, bottom: },
label: { show: true },
};
myChart.setOption(option);
</script>
</body>
</html>
示例中,通过配置 stack 可启动堆叠模式,相同 stack 值的数据序列会堆叠在一起,从而形成体现整体数据变化的图表,示例:
柱状图同样极坐标系,不过程度并不如折线图。在极坐标系中,通常使用二维数组 (r, ∠a)
表示坐标点,其中 r 表示坐标点离远点的距离;∠a 表示坐标点的角度。但这种二维数组形态在柱状图下并不能生效,例如:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_210_2@: {
feature: {
saveAsImage: {},
},
},
polar: {},
angleAxis: {
type: 'value',
startAngle: ,
min: ,
max: ,
},
radiusAxis: {},
series: [
{
coordinateSy: 'polar',
type: 'bar',
data: [
[, ],
[, ],
],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
示例图中所有 bar 混杂在一起,无法传达出数据的含义。这是因为柱状图是一种二维图形,而极坐标点的表达式无法表达平面信息,所以上例这种 angleAxis、radiusAxis 均为数值型的柱状图在 ECharts 中是没有意义的。
不过,只要选定任意轴为类目轴,就可以使用极坐标勾画柱状图,例如:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_210_2@: {
feature: {
saveAsImage: {},
},
},
polar: {},
angleAxis: {
type: 'category',
startAngle: ,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
radiusAxis: { type: 'value' },
series: [
{
coordinateSy: 'polar',
data: [, , , , , , ],
type: 'bar',
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
极坐标下的柱状图同样堆叠,比如:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_210_2@: {
feature: {
saveAsImage: {},
},
},
angleAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
polar: {},
radiusAxis: { type: 'value' },
series: [
{
coordinateSy: 'polar',
data: [, , , , , , ],
type: 'bar',
name: '水果',
stack: 'search engine',
},
{
coordinateSy: 'polar',
data: [, , , , , , ],
type: 'bar',
name: '蔬菜',
stack: 'search engine',
},
{
coordinateSy: 'polar',
data: [, , , , , , ],
type: 'bar',
name: '百货',
stack: 'search engine',
},
],
label: { show: true },
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
ECharts 4 之后,如果需要渲染的图形数据太多而出现卡顿时,可以通过设置 large = true
开启渐进渲染。原理上,当数据量达到几千、几万时,如果要一次性渲染这么多图形可能会造成卡顿甚至假死,ECharts 通过将需要渲染的数据按特定算法分成多个批次,每次渲染批次的数据量,尽可能快地渲染出一部分数据,减少卡顿感。下列用于配置渐进渲染的细节:
启动渐进渲染的很简单,只需要设置 large = true
,当数据量超过 largeThreshold 设定的阈值时,ECharts 就会启动渐进渲染,例如下例中渲染 50000 数据:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<button id="btnStart" type="button">开始渲染</button>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
// 数
function generateData(count) {
var baseValue = Math.random() * ;
var time = +new Date(, , );
var smallBaseValue;
function next(idx) {
smallBaseValue = idx % === ? Math.random() * : smallBaseValue + Math.random() * - ;
baseValue += Math.random() * - ;
return Math.max(, Math.round(baseValue + smallBaseValue) + );
}
var categoryData = [];
var valueData = [];
for (var i = ; i < count; i++) {
categoryData.push(echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time));
valueData.push(next(i).toFixed());
time += ;
}
return {
categoryData: categoryData,
valueData: valueData,
};
}
var data = generateData();
console.log('generate done');
var chart = echarts.init(document.getElementById('main'));
var option = {
tool@R_210_2@: {
feature: {
saveAsImage: {},
},
},
xAxis: { type: 'category', data: data.categoryData },
yAxis: { type: 'value' },
series: [
{
data: data.valueData,
type: 'bar',
// 是否开启大数据量优化
large: true,
// 数据优化的启动阈值
largeThreshold: ,
},
],
};
document.getElementById('btnStart').addEventListener('click', function() {
chart.setOption(option);
});
</script>
</body>
</html>
示例:
在渐进渲染模式下,可以通过 progressive、progressiveChunkMode 调整渲染。progressive 用于配置每帧绘制的图形,当 progressive 值越小时每帧的渲染效率越高,视觉越平滑,但总的渲染时长也会相应越长,对比 progressive = 1000
与 progressive = 5000
的:
progressiveChunkMode 用于配置图形的分片方式,可选值:
对比 progressiveChunkMode = sequential
与 progressiveChunkMode = mod
的:
柱状图动画,只需设置 animation = true
即可启动动画。与动画相关配置:
认配置下,只需设置 animation = true
即可启动动画,简单示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<button id="btnStart" type="button">开始渲染</button>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: { text: '动画示例' },
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: { type: 'value' },
series: [
{
data: [, , , , , , ],
type: 'bar',
// 启动动画
animation: true,
},
],
};
document.getElementById('btnStart').addEventListener('click', function() {
myChart.setOption(option);
});
</script>
</body>
</html>
示例:
与 CSS3 动画类似,下列可以微调动画执行的细节:
通过设置,可以调整出更加生动的动画,例如在上例基础上设置如下:
{
animation: true,
animationEasing: 'elasticOut',
animationDuration: function(index) {
return index * ;
},
}
示例如下:
细心的读者应该已经注意到,上述配置表中存在两类,一是初始动画,即图表首次渲染动画;二是数据更新动画,即在图表初始化后,通过 setOption 或 appendData 促使数据发生变化时执行的动画,相关:
例如在上例基础上,动画配置为:
{
animation: true,
animationEasingUpdate: 'elasticOut',
animationDurationUpdate: function(index) {
return index * ;
},
}
注意初始化与插入数据时,动画的差异: