eharts 环形图中间添加文字
时间: 2023-09-30 21:01:58 浏览: 311
echarts圆环中间显示文字.docx
在 ECharts 的环形图中间添加文字,可以通过设置 `graphic` 组件来实现。具体步骤如下:
1. 在 `option` 中的 `graphic` 属性中添加一个文本元素,用于显示要添加的文字。可以使用 `text` 元素指定文本内容、字体、位置等属性。
```javascript
graphic: {
elements: [{
type: 'text',
left: 'center',
top: 'center',
z: 100,
style: {
text: '中间的文字',
textAlign: 'center',
fontSize: 18,
fontWeight: 'bold',
},
}],
}
```
2. 设置环形图的 `series` 属性,使用 `label` 属性来显示每个扇形区域的标签文本。可以使用 `formatter` 属性来自定义标签文本格式。
```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'},
],
}]
```
完整代码示例:
```javascript
option = {
graphic: {
elements: [{
type: 'text',
left: 'center',
top: 'center',
z: 100,
style: {
text: '中间的文字',
textAlign: 'center',
fontSize: 18,
fontWeight: 'bold',
},
}],
},
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'},
],
}]
};
```
阅读全文