echarts中legend加数值
时间: 2023-08-18 08:13:34 浏览: 114
对echarts压缩包进行修改当legend过多时可以进行翻页
在 ECharts 中,要在图例(legend)中显示数值,可以通过 formatter 函数来实现。以下是一个示例代码:
```javascript
option = {
// ... 其他配置项
legend: {
data: ['数据1', '数据2'], // 图例的数据项
formatter: function(name) {
// 获取对应的数据项
var data = option.series.find(function(item) {
return item.name === name;
});
// 返回带有数值的图例文本
return name + ' (' + data.data.reduce(function(sum, current) {
return sum + current;
}, 0) + ')';
}
},
series: [
{
name: '数据1',
type: 'bar',
data: [10, 20, 30, 40]
},
{
name: '数据2',
type: 'bar',
data: [50, 60, 70, 80]
}
]
};
```
在上面的代码中,通过设置 `legend.formatter` 函数来自定义图例的显示内容。在这个函数中,我们根据图例名称找到对应的系列数据项,然后计算该系列数据项的数值总和。最后返回带有数值的图例文本,例如:"数据1 (100)"。
你可以根据自己的实际情况修改代码中的数据和图表类型来适应你的需求。
阅读全文