echarts 设置多重四环图,每个环的颜色不一样
时间: 2023-10-19 17:14:56 浏览: 35
要设置多重四环图,你可以使用 Echarts 的 `series` 属性中的 `type: 'pie'`,然后通过 `data` 属性设置每个环的数据和颜色。下面是一个示例代码:
```javascript
option = {
series: [
{
type: 'pie',
radius: ['50%', '70%'],
label: {
show: false
},
labelLine: {
show: false
},
data: [
{value: 335, name: '第一环', itemStyle: {color: '#c23531'}},
{value: 310, name: '第二环', itemStyle: {color: '#2f4554'}},
{value: 234, name: '第三环', itemStyle: {color: '#61a0a8'}},
{value: 135, name: '第四环', itemStyle: {color: '#d48265'}}
]
},
{
type: 'pie',
radius: ['30%', '50%'],
label: {
show: false
},
labelLine: {
show: false
},
data: [
{value: 335, name: '第一环', itemStyle: {color: '#91c7ae'}},
{value: 310, name: '第二环', itemStyle: {color: '#749f83'}},
{value: 234, name: '第三环', itemStyle: {color: '#ca8622'}},
{value: 135, name: '第四环', itemStyle: {color: '#bda29a'}}
]
}
]
};
```
在这个示例中,我们使用了两个 `series`,每个 `series` 对应一个四环图。通过 `radius` 属性设置了每个环的内外半径,然后通过 `data` 属性设置了每个环的数据和颜色。注意,在设置颜色时,需要通过 `itemStyle` 属性来设置每个数据项的颜色。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)