通过 echarts 中的 dataset 组件饼图实现中间添加文字
时间: 2024-03-12 19:47:10 浏览: 80
Chart.js_饼状图添加文字
5星 · 资源好评率100%
通过 echarts 中的 dataset 组件实现饼图中间添加文字的步骤如下:
1. 在数据中添加一列文字数据,例如:
```
var data = [
{value: 335, name: '直接访问', text: '直接访问\n占比 30%'},
{value: 310, name: '邮件营销', text: '邮件营销\n占比 27%'},
{value: 234, name: '联盟广告', text: '联盟广告\n占比 20%'},
{value: 135, name: '视频广告', text: '视频广告\n占比 12%'},
{value: 1548, name: '搜索引擎', text: '搜索引擎\n占比 11%'}
];
```
其中,每个数据对象都有一个属性 `text`,用于存储需要显示的文字内容。
2. 在饼图的 series 中,设置 label formatter 属性,将 `text` 列作为标签的内容,例如:
```
series: [{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: data,
label: {
show: true,
position: 'center',
formatter: function(params) {
return params.data.text;
},
textStyle: {
fontSize: '14'
}
}
}]
```
在 label formatter 中,返回 `params.data.text`,即可将 `text` 列作为标签的内容显示在饼图中间。
注意,需要将 label show 属性设置为 true,才能显示标签。同时,可以通过 textStyle 属性设置标签的样式,例如设置字体大小为 14。
阅读全文