echarts 堆叠柱状图百分比显示
时间: 2023-11-11 20:00:00 浏览: 103
要在 echarts 堆叠柱状图中显示百分比,可以使用 echarts 的 formatter 属性来实现。具体步骤如下:
1. 在 series 中设置 stack 属性,使得多个系列的柱子可以堆叠在一起。
2. 在 yAxis 中设置 axisLabel 的 formatter 属性,将数值转换为百分比形式。
3. 在 series 中设置 label 的 formatter 属性,将数值转换为百分比形式。
以下是一个示例代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}%'
}
},
series: [
{
name: 'Series 1',
type: 'bar',
stack: 'stack1',
data: [20, 30, 40, 50, 60],
label: {
show: true,
position: 'inside',
formatter: '{c}%'
}
},
{
name: 'Series 2',
type: 'bar',
stack: 'stack1',
data: [80, 70, 60, 50, 40],
label: {
show: true,
position: 'inside',
formatter: '{c}%'
}
}
]
};
```
阅读全文