echarts 柱状图条件判断颜色

最新推荐文章于 2025-03-27 18:00:00 发布

hw成长记录

最新推荐文章于 2025-03-27 18:00:00 发布

阅读量2.4k

点赞数 3

文章标签： echarts 前端

本文链接：https://blog.csdn.net/H_Wnnnn/article/details/121651943

版权

let arr = [1, 2, 3, 1]; //修改数组中的值来判断柱子的颜色

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} %'
    },
    splitNumber: 10 //y轴值的区间
  },
  series: [
    {
      name: '金额',
      type: 'bar',
      zlevel: 1,
      itemStyle: {
        normal: {
          color: function (params) {
            if (arr[params.dataIndex] == 1) {
              return '#47CC06';
            } else if (arr[params.dataIndex] == 2) {
              return '#FF5A00';
            } else if (arr[params.dataIndex] == 3) {
              return '#FC0100';
            }
            console.log(params)
            
          },
          barBorderRadius: 30
        }
      },
      barWidth: 20,
      data: [100, 50, 10, 60],
    },
    {
      name: '背景',
      type: 'bar',
      barWidth: 20,
      barGap: '-100%',
      data: [100, 100, 100, 100],
      itemStyle: {
        normal: {
          color: 'rgba(28, 128, 213, 0.19)',
          barBorderRadius: 30
        }
      }
    }
  ]
};