vue echarts 饼图的legend两列排
时间: 2023-10-15 11:25:38 浏览: 298
你可以使用 ECharts 提供的 legend 的 formatter 属性来自定义 legend 的显示方式。以下是一个示例代码,展示如何将饼图的 legend 分为两列排列:
```javascript
option = {
// ... 其他配置项
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
formatter: function(name) {
let data = option.series[0].data; // 获取饼图的数据
let total = 0;
for (let i = 0; i < data.length; i++) {
total += data[i].value;
}
let targetData = null;
for (let i = 0; i < data.length; i++) {
if (data[i].name === name) {
targetData = data[i];
}
}
if (targetData) {
let percent = ((targetData.value / total) * 100).toFixed(2);
return name + ' (' + percent + '%)';
} else {
return name;
}
},
data: ['数据项1', '数据项2', '数据项3', '数据项4', '数据项5', '数据项6']
},
// ... 其他配置项
};
```
上述代码中,我们通过设置 legend 的 formatter 属性来自定义每个 legend 的显示内容。在 formatter 函数中,我们根据饼图的数据计算每个数据项的占比,并将占比信息添加到 legend 中展示。
注意:上述代码中的 `option` 是 ECharts 配置项的一个示例,你需要根据自己的实际情况进行相应的修改。
阅读全文
相关推荐
















