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(
                  "\n"
                );
              },
              align: "left",
              margin: 100,
              color: "#56598B",
              fontFamily: "PingFangSC-Light",
              fontSize: 14,
              width: 93,
              rich: {
                bg1: {
                  color: "transparent",
                  backgroundColor: COLOR_ARR[0],//COLOR_ARR=["#3ECEAE"]
                  width: 10,
                  height: 10,
                  borderRadius: 5,
                  shadowColor: "#E2E2E5",
                  shadowBlur: "4px",
                  shadowOffsetY: 2,
                  verticalAlign: "middle"
                },
              }
            }