echarts 设置多重四环图,每个环的颜色不一样
时间: 2023-10-19 21:14:56 浏览: 90
要设置多重四环图,你可以使用 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` 属性来设置每个数据项的颜色。
阅读全文