欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

echarts動態(tài)渲染柱狀圖背景顏色及頂部數(shù)值方法詳解

 更新時間：2023年11月09日 10:28:49   作者：關(guān)憶北_  
在使用echarts時,有時需要給柱狀圖設(shè)置背景,下面這篇文章主要給大家介紹了關(guān)于echarts動態(tài)渲染柱狀圖背景顏色及頂部數(shù)值的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下

第一種 單個柱子變色

眾所周知 柱狀圖的背景色在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"
}

 下方的頂部數(shù)據(jù)還是根據(jù)顏色判斷即可

總結(jié)

到此這篇關(guān)于echarts動態(tài)渲染柱狀圖背景顏色及頂部數(shù)值的文章就介紹到這了,更多相關(guān)echarts動態(tài)渲染柱狀圖背景色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論