echarts 不用graphic 实现中间添加文字
时间: 2023-07-07 21:38:32 浏览: 98
除了使用 `graphic` 组件之外,还可以通过在 `series` 中添加一个额外的饼形图系列来实现在环形图中间添加文字。
具体步骤如下:
1. 添加一个额外的饼形图系列,设置其大小和位置,使其覆盖住原本的环形图。
```javascript
series: [{
type: 'pie',
radius: ['50%', '70%'],
label: {
show: true,
formatter: '{b}: {c} ({d}%)',
},
data: [
{value: 335, name: '数据1'},
{value: 310, name: '数据2'},
{value: 234, name: '数据3'},
{value: 135, name: '数据4'},
{value: 1548, name: '数据5'},
],
}, {
type: 'pie',
radius: ['0%', '40%'],
center: ['50%', '50%'],
label: {
show: true,
position: 'center',
formatter: '中间的文字',
fontSize: 18,
fontWeight: 'bold',
},
data: [{
value: 1,
itemStyle: {
color: 'rgba(0, 0, 0, 0)',
},
tooltip: {
show: false,
},
hoverAnimation: false,
}],
}]
```
2. 将额外的饼形图系列的半径设置为 `[0, '40%']`,使其内部空白,这样就可以在中心位置添加文字了。
完整代码示例:
```javascript
option = {
series: [{
type: 'pie',
radius: ['50%', '70%'],
label: {
show: true,
formatter: '{b}: {c} ({d}%)',
},
data: [
{value: 335, name: '数据1'},
{value: 310, name: '数据2'},
{value: 234, name: '数据3'},
{value: 135, name: '数据4'},
{value: 1548, name: '数据5'},
],
}, {
type: 'pie',
radius: ['0%', '40%'],
center: ['50%', '50%'],
label: {
show: true,
position: 'center',
formatter: '中间的文字',
fontSize: 18,
fontWeight: 'bold',
},
data: [{
value: 1,
itemStyle: {
color: 'rgba(0, 0, 0, 0)',
},
tooltip: {
show: false,
},
hoverAnimation: false,
}],
}]
};
```
阅读全文