echarts 柱状图头部添加标记

遇到一个需要在柱状图的柱子顶端的添加标记，添加的标记比较简单 是距离头部一定距离添加一个与柱子一样宽的长方形。

柱状图的柱子顶端添加等宽的长方形

最开始的思路是使用markpoint进行添加感觉比较麻烦后面放弃，后俩又想使用散点图修改点的形状来实现。最后还是使用两个柱状图叠加，底部的柱状图设置为无色透明就可以完成。

    quota() {
      this.chart = Echarts.init(this.$refs.chart);
      let yLabel = [
        "A0215",
        "B1525",
        "C2589",
        "D1589",
        "E2513",
        "F1458",
        "G3159",
        "H5891",
        "J1879",
      ];
      let yData = [1000, 800, 752, 742, 760, 680, 653, 520, 510];
      let bgData = [];
      var yData2 = yData.map(function (index) {
        return index + 20;
      });
      //求最大值
      let max = yData[0];
      for (var i = 1; i < yData.length; i++) {
        if (max < yData[i]) {
          return (max = yData[i]);
        }
      }
      //赋值bgData 背景数据
      for (let i in yData) {
        bgData.push(max + 500);
      }
      let scale = 10;
      const color = [
        "#CB2B31",
        "#CB2C31",
        "#BD7324",
        "#BD7324",
        "#BD7324",
        "#22AACD",
        "#23A9C9",
        "#67C06C",
        "#66C16C",
      ];
      const colors = [
        "#6F4828",
        "#714827",
        "#6C6127",
        "#6E6227",
        "#706226",
        "#407853",
        "#3F7550",
        "#447B50",
        "#467F52",
      ];

      let option = {
        grid: {
          left: "0",
          right: "0",
          bottom: "0",
          top: "0",
          containLabel: true,
        },
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "none",
        //   },
        //   formatter: function (params) {
        //     return (
        //       params[0].name +
        //       "<br/>" +
        //       "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
        //       params[0].seriesName +
        //       " : " +
        //       params[0].value +
        //       " <br/>"
        //     );
        //   },
        // },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              margin: 15,
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: yLabel,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
            data: yData,
          },
        ],
        series: [
          {
            name: "长度",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                color: (params) => ({
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: color[params.dataIndex], // 柱子最高度% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colors[params.dataIndex], // X轴处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                }),
                shadowBlur: 0,
                shadowColor: "rgba(87,220,222,0.7)",
              },
            },
            barWidth: 10,
            data: yData,
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 10,
            barGap: "-100%",
            data: bgData,
            itemStyle: {
              normal: {
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
          },
          {
            //无色柱状图 
            name: "头部",
            type: "bar",
            stack: "头部",
            barWidth: 10,
            // barGap: "40%",
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
              },
            },
            data: yData2,
          },
          {
            name: "头部",
            type: "bar",
            stack: "头部",
            barWidth: 10,
            // barGap: "40%",
            itemStyle: {
              normal: {
                color: function (params) {
                  return color[params.dataIndex];
                },
              },
            },
            data: [
              2 * scale,
              2 * scale,
              2 * scale,
              2 * scale,
              2 * scale,
              2 * scale,
              2 * scale,
              2 * scale,
              2 * scale,
            ],
          },
        ],
      };
      //传入数据
      this.chart.setOption(option);
    },

结果：