echarts柱形图 划分多个markLine 标准线

<template>
  <div class="sub-echarts">
    <div id="chart" style="width: 600px; height: 400px"></div> 
  </div>
</template>

mounted() {
	this.myChart = echarts.init(document.getElementById("chart"));
	 // 绘制图表
    setTimeout(() => {
      this.drawChart2(); // 柱状加标记线
    }, 1000);
}，
methods: {
    drawChart2() {
      // 数据示例
      var data = [
        19.6, 0, 7.4, 4.8, 1.1, 12.1, 11.2, 20.4, 7.4, 9.8, 12.8, 7.4, 33.4,
      ];
      // 分区的规则
      var partition = [
        "1",
        "1",
        "1",
        "2",
        "2",
        "2",
        "3",
        "3",
        "3",
        "4",
        "4",
        "5",
        "5",
      ];
      var xAxis = [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
      ];
      var partitionNames = ["压力超限", "压力超限2", "压力超限3", "压力超限4", "压力超限5"];

      // 找到每个区域的起始和结束下标
      var regions = [];
      var currentRegionStart = 0;
      for (var i = 1; i < partition.length; i++) {
        if (partition[i] !== partition[i - 1]) {
          regions.push({ start: currentRegionStart, end: i - 1 });
          currentRegionStart = i;
        }
      }
      regions.push({ start: currentRegionStart, end: partition.length });
      // 设置 markLine 数据
      var markLineData = regions.map((region) => {
        var regionStartIndex = region.start;
        var regionEndIndex = region.end;
        var markLinesInRegion = [];
        var partitionValue = partition[regionStartIndex];
        var markLineValue =
          partitionValue === "1"
            ? 5
            : partitionValue === "2"
            ? 10
            : partitionValue === "3"
            ? 15
            : partitionValue === "4"
            ? 20
            : partitionValue === "5"
            ? 25
            : 0;
        var color =
          partitionValue === "1"
            ? "#91C7AE"
            : partitionValue === "2"
            ? "#D48265"
            : partitionValue === "3"
            ? "#749F83"
            : partitionValue === "4"
            ? "#D6A357"
            : partitionValue === "5"
            ? "#61A0A8"
            : "#000"; // 默认颜色
        markLinesInRegion.push({
          coord: [xAxis[regionStartIndex], markLineValue], // 注意这里索引减1
          lineStyle: { color: color, type: "dashed" }, // 设置线条为实线
          symbol: "none", // 不显示符号
          name: partitionNames[parseInt(partitionValue) - 1],
          label: {
            show: true,
            position: "middle", // 将标签显示在虚线的上方并居中
            formatter: "{b}",
          },
        });
        markLinesInRegion.push({
          coord: [
            xAxis[regionEndIndex] || xAxis[xAxis.length - 1],
            markLineValue,
          ], // 注意这里索引减1
          lineStyle: { color: color, type: "dashed" }, // 设置线条为实线
          symbol: "none", // 不显示符号
          name: partitionNames[parseInt(partitionValue) - 1],
          label: {
            show: true,
            position: "middle", // 将标签显示在虚线的上方并居中
            formatter: "{b}",
          },
        });

        return markLinesInRegion;
      });
      
      this.myChart.setOption({
        xAxis: {
          type: "category",
          data: xAxis,
          axisLabel: {
            interval: 0, // 显示所有标签
          },
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "Series 1",
            type: "bar",
            data: data,
          },
          {
            name: "Mark Line",
            type: "line",
            markLine: {
              data: markLineData,
            },
          },
        ],
      });
    },
}

最终的效果图：