echarts 柱状图 条件判断颜色

echarts 柱状图 条件判断颜色_第1张图片

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
        }
      }
    }
  ]
};

你可能感兴趣的:(echarts,前端)