echarts堆叠柱状图中显示三组数据,其中有一组数据是基于前两组数据计算的百分比,我想将其中两组数据堆叠,然后和百分比的柱状图重合,这个如何实现呢?
时间: 2023-11-28 10:48:15 浏览: 114
jQuery+Echarts实现按年月数据统计柱状图表代码.zip
你可以使用 echarts 的系列(series)和坐标系(coordinate system)来实现这个需求。
首先,在坐标系中设置两个堆叠的系列,分别表示前两组数据。然后,将第三组数据作为另一个系列,但是将其绑定到第一个系列上,这样就可以使其与第一个系列重合。
接着,设置第三组数据的类型为 'line',并且将其 yAxisIndex 属性设置为 1,这样就可以将其放在第二个 y 轴上。最后,设置第三组数据的 label 属性为百分比,并设置其显示位置为 'top',这样就可以在柱状图上方显示百分比值。
以下是示例代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: [{
type: 'value',
name: '数据1'
}, {
type: 'value',
name: '数据2'
}],
series: [{
name: '数据1',
type: 'bar',
stack: 'stack1',
data: [120, 132, 101, 134, 90]
}, {
name: '数据2',
type: 'bar',
stack: 'stack1',
data: [220, 182, 191, 234, 290]
}, {
name: '百分比',
type: 'line',
yAxisIndex: 1,
data: [20, 30, 25, 40, 33],
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}]
};
```
这样,就可以实现两组数据的堆叠柱状图,并将第三组数据的线图与之重合,并在上方显示百分比值。
阅读全文