手摸手教你如何把echarts的y轴自定义为分类色块

前言
在写项目的时候，要求做一个空气质量分类，用echarts，大概是就y轴的左边加一个自定义色块。如下图，基于echarts的自定义系列图，看了一些文章感觉他们写的不太详细，所以自己改了许多地方

过程一样用的是官方案例（找这个案例就找了半天，淦~）

主要部分还是集中在如下函数

function renderAxisLabelItem(params, api) {
      var y = api.coord([0, api.value(0)])[1];
      var lineColor3 = [
        "#368bff",
        "#43b34e",
        "#ffcf00",
        "#fe5430",
        "#c61b12",
        "#c61b12",
        "#821d20",
      ];
      var interval = api.size([0,1])[1];//y轴的间隔  
      var processLength = api.value(4);//每个值所对应的道数  比如重度污染为2个y轴
      var ys = 0; // 判断是否添加高度
      if (api.value(4) === 1) {
        ys = - interval/ 2
      }
      // console.log(api.coord([0, api.value()])[1]) 
      // console.log(params.coordSys.height)
      // console.log(y - params.coordSys)
      if (y < params.coordSys.y + 5) {
        return;
      }
      return {
        type: "group",
        position: [10, y],
        children: [{
          // y轴色块svg以及样式
            type: "path",
            shape: {
              // d: 'M 0,0 L 15,-15 H -79 Q -84,-15 -84,-20 V -85 Q -84,-90-79,-90 H 61 Q 66,-90 66,-85 V -20 Q 66,-15 61,-15 H 15 z',
              d: "M0,0 L0,-20 L30,-20 38,-20 38,-1 50,-1 L48,-1 L48,0 Z",
              x: 0,
              y: - interval,
              width: 60,
              // height: 30,
              // height: [api.value(4) ], 
              height: interval*processLength,
              layout: "cover",
            },
            style: {
              // fill: '#368c6c' 
              fill: lineColor3[api.value(0)], //自定义颜色
            },
          },
          { 
            // y轴色块内文字样式
            type: "text",
            style: {
              x: 8,
              y: ys,
              
              fontSize: 15,
              text: api.value(1),
              textVerticalAlign: "middle", //整体（包括 text 和 subtext）的垂直对齐。
              // textAlign: "center",
              textFill: "#fff",
            },
          },
          {// y轴色对应数值样式
            type: "text",
            style: {
              x: 75,
              y: -13,
              fontSize: 13,
              textVerticalAlign: "top",
              textAlign: "center",
              text: api.value(2),
              textFill: "#000",
            },
          },
        ],
      };
    }

这个上面添加了许多其他的调试起来比较麻烦，可私信发源码~~