前言

關(guān)于解決echarts+ws多次數(shù)據(jù)刷新渲染，內(nèi)存增長(zhǎng)溢出的嘗試。
記錄一下，便于下次使用有參考

方法

1. 關(guān)閉echarts動(dòng)畫
2. tooltip的動(dòng)畫設(shè)置為false。（echarts動(dòng)畫會(huì)緩存，通過快照可以看出）

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

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

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

5. 數(shù)據(jù)更新使用

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

使用其他方式都會(huì)造成內(nèi)存的增長(zhǎng)（通過跑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. 卸載掛載,（事實(shí)證明還是會(huì)增長(zhǎng)，后續(xù)有說明）

  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 同時(shí)使用，會(huì)影響click。有個(gè)粗暴方法不建議使用。
   當(dāng)時(shí)為了解決100ms-200ms刷新，大量數(shù)據(jù)渲染坐標(biāo)消失問題的解決方法。事實(shí)證明沒用，渲染太快了，當(dāng)時(shí)很多計(jì)算放在前端循環(huán)（數(shù)據(jù)量多的時(shí)候有100ms+的計(jì)算時(shí)長(zhǎng)）。只有降低頻率去解決。嘗試過web worker,效果不是很理想，放棄。

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

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

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

最后

經(jīng)過以上，測(cè)試跑了性能，時(shí)間軸也基本全灰，都能回收。內(nèi)存穩(wěn)定在一個(gè)范圍里。

問題

如果有更好的解決方式，歡迎大佬們留言。
因?yàn)槭侨S曲面圖，需要點(diǎn)擊功能，分級(jí)顏色。根據(jù)數(shù)據(jù)生成圖形。沒找到echarts外更好選擇。如果有其他的方式或者庫之類，請(qǐng)佬務(wù)必留言！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。