解决mpvue data变量赋值后被实时同步的问题

110 阅读1分钟

数据结构如下,使用echarts,但有多个图表,每个图表options大同小异,data()中定义了options作为公共参数。

    return {
      echarts,
      options: {
        legend: {
          show: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#777",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            scale: true, 
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 0,
          },
          {
            start: 0,
          },
        ],
        xAxis: [
          {
            type: "category",
            name: "环",
          },
        ],
        series: [
          {
            type: "line",
            symbol: "circle",
          },
        ],
        toolbox: {
          show: true,
          feature: {
            dataZoom: {},
            restore: {},
            saveAsImage: {
              name: "曲线",
            },
          },
        },
      }
    }
 }

定义了多个方法,分别生成个性化的options,直接使用let options = this.options会修改data()中定义的options

    initChart(canvas, width, height) {
      let options = this.options;
      let chart = echarts.init(canvas, null, { width: width, height: height });
      canvas.setChart(chart);
      options.xAxis[0].data = this.SLxAxis;
      options.series[0].data = this.SLyAxis;
      options.series[0].name = "收敛/m";
      chart.setOption(options);
      return chart;
    },
    initCTChart(canvas, width, height) {
      let options = this.options;
      let chart = echarts.init(canvas, null, { width: width, height: height });
      canvas.setChart(chart);
      options.xAxis[0].data = this.SLxAxis;
      options.series[0].data = this.CTyAxis;
      options.series[0].name = "错台/mm";
      chart.setOption(options);
      return chart;
    }

解决:使用let options = JSON.parse(JSON.stringify(this.options)),先将this.options转化为字符串,再转化为JSON,即可解决。

  • 原理不懂,但解决了问题,欢迎各路大神指教。