echarts多个data叠加到一个柱子上
时间: 2023-08-08 20:07:24 浏览: 120
echarts横向堆叠柱状图.zip
要实现多个数据叠加到一个柱子上,可以使用 Echarts 的堆叠功能。具体方法如下:
1. 在 option 中设置 series 数据项的 stack 属性为相同的值,表示这些数据将被堆叠在一起。
2. 设置 series 数据项的 type 为 'bar',表示使用柱状图显示。
3. 在每个数据项中设置 itemStyle 属性,通过 normal 属性设置颜色、边框等样式。
例如,以下代码实现了两个数据叠加在一起的柱状图:
```
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [{
name: '数据1',
type: 'bar',
stack: '总量',
data: [120, 132, 101, 134, 90],
itemStyle: {
normal: {
color: '#1abc9c'
}
}
}, {
name: '数据2',
type: 'bar',
stack: '总量',
data: [220, 182, 191, 234, 290],
itemStyle: {
normal: {
color: '#3498db'
}
}
}]
};
```
这里将两个数据堆叠在一起,使用了不同的颜色,可以根据实际情况自行调整。
阅读全文