echarts柱状图显示不同颜色,echarts柱状图 itemStyle属性中添加color属性
第一种方式
color: params => {
// colorList是每根柱子的颜色,一组是一个渐变
var colorList = [
['#62C467','#278D65'],
['#FF5B7A','#BC3535'],
['#FFF600','#D69105'],
['#FFB400','#F66800'],
['#00CCFF','#2A54B4'],
['#F75271','#754ABF']
]
var index = params.dataIndex
// 柱子个数超过colorList设置的个数,循环使用
if (index >= colorList.length) {
index =index - colorList.length
}
// 这里的this.$echarts是项目中的echarts示例,改成对应的名字就好
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorList[index][0]
}, {
offset: 1,
color: colorList[index][1]
}])
},
第二种方式
color: function (params) {
if (params.value%2===0){
return (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: "rgba(63,253,255,.1)"
},
{
offset: 0,
color: "rgba(63,253,255,1)"
}
]))
}else {
return (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: "rgba(6,120,255,.1)"
},
{
offset: 0,
color: "rgba(6,120,255,.6)"
}
]))
}
},