echarts柱状图优化进阶（根据数值大小等级渐变，多色渐变）

首先，是效果图：

然后，是代码：

这是渐变色处理，可以进行函数封装，下文未处理

// 柱状图渐变色
var colorList = [];
colorList[0] = { color: '#11d56d' };
colorList[1] = {
  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    {
      offset: 0,
      color: '#11d56d'
    },
    {
      offset: 1,
      color: '#ffda30'
    }
  ])
};
colorList[2] = {
  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    {
      offset: 0,
      color: '#11d56d'
    },
    {
      offset: 0.5,
      color: '#ffda30'
    },
    {
      offset: 1,
      color: '#ff7e00'
    }
  ])
};
colorList[3] = {
  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    {
      offset: 0,
      color: '#11d56d'
    },
    {
      offset: 0.33,
      color: '#ffda30'
    },
    {
      offset: 0.66,
      color: '#ff7e00'
    },
    {
      offset: 1,
      color: '#ff0000'
    }
  ])
};
colorList[4] = {
  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    {
      offset: 0,
      color: '#11d56d'
    },
    {
      offset: 0.25,
      color: '#ffda30'
    },
    {
      offset: 0.5,
      color: '#ff7e00'
    },
    {
      offset: 0.75,
      color: '#ff0000'
    },
    {
      offset: 1,
      color: '#99004c'
    }
  ])
};

然后是echarts的使用

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 45],
      type: 'bar',
      itemStyle: {
        color: (param) => {
          let num=parseInt(param.data / 50)
          return colorList[num].color;
        },
        barBorderRadius: [50, 50, 0, 0]
      }
    }
  ]
};

这是用new echarts进行的渐变处理，也可以使用其他方式进行渐变处理，可参考上一篇文章echarts柱状图优化（柱状图渐变色实现的两种方式）

最后，简单说一下，这只是半成品，个人根据自己的需求进行优化，比如，可以将colorList进行优化，封装等