echart pie 在内部显示数值
时间: 2023-12-20 19:05:31 浏览: 68
Echarts饼图之数据展示
5星 · 资源好评率100%
要在 ECharts 饼图内部显示数值,可以通过设置 `series` 中的 `label` 和 `labelLine` 属性来实现。具体操作如下:
1. 在 `series` 中设置 `label` 和 `labelLine` 属性。
```javascript
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
label: {
show: true, // 显示标签
position: 'inside', // 内部显示
formatter: '{c}' // 标签内容,{c} 表示数值
},
labelLine: {
show: false // 不显示标签引导线
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
```
2. 设置 `tooltip` 中的 `formatter` 属性。
```javascript
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示框内容,{a} 表示系列名称,{b} 表示名称,{c} 表示数值,{d} 表示百分比
},
```
这样就可以在饼图内部显示数值了。需要注意的是,如果数值过小,可能会被遮挡,需要调整饼图的大小和位置。
阅读全文