echart设置圆环的颜色
时间: 2023-09-29 08:08:31 浏览: 315
在 ECharts 中设置圆环的颜色可以使用 series-pie 中的 itemStyle.normal.color 和 emphasis.itemStyle.color 属性。其中,itemStyle.normal.color 用于设置圆环的默认颜色,emphasis.itemStyle.color 用于设置鼠标悬停时圆环的颜色。
下面是一个示例代码:
```javascript
option = {
series: [{
type: 'pie',
radius: ['50%', '70%'],
label: {
show: false
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
itemStyle: {
normal: {
color: function(params) {
// 自定义圆环颜色
var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'];
return colorList[params.dataIndex];
}
},
emphasis: {
itemStyle: {
// 鼠标悬停时的圆环颜色
color: '#999'
}
}
}
}]
};
```
在上面的代码中,itemStyle.normal.color 使用了一个自定义的函数来设置圆环的颜色,可以根据需要修改颜色列表 colorList 来改变颜色。而鼠标悬停时的圆环颜色则使用了 emphasis.itemStyle.color 属性来设置。
阅读全文