echarts 饼图中间显示总数
时间: 2023-09-27 15:08:23 浏览: 756
要在 echarts 饼图中间显示总数,可以使用 echarts 中的 `graphic` 组件来实现。
具体步骤如下:
1. 首先,需要在 `series` 中设置好饼图的数据。
2. 然后,在 `graphic` 中添加一个 `text` 组件,用于显示总数。
3. 在 `text` 中设置好文字样式,以及文字内容。
4. 最后,通过计算饼图的总数,将总数显示在 `text` 中即可。
以下是一个示例代码:
```javascript
option = {
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data: [
{value: 235, name: '视频广告'},
{value: 274, name: '联盟广告'},
{value: 310, name: '邮件营销'},
{value: 335, name: '直接访问'},
{value: 400, name: '搜索引擎'}
]
}
],
graphic: {
type: 'text',
left: 'center',
top: 'middle',
style: {
text: '总数:',
font: 'bold 18px Microsoft YaHei'
}
}
};
// 计算饼图的总数
let total = 0;
option.series[0].data.forEach(function(item) {
total += item.value;
});
// 将总数显示在 text 中
option.graphic.style.text += total;
// 渲染图表
myChart.setOption(option);
```
在上面的示例代码中,我们使用了 `graphic` 组件中的 `text` 组件,在饼图中间显示了总数。同时,我们通过计算饼图的总数,并将总数显示在 `text` 中。
阅读全文
相关推荐











