ECharts动态渲染柱状图背景颜色及顶部数值方法详解

第一种 单个柱子变色

众所周知，柱状图的背景色通常在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"
}

下方的顶部数据还是根据颜色判断即可。

总结

到此这篇关于echarts动态渲染柱状图背景颜色及顶部数值的文章就介绍到这了,更多相关echarts动态渲染柱状图背景色内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！