echarts的MarkLin控制

柱状图显示多个markline，并且实现markline可动态添加且能使用图例控制其中两条显示隐藏

动态添加我的实现思路是，

1.初始化

series中使用一个空数据可以用图例控制显示隐藏。初始化的时候可以使用，后续根据输入内容添加到有实际数据的markLine中，使用markLine，这样不会造成很多图例的现象。

例如：

series: [
          {
            type: "bar",
            barWidth: 20,
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              borderRadius: 5,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#0ec1ff" },
                { offset: 1, color: "#1dfff1" },
              ]),
            },
            data: data.map((item) => item["bz_un_finish_num"]),
            markLine: {
              silent: true,
              data: markData,
              label: {
                textBorderWidth: 0,
                textBorderColor: "tansparent",
                color: "#fff",
                fontSize: 14,
                stroke: null,
              },
              precision: 0,
            },
          },
          {
            type: "bar",
            name: "空数据1",
            barWidth: 20,
            barGap: -1,
            showInLegend: true,
            legendHoverLink: false,
            itemStyle: {
              color: "rgba(248,211,81,.7)", // 设置假图例的颜色
            },
            data: [],
            markLine: {
              silent: true,
              data: [
                {
                  type: "average",
                  yAxis: [average],
                  name: "空数据1",
                  lineStyle: {
                    color: "rgba(248,211,81,.7)",
                  },
                  label: {
                    formatter: "{c}",
                    textBorderWidth: 0,
                    textBorderColor: "tansparent",
                    color: "#fff",
                    fontSize: 14,
                    stroke: null,
                  },
                },
              ],
              precision: 0,
            },
          },
          {
            // 第二个假图例系列
            type: "bar",
            name: "空数据2",
            barWidth: 20,
            barGap: -1,
            showInLegend: true,
            legendHoverLink: false,
            data: [], // 无需数据，仅用于图例
            itemStyle: {
              color: "rgba(248, 81, 81, 0.9)", // 设置假图例的颜色
            },
            markLine: {
              silent: true,
              data: [
                {
                  type: "line",
                  name: "空数据2",
                  lineStyle: {
                    color: "rgba(248,81,81,.9)",
                  },
                  label: {
                    formatter: "{c}",
                    textBorderWidth: 0,
                    textBorderColor: "tansparent",
                    color: "#fff",
                    fontSize: 12,
                    stroke: null,
                  },
                  yAxis: [this.line15],
                },
              ],
            },
          },
        ],
        //第一个空数据是用的平均值。每次进入时计算，
        //第二个空数据用的是存在全局的一个数据
        //这两个数据是每次都需要渲染的。

但是这样又会带来，在控制图例显隐的时候，原本要显示的柱状图宽度改变，位置偏移等等情况

例如：

解决办法，bar类型都加宽度，无数据的设置 ：固定宽度和偏移量

  barWidth: 20,
  barGap: -1,
  data: [], // 无需数据，仅用于图例

2.添加多个markLine

• 添加多个markLine都是以有数据的柱状图为基础，添加到它的markLine对象的data中

 markLine: {
              silent: true,
              data: markData,//整体的markLine
              label: {
                textBorderWidth: 0,
                textBorderColor: "tansparent",
                color: "#fff",
                fontSize: 14,
                stroke: null,
              },
              precision: 0,
            },

• 判断新的markLine的值，是否已添加过

searchKey() {
      let temp = { type: "line", yAxis: [this.inputNum] };
      let already = this.markLine.some(
        (item) => JSON.stringify(item) === JSON.stringify(temp)
      );
      if (!already) {
        this.markLine = [...this.markLine, temp];
        this.initCol("colRef", this.colList, this.markLine);
      }
    },
    //此次我采用了object转string的方式对比，也可以将已有的markLine中的yAxis取出来做对比

3.echart的完整代码

 setCol(chartInstance, data, markData) {
      const allNum = data
        .map((item) => item["all"] * 1)
        .reduce((a, b) => a + b, 0);
      const mathNumber = Math.round(allNum * 10) / 10;

      const average = (mathNumber / (Math.abs(this.day * 1) + 1)).toFixed(2);

      let option = {
        tooltip: {},
        title: {
          show: data?.length > 0 ? false : true,
          text: "暂无数据",
          textStyle: {
            color: "#fff",
            fontSize: 26,
          },
          left: "center",
          top: "center",
        },
        grid: {
          left: "1%",
          right: "7%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          textStyle: {
            color: "#f9f9f9",
            borderColor: "#fff",
            fontSize: 18,
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#f9f9f9",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              color: "#d1e6eb",
              margin: 15,
            },
            axisTick: {
              show: false,
            },
            data: data.map((item) => item.dt),
          },
        ],
        yAxis: [
          {
            type: "value",
            name: 单位,
            min: 0,
            nameGap: 40,
            splitNumber: 2,
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#FFF",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 20,
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              borderRadius: 5,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#0ec1ff" },
                { offset: 1, color: "#1dfff1" },
              ]),
            },
            data: data.map((item) => item["bz_un_finish_num"]),
            markLine: {
              silent: true,
              data: markData,
              label: {
                textBorderWidth: 0,
                textBorderColor: "tansparent",
                color: "#fff",
                fontSize: 14,
                stroke: null,
              },
              precision: 0,
            },
          },
          {
            type: "bar",
            name: "假图例",
            barWidth: 20,
            barGap: -1,
            showInLegend: true,
            legendHoverLink: false,
            itemStyle: {
              color: "rgba(248,211,81,.7)", // 设置假图例的颜色
            },
            data: [],
            markLine: {
              silent: true,
              data: [
                {
                  type: "average",
                  yAxis: [average],
                  name: "假图例",
                  lineStyle: {
                    color: "rgba(248,211,81,.7)",
                  },
                  label: {
                    formatter: "{c}",
                    textBorderWidth: 0,
                    textBorderColor: "tansparent",
                    color: "#fff",
                    fontSize: 14,
                    stroke: null,
                  },
                },
              ],
              precision: 0,
            },
          },
          {
            // 第二个假图例系列
            type: "bar",
            name: "第二个假图例",
             barWidth: 20,
             barGap: -1,
            showInLegend: true,
            legendHoverLink: false,
            data: [], // 无需数据，仅用于图例
            itemStyle: {
              color: "rgba(248, 81, 81, 0.9)", // 设置假图例的颜色
            },
            markLine: {
              silent: true,
              data: [
                {
                  type: "line",
                  name: "第二个假图例",
                  lineStyle: {
                    color: "rgba(248,81,81,.9)",
                  },
                  label: {
                    formatter: "{c}",
                    textBorderWidth: 0,
                    textBorderColor: "tansparent",
                    color: "#fff",
                    fontSize: 12,
                    stroke: null,
                  },
                  yAxis: [this.line15],
                },
              ],
            },
          },
        ],
      };
      chartInstance.setOption(option);
    },

4.最终效果