echart柱状图堆叠
时间: 2023-10-04 11:08:11 浏览: 75
要实现 ECharts 柱状图的堆叠效果,可以在 series 中设置 stack 属性。stack 属性的值相同的系列会被堆叠在一起,形成堆叠的效果。
下面是一个简单的柱状图堆叠的示例代码:
```javascript
option = {
title: {
text: '堆叠柱状图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
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: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
}
]
};
```
需要注意的是,堆叠的效果只能在柱状图和条形图中使用。如果要取消堆叠效果,只需要将 stack 属性设置为 null 或者空字符串即可。
阅读全文