關於echarts+vue頻繁重新整理的造成的記憶體增長問題

前言

關於解決echarts+ws多次資料重新整理渲染，記憶體增長溢位的嘗試。
記錄一下，便於下次使用有參考

方法

1. 關閉echarts動畫
2. tooltip的動畫設定為false。（echarts動畫會快取，透過快照可以看出）

 tooltip: {
          axisPointer: {            animation: false, //很重要！
          },
        },

1. 單獨設定頻繁重新整理的echarts dom,不使用元件式的封裝
2. echarts例項不掛載在data上。可以如下設定

 data() {    return {};
  },  created() {    this.Eechart = null;
  },

1. 資料更新使用

this.Eechart.setOption(fullOption, { replaceMerge: ["series"] });

使用其他方式都會造成記憶體的增長（透過跑f12效能檢視）,比如以下

1. this.Eechart.setOption(fullOption, true);2. this.Eechart.setOption(fullOption);3. this.Eechart.clear();   this.Eechart.setOption(fullOption, true);4.this.Eechart.clear(); this.Eechart.dispose();this.Eechart=null 重新init

1. 解除安裝掛載,（事實證明還是會增長，後續有說明）

  if (!this.chart) {     this.chart = echarts.init(this.$el, { renderer: "svg" });
   } this.$once("hook:beforeDestroy", () => {     // //document.getElementById("mainEChart").removeAttribute('_echarts_instance_');
     this.Eechart.off("click");     this.Eechart.clear();     this.Eechart.dispose();
     console.log("是否清理？", this.Eechart.isDisposed);     this.Eechart = null;
     window.removeEventListener("resize", this.handleWindowResize);
   });

1. finished 與 click 同時使用，會影響click。有個粗暴方法不建議使用。
   當時為了解決100ms-200ms重新整理，大量資料渲染座標消失問題的解決方法。事實證明沒用，渲染太快了，當時很多計算放在前端迴圈（資料量多的時候有100ms+的計算時長）。只有降低頻率去解決。嘗試過web worker,效果不是很理想，放棄。

      每次更新掛載，下一次更新解除安裝       this.chart.on("finished", () => {
       });      let cache = this.chart._$handlers.finished;
     cache.splice(0, cache.length - 1);

1. 切換路由時，回到頁面，會有記憶體增長影響
   見6,解除安裝與掛載。去issue搜了   沒看到解決方法。如果有，歡迎留言評論。

解決方式就是給路由加上keep-active

最後

經過以上，測試跑了效能，時間軸也基本全灰，都能回收。記憶體穩定在一個範圍裡。

問題

如果有更好的解決方式，歡迎大佬們留言。
因為是三維曲面圖，需要點選功能，分級顏色。根據資料生成圖形。沒找到echarts外更好選擇。