ucharts圆环图圆环中间数据怎么修改
时间: 2024-05-11 15:17:54 浏览: 24
要修改 ucharts 圆环图中间的数据,可以通过设置 `series` 中的 `label` 属性来实现。具体方法如下:
1. 在 `option` 中的 `series` 中找到对应的圆环图系列,例如:
```javascript
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
label: {
// 在这里设置圆环中间的数据
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
```
2. 在 `label` 属性中设置 `show` 属性为 `true`,并设置 `formatter` 属性来控制要显示的数据。例如:
```javascript
label: {
show: true,
formatter: '{a|{c}}\n{b}',
rich: {
a: {
color: '#999',
fontSize: 14,
lineHeight: 20
},
b: {
color: '#333',
fontSize: 16,
lineHeight: 20
}
}
},
```
其中,`{c}` 表示当前数据项的值,`{b}` 表示当前数据项的名称。可以通过添加 `rich` 属性来设置文字样式等。
完整的代码示例:
```javascript
option = {
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
label: {
show: true,
formatter: '{a|{c}}\n{b}',
rich: {
a: {
color: '#999',
fontSize: 14,
lineHeight: 20
},
b: {
color: '#333',
fontSize: 16,
lineHeight: 20
}
}
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
};
```
这样就可以在圆环图中心显示对应的数据了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)