echarts实时刷新会刷新已经隐藏的线条刷新出来

Question

问题遇到的现象和发生背景

使用echarts实时刷新会刷新已经隐藏的线条刷新出来

问题相关代码，请勿粘贴截图

在这里设置了曲线的显示和隐藏

  option: {
        title: {
          text: " ",
          subtext: " ",
          x: "center",
          y: "top",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
          },
        },
        // color: ['#63B8FF', '#3B3B3B', '#43CD80', '#EEB422', '#8968CD', '#789262'],
        color: ["#63B8FF", "#3B3B3B", "#43CD80", "#EEB422", "#8968CD"],
        legend: {
          // data: ['GNSS1', 'GNSS2', 'DCLS', 'xPPS', 'x10M', 'E1'],
          data: ["GNSS1", "GNSS2", "DCLS", "xPPS", "x10M"],
          orient: "horizontal",
          x: "center", //可设定图例在左、右、居中
          y: "bottom", //可设定图例在上、下、居中
          selected: {
            'GNSS1': true,
            'GNSS2': true,
            'DCLS': true,
            'xPPS': true,
            'x10M': true,
            'E1': true
          },
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: true },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%", // 这几个属性可以控制图表上下左右的空白尺寸，可以自己试试。
          containLabel: true,
        },
        xAxis: {
          show: true,
          type: "category",
          splitLine: {
            show: true,
          },
          boundaryGap: false,
          axisLine: {
            onZero: false,
          },
          axisLabel: {
            rotate: 45,
          },
          data: this.xdata,
        },
        yAxis: {
          // max: 'dataMax',
          // min: 'dataMin',
          show: true,
          scale: true,
          type: "value",
          boundaryGap: ["20%", "20%"],
          minInterval: 1,
          splitLine: {
            show: true,
          },
        },
        series: [
          {
            name: "GNSS1",
            type: "line",
            showSymbol: true,
            smooth: true,
            hoverAnimation: false,
            connectNulls: false,
            data: this.jet_lag1,
          },
          {
            name: "GNSS2",
            type: "line",
            showSymbol: true,
            smooth: true,
            hoverAnimation: false,
            connectNulls: false,
            data: this.jet_lag2,
          },
          {
            name: "DCLS",
            type: "line",
            showSymbol: true,
            smooth: true,
            hoverAnimation: false,
            connectNulls: false,
            data: this.jet_lag3,
          },
          {
            name: "xPPS",
            type: "line",
            showSymbol: true,
            smooth: true,
            hoverAnimation: false,
            connectNulls: false,
            data: this.jet_lag4,
          },
          {
            name: "x10M",
            type: "line",
            showSymbol: true,
            smooth: true,
            hoverAnimation: false,
            connectNulls: false,
            data: this.jet_lag5,
          },
    
        ],
      },

在动态添加数据是重绘了图表，曲线的显示隐藏也重绘了

 this.option.xAxis.data = this.date;
        this.option.series[0].data = this.jet_lag1;
        this.option.series[1].data = this.jet_lag2;
        this.option.series[2].data = this.jet_lag3;
        this.option.series[3].data = this.jet_lag4;
        this.option.series[4].data = this.jet_lag5;
        this.myChart.setOption(this.option);

运行结果及报错内容

点击隐藏后曲线隐藏了，但是图表重绘是又显示了

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

我尝试理解了一下你的问题：点击echart的 legend中的某一个，将其隐藏，当数据更新时，图表显示的是所有曲线图。如果是我理解的的话，那么你已经找到问题的解决办法了呀，

  selected: {
            'GNSS1': true,
            'GNSS2': true,
            'DCLS': true,
            'xPPS': true,
            'x10M': true,
            'E1': true
          },

你都知道在这里设置显示，那为什么，在更新数据的时候，不去控制它，让它展示成你想要的呢？（给echart添加点击事件，获取legend中点击那个值，在重新渲染的时候，根据获取的值，设置需要隐藏或者显示的legend）