[echarts] 给柱形图的每个柱子设置不同渐变颜色

itemStyle: {
      normal: {
          //柱体的颜色
          //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
          color: function (params) {
              console.log(params);
              var colorList = [
                  ['#00FCFF', '#008297'],
                  ['#0091FF', '#005EA4'],
                  ['#901698', '#F157EE'],
                  ['#40FBCB', '#009871']
              ];

              var colorItem = colorList[params.dataIndex];
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: colorItem[0]
                  },
                  {
                      offset: 1,
                      color: colorItem[1]
                  }
              ], false);
          }
      }
},

完整代码

// 指定图表的配置项和数据
  var option = {
      title: {
          text: '碳排放量(tCO2e)',
          textStyle: {
              color: '#fff',
              fontSize: 14,
              fontWeight: 400,
              fontFamily: 'Microsoft YaHei'
          }
      },
      tooltip: {},
      xAxis: {
          data: ['常减压', '2#常', '催化', '重加'],
          axisLine: {
              show: true,
              lineStyle: {
                  color: "#CBEDFF"
              },
          },
          axisTick: {
              show: false //y轴坐标点消失
          },

          

      },
      yAxis: {
          type: 'value',
          //   show:false,
          axisLine: {
              show: false, //y轴线消失
              lineStyle: {
                  color: "#CBEDFF"
              },
          },
          axisTick: {
              show: false //y轴坐标点消失
          },
          splitNumber: 10,
          splitLine: {
              show: true,
              lineStyle: {
                  color: "#006691"
              }
          },
      },
      series: [{
          name: '碳排放量',
          type: 'bar',
          data: [3500, 2000, 1800, 1600],
          backgroundStyle: {
              color: '#00FCFF'
          },
          barWidth: 21,
          itemStyle: {
              normal: {
                  //柱体的颜色
                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                  color: function (params) {
                      console.log(params);
                      var colorList = [
                          ['#00FCFF', '#008297'],
                          ['#0091FF', '#005EA4'],
                          ['#901698', '#F157EE'],
                          ['#40FBCB', '#009871']
                      ];

                      var colorItem = colorList[params.dataIndex];
                      return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: colorItem[0]
                          },
                          {
                              offset: 1,
                              color: colorItem[1]
                          }
                      ], false);
                  }
              }
          },


      }]
  };

参考：

​​echarts图表给柱形图的每个柱子设置不同颜色（包括每个柱子设置渐变颜色）​​