一、堆叠图基本介绍
Echarts是百度开源的一个基于JavaScript的数据可视化库,拥有丰富的图表类型和可扩展性,堆叠图是其中的一种图表类型。堆叠图能够将多个系列的数据堆叠起来,形成一个整体。
堆叠图的特点是:同一类别的数据在图中会被一起堆叠,每个数据点的值都被分成了若干部分,每个部分代表该数据点属于哪个系列,每个数据点所有部分的和表示该类别的总数。堆叠图也可以通过设置offset属性来进行堆叠条形图或者堆叠面积图等。
下面是一个简单的堆叠图的示例代码:
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '堆叠图示例'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data:['邮件营销','联盟广告','视频广告']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
areaStyle: {},
emphasis: {
focus: 'series'
},
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
areaStyle: {},
emphasis: {
focus: 'series'
},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
areaStyle: {},
emphasis: {
focus: 'series'
},
data:[150, 232, 201, 154, 190, 330, 410]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
二、堆叠图的主要参数
1. stack
stack是堆叠图的核心参数,它指定了每个系列所使用的堆叠ID。如果两个系列的stack相同,则它们会叠在一起,不同的stack值会将系列彼此分离,不在同一条垂直方向上堆叠。
series: [
{
name: '邮件营销',
type: 'bar',
stack: '广告',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '广告',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '广告2',
data: [150, 232, 201, 154, 190, 330, 410]
}
]
2. areaStyle
areaStyle用来设置区域填充样式,支持多种填充效果。当堆叠图有多个系列时,可以将之前的系列的样式设为空,只保留最上层的系列显示颜色来实现区域填充效果。
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
areaStyle: {},
emphasis: {
focus: 'series'
},
data:[120, 132, 101, 134, 90, 230, 210],
// 设为空,则只保留最上层的系列显示颜色来实现区域填充效果
itemStyle: {
normal: {
color: ''
}
}
},
...
]
3. yAxis和xAxis
yAxis和xAxis是分别用来设置纵轴和横轴的参数,包括轴线、刻度、标签等。
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 元'
}
},
xAxis: {
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
三、堆叠图小技巧
1. 反转坐标轴
可以通过设置坐标轴类型为'category'和'time'来实现X轴和Y轴的反转。当需要显示X轴为数值类型而不是类别类型时,设置X轴的坐标类型为'value'。
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日']
}
2. 防止数据顺序混乱
在堆叠图中,数据的堆叠顺序决定了图表的呈现顺序。默认情况下,Echarts将系列的数据按照数组顺序显示,因此需要对数据进行排序来保证不同系列的数据堆叠顺序正确。
// 对数据按照从大到小的顺序排序
data: data.sort(function (a, b) {
return a.value - b.value;
})
3. 堆叠图和其它图表进行联动
可以通过使用Echarts的事件来实现堆叠图和其它图表之间的联动。可以通过设置series的名称和id来实现不同图表之间的数据联通。
// 堆叠图点击事件
myChart.on('click', function (params) {
// params中包含了堆叠图被点击的数据信息,可以通过其name属性进行数据过滤和联动
console.log(params.name);
// 获取联动图表
var otherChart = echarts.getInstanceByDom(document.getElementById('otherChart'));
// 联动更新
otherChart.setOption({
series: [{
id: 'series1', // 联通的series的id
data: [...]
}]
});
});
四、结语
Echarts堆叠图是一种非常实用的数据可视化图表类型,它不仅可以分析数据中的各个部分之间的关系,还能够方便地表现整体与部分之间的比例关系。通过不断对堆叠图的学习和实践,可以掌握Echarts强大的可视化分析能力。