echart柱状图堆叠
时间: 2023-06-29 17:04:41 浏览: 74
要实现echarts柱状图的堆叠,可以通过设置series中的stack属性来实现。具体步骤如下:
1. 在option中添加x轴和y轴:
```
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: []
}
```
2. 在series中添加多个数据系列,并设置stack属性:
```
option = {
// x轴和y轴的配置
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
// 数据系列
series: [
// 第一个系列
{
name: '系列1',
type: 'bar',
stack: '堆叠1', // 设置stack属性
data: [120, 132, 101, 134, 90, 230, 210]
},
// 第二个系列
{
name: '系列2',
type: 'bar',
stack: '堆叠1', // 设置stack属性
data: [220, 182, 191, 234, 290, 330, 310]
},
// 第三个系列
{
name: '系列3',
type: 'bar',
stack: '堆叠1', // 设置stack属性
data: [150, 232, 201, 154, 190, 330, 410]
}
]
}
```
在上述代码中,每个数据系列的stack属性都设置为“堆叠1”,表示这些系列要进行堆叠。如果需要多个不同的堆叠效果,可以设置不同的stack属性值。
3. 最后将option赋值给echarts实例即可显示堆叠柱状图:
```
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
```
阅读全文