echarts实现堆叠柱状图中显示百分比
时间: 2023-10-25 14:20:09 浏览: 448
要在堆叠柱状图中显示百分比,可以使用 ECharts 中的 `formatter` 属性来修改数据标签的显示格式。以下是一个堆叠柱状图的示例代码:
```javascript
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['A', 'B', 'C']
},
xAxis: {
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
type: 'value',
max: 1,
axisLabel: {
formatter: '{value}%'
}
},
series: [
{
name: 'A',
type: 'bar',
stack: 'total',
label: {
show: true,
formatter: '{c}%'
},
data: [0.2, 0.3, 0.4, 0.5, 0.6, 0.7]
},
{
name: 'B',
type: 'bar',
stack: 'total',
label: {
show: true,
formatter: '{c}%'
},
data: [0.3, 0.4, 0.5, 0.6, 0.7, 0.8]
},
{
name: 'C',
type: 'bar',
stack: 'total',
label: {
show: true,
formatter: '{c}%'
},
data: [0.5, 0.3, 0.2, 0.1, 0.1, 0.1]
}
]
};
```
在上述代码中,我们通过 `yAxis` 中的 `axisLabel` 属性来定义 y 轴标签的显示格式为百分比。在每个系列数据的 `label` 属性中,我们使用 `{c}%` 的格式来定义数据标签的显示格式为百分比。这样,在图表中就可以直接显示堆叠柱状图中每个柱子的百分比值了。