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

配置效果

配置每个柱子不同颜色的代码

itemStyle: {
    normal: {
        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
        // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0, color: 'red'                   //指0%处的颜色
        }, {
            offset: 1, color: 'blue'                 //指100%处的颜色
        }], 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: {
		        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
		        // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
		        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		            offset: 0, color: 'red'                   //指0%处的颜色
		        }, {
		            offset: 1, color: 'blue'                 //指100%处的颜色
		        }], false)
		    }
}

      }]
  };

 

配置每个柱子的渐变颜色

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);
                  }
              }
          },


      }]
  };