echarts饼图中间加文字
时间: 2023-06-29 09:13:28 浏览: 151
饼图可加文字,js+css+html
要在echarts饼图中间加文字,可以使用echarts的graphic组件来实现。具体步骤如下:
1. 在echarts的option中添加graphic组件:
```
graphic: {
type: 'text',
left: 'center',
top: 'middle',
z: 2,
style: {
text: '中间的文字',
font: 'bold 16px Microsoft YaHei'
}
}
```
2. 在series中添加饼图数据,并设置饼图的半径:
```
series: [{
type: 'pie',
radius: ['50%', '70%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}]
```
其中,radius用来设置饼图的半径,可以设置为一个数组,第一个值为内半径,第二个值为外半径。
完整的echarts饼图代码如下:
```
option = {
graphic: {
type: 'text',
left: 'center',
top: 'middle',
z: 2,
style: {
text: '中间的文字',
font: 'bold 16px Microsoft YaHei'
}
},
series: [{
type: 'pie',
radius: ['50%', '70%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}]
};
```
阅读全文