vue中圖表的自適應問題

methods(){
    ChartFun(QH) {
      var data = [Math.random() * 100];

      for (var i = 1; i < 20000; i++) {
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      var option1 = {
        tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#eee" // x座標軸的軸線顏色
            }
          },
          axisLabel: {
            color: "#707070" //刻度線標籤顏色
          },
          data:QH
        },
        yAxis: {
          type: "value",
          title:'gW',
          axisLabel: {
            color: "#707070", //刻度線標籤顏色
            // formatter:'{value}()'
          },
          axisLine: {
            lineStyle: {
              color: "#fff" // x座標軸的軸線顏色
            }
          }
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100  
          },
          {
            start: 0,
            end: 10,
            handleIcon:
              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%",
            handleStyle: {
              color: "#fff",
              shadowBlur: 3,
              shadowColor: "rgba(0, 0, 0, 0.6)",
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }
        ],
        series: [
          {
            name: "數據",
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "#5da4da"
            },
            data: data,
            markLine: {
                silent: true,
                data: [{
                    yAxis: 50
                }]
            }
          }
        ]
      };
       this.historyCharts = this.echarts.init(
        document.getElementById("historyCharts")
      ); //定義
      this.historyCharts.clear();
      this.historyCharts.setOption(option1); //展現
    },
     init() {
  //關鍵
  setTimeout(() => {
    window.addEventListener("resize", () => {
      this.historyCharts.resize();
    });
  }, 20);
},
destroyed() {   //關鍵
    window.removeEventListener('resize', this.init, 20)
  },
}
  mounted() {//關鍵
    this.init();
    this.destroyed();
      
  }
複製代碼