最近用 Echarts 写前端页面时需要动态为每一项数据设置颜色,一开始使用的是 series 里的 color 属性,但是总是会出现颜色不对齐的现象,导致最后渲染出的数据颜色不固定,无法达到预期。
name: 'IP-route 单项访问占比',
type: 'pie',
radius: ['0%', '23%'],
center: ['70%', '30%'],
label: {
show: false,
position: 'center'
},
itemStyle: {
borderRadius: 5,
borderColor: '#FFF',
borderWidth: 0.5
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
color: ["#2ec7c9", "#b6a2de"]
data: {
name: 'a',
value: 2
},{
name: 'b',
value: 1
}
最终根据测试,直接在 data 中为每一项数据设置 itemStyle 项即可达成目的:
{
itemStyle: {
color: "#b6a2de"
},
name: ‘a’,
value: 2
}