echarts柱形图,柱子顶部显示总数
时间: 2023-08-21 19:07:51 浏览: 86
可以通过 echarts 的标签(label)配置来实现柱子顶部显示总数。具体操作如下:
1. 在柱状图的 series 中,设置 label.show 为 true,表示显示标签。
2. 在 label.normal 或 label.emphasis 中设置 formatter,用于格式化标签文本。可以使用 {c} 表示数据项的数值,{a} 表示系列名称,{b} 表示数据项名称。
3. 在 formatter 中使用 echarts 提供的聚合函数 sum,对数据进行求和。例如,formatter: '{c} ({a})' 表示标签文本为数据值和系列名称,如“100 (销量)”。
完整代码示例:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
label: {
show: true,
position: 'top',
formatter: '{c} (总数:{a})',
// 使用 sum 聚合函数求和
emphasis: {
formatter: '{c} (总数:{a})',
formatterParams: {
a: function(data) {
return echarts.util.sum(data);
}
}
}
}
}]
};
```
这样,柱子顶部就会显示总数了。
阅读全文