第一種 單個柱子變色
?眾所周知 柱狀圖的背景色在series下的 itemStyle 的color下修改? 不同數(shù)據(jù)讓每個柱狀圖背景顏色不同? 這個時候就需要自定義? 所以我在color后跟了一個箭頭函數(shù)? 里面的參數(shù)params跟formatter里的是一樣的? 可以打印出來 看下里面有什么值? 我打印了一下
?所以這個時候就可以根據(jù)你想要的數(shù)據(jù) 改變成想要的顏色? 就如我這里的寫法
itemStyle:{
color: (params) =>{
console.log(params)
if (params.name == "Mon"){
return "yellowgreen"
} else {
return "bisque"
}
}
},我判斷這里x軸名字為Mon的那個顏色為黃綠? 其他的為bisque
然后下方的頂部數(shù)值也簡單了
老規(guī)矩先打印一下params
label:{
show: true,
position:"top",
formatter: (params) =>{
let res = ""
// 如果背景顏色為yellowgreen的 則顯示
if (params.color == "yellowgreen"){
res += params.data
}
console.log(params)
return res
}
}直接根據(jù)背景顏色進(jìn)行判斷就好了
第二種 多個柱子變色
比方有一個數(shù)組? 來判斷當(dāng)前是什么顏色的? color下面就可以用params.dataIndex當(dāng)前柱子的下標(biāo)來做? 如果你的數(shù)組里? 不是顏色（一般不是）而是一個參數(shù)比如isColor為1時是yellowgreen為0時是bisque? 則color里如下寫法
if (bg[params.dataIndex] == 1){
return "yellowgreen"
} else if (bg[params.dataIndex] == 0){
return "bisque"
}
文章來源：http://www.zghlxwxcb.cn/news/detail-756666.html
?下方的頂部數(shù)據(jù)還是根據(jù)顏色判斷即可文章來源地址http://www.zghlxwxcb.cn/news/detail-756666.html
到了這里，關(guān)于echarts動態(tài)渲染柱狀圖背景顏色以及頂部數(shù)值的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
