echarts柱状图显示数据百分比
时间: 2023-11-14 10:07:51 浏览: 322
要在echarts柱状图中显示数据百分比,可以使用formatter属性来自定义tooltip的显示内容。具体步骤如下:
1. 在series中设置label属性,开启显示数值。
2. 在tooltip中设置formatter属性,使用回调函数来自定义tooltip的显示内容,计算出每个柱子对应的百分比并显示。
以下是示例代码:
```
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
var percent = (params[0].value / params[0].data.total * 100).toFixed(2);
return params[0].name + ': ' + params[0].value + ' (' + percent + '%)';
}
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [{
data: [10, 20, 30, 40, 50],
type: 'bar',
label: {
show: true,
position: 'top'
},
total: 150 // 数据总和
}]
};
```
阅读全文