第一种 单个柱子变色
众所周知 柱状图的背景色在series下的 itemStyle 的color下修改 不同数据让每个柱状图背景颜色不同 这个时候就需要自定义 所以我在color后跟了一个箭头函数 里面的参数params跟formatter里的是一样的 可以打印出来 看下里面有什么值 我打印了一下
所以这个时候就可以根据你想要的数据 改变成想要的颜色 就如我这里的写法
itemStyle:{
color: (params) =>{
console.log(params)
if (params.name == "Mon"){
return "yellowgreen"
} else {
return "bisque"
}
}
},
我判断这里x轴名字为Mon的那个颜色为黄绿 其他的为bisque
然后下方的顶部数值也简单了
老规矩先打印一下params
label:{
show: true,
position:"top",
formatter: (params) =>{
let res = ""
// 如果背景颜色为yellowgreen的 则显示
if (params.color == "yellowgreen"){
res += params.data
}
console.log(params)
return res
}
}
直接根据背景颜色进行判断就好了
第二种 多个柱子变色
比方有一个数组 来判断当前是什么颜色的 color下面就可以用params.dataIndex当前柱子的下标来做 如果你的数组里 不是颜色(一般不是)而是一个参数比如isColor为1时是yellowgreen为0时是bisque 则color里如下写法
if (bg[params.dataIndex] == 1){
return "yellowgreen"
} else if (bg[params.dataIndex] == 0){
return "bisque"
}
下方的顶部数据还是根据颜色判断即可