前言

關于解決echarts+ws多次數據刷新渲染，內存增長溢出的嘗試。
記錄一下，便于下次使用有參考

方法

1. 關閉echarts動畫
2. tooltip的動畫設置為false。（echarts動畫會緩存，通過快照可以看出）

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

3. 單獨設置頻繁刷新的echarts dom,不使用組件式的封裝
4. echarts實例不掛載在data上。可以如下設置

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

5. 數據更新使用

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

6. 卸載掛載,（事實證明還是會增長，后續有說明）

  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);
   });

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

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

8. 切換路由時，回到頁面，會有內存增長影響
   見6,卸載與掛載。去issue搜了 https://github.com/apache/echarts/issues/4105 沒看到解決方法。如果有，歡迎留言評論。

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

最后

經過以上，測試跑了性能，時間軸也基本全灰，都能回收。內存穩定在一個范圍里。

問題

如果有更好的解決方式，歡迎大佬們留言。
因為是三維曲面圖，需要點擊功能，分級顏色。根據數據生成圖形。沒找到echarts外更好選擇。如果有其他的方式或者庫之類，請佬務必留言！

總結

以上是生活随笔為你收集整理的关于echarts+vue频繁刷新的造成的内存增长问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。