echarts堆叠柱状图中显示三组数据,其中有一组数据是基于前两组数据计算的百分比,我想将其中两组数据堆叠,然后将百分比的数据展示在柱状图逇上面,这个如何实现呢?
时间: 2023-11-28 10:48:11 浏览: 52
你可以使用 Echarts 中的 `series` 属性中的 `stack` 和 `barGap` 来实现堆叠柱状图,同时使用 `label` 属性中的 `formatter` 来设置百分比数据的显示格式。
具体实现步骤如下:
1. 在 `series` 属性中定义三组数据,其中前两组数据设置 `stack` 属性为同一个值,表示它们要堆叠在一起显示,第三组数据不设置 `stack` 属性,表示它要单独显示。同时设置 `barGap` 属性使得每组数据之间有一定的间隔。
2. 在 `label` 属性中设置 `formatter` 属性,用于格式化百分比数据的显示方式。其中 `{c}` 表示数据值,`{a}` 表示系列名称,`{b}` 表示数据项名称。
下面是一个具体的示例代码:
```javascript
option = {
legend: {
data: ['数据一', '数据二', '百分比数据']
},
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '数据一',
type: 'bar',
stack: '堆叠',
data: [120, 132, 101, 134, 90]
},
{
name: '数据二',
type: 'bar',
stack: '堆叠',
data: [220, 182, 191, 234, 290]
},
{
name: '百分比数据',
type: 'bar',
data: [20, 25, 19, 22, 18],
label: {
show: true,
position: 'top',
formatter: '{a}: {c}%'
}
}
],
barGap: '30%'
};
```
这样,在堆叠柱状图中,你就可以将两个数据堆叠在一起显示,同时将百分比数据单独显示在柱状图的顶部。
阅读全文