echarts环形饼图中间空白圈背景色
时间: 2023-07-08 08:20:31 浏览: 682
您可以在 echarts 环形饼图中间设置一个背景色为空白圆圈。具体的方法是,在 `series` 中配置 `itemStyle` 和 `emphasis` 中的 `normal` 与 `emphasis`,然后分别设置 `color` 和 `borderColor` 为您需要的颜色,同时设置 `borderWidth` 为 0。例如:
```javascript
series: [{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [{
value: 335,
name: '直接访问',
itemStyle: {
normal: {
color: '#c23531'
},
emphasis: {
color: '#c23531'
}
}
},
{
value: 310,
name: '邮件营销',
itemStyle: {
normal: {
color: '#2f4554'
},
emphasis: {
color: '#2f4554'
}
}
},
{
value: 234,
name: '联盟广告',
itemStyle: {
normal: {
color: '#61a0a8'
},
emphasis: {
color: '#61a0a8'
}
}
},
{
value: 135,
name: '视频广告',
itemStyle: {
normal: {
color: '#d48265'
},
emphasis: {
color: '#d48265'
}
}
},
{
value: 1548,
name: '搜索引擎',
itemStyle: {
normal: {
color: '#91c7ae'
},
emphasis: {
color: '#91c7ae'
}
}
}
],
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ffffff'
},
emphasis: {
borderWidth: 0,
borderColor: '#ffffff'
}
}
}]
```
在上面的代码中,我们设置了 `itemStyle` 和 `emphasis` 中的 `normal` 和 `emphasis` 的 `borderWidth` 为 0,这样就可以去掉圆环的边框了。同时,我们还设置了 `borderColor` 为白色,以达到空白圆圈的效果。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.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)