Echarts柱状图，柱子设置不一样的渐变色

const COLOR  = [
  ['#3ECEAE','#72E9D7'],
  ['#F18C5F','#F9C098'],
  ['#408AF8','#74BEFC']
];
series: [
          {
            name: "测试",
            type: "bar",
            data: this.chartValue,
            barWidth: 6, //柱图宽度
            itemStyle: {
              normal: {
                  barBorderRadius: 2,
                  //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                  color: function (params) {
                      let index = params.dataIndex;
                      if (params.dataIndex >= COLOR.length) {
                          index = params.dataIndex - COLOR.length;
                      }
                      return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                          offset: 0,
                          color: COLOR[index][0]
                      },
                      {
                          offset: 1,
                          color: COLOR[index][1]
                      }
                      ]);
                  }
              },
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(231, 231, 231, 1)'
            }
          }
        ]

左边的图标可以通过xAxis.axisLabel. rich 属性来进行相关设置。最终的效果如下。

axisLabel: {
              formatter(value) {
                if (index === 6) {
                  index = 0;
                }
                index++;
                return ["{bg" + index + "|" + index + "}" + " " + value].join(
                  "
"
                );
              },
              align: "left",
              margin: 100,
              color: "#56598B",
              fontFamily: "PingFangSC-Light",
              fontSize: 14,
               93,
              rich: {
                bg1: {
                  color: "transparent",
                  backgroundColor: COLOR_ARR[0],//COLOR_ARR=["#3ECEAE"]
                   10,
                  height: 10,
                  borderRadius: 5,
                  shadowColor: "#E2E2E5",
                  shadowBlur: "4px",
                  shadowOffsetY: 2,
                  verticalAlign: "middle"
                },
              }
            }