ICode9

精准搜索请尝试: 精确搜索
首页 > 系统相关> 文章详细

【Echarts】Echarts图形随窗口自适应大小resize。Echarts造成内存泄漏影响性能处理办法

2022-06-29 00:00:58  阅读:225  来源: 互联网

标签:resizeHandler 销毁 chart 实例 内存 Echarts resize


Echarts图形随窗口自适应resize

    // 对__resizeHandler事件进行防抖处理
    this.__resizeHandler = debounce(() => {
      // 对当前实例图形进行resize自适应窗口大小
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    // 监听当前视窗resize事件,事件名__resizeHandler
    window.addEventListener('resize', this.__resizeHandler)



Echarts进行路由切换时,每次实例化echarts并没有对其进行销毁,若当前页面上有多个echarts图形时,容易产生内存泄漏。因此需要在钩子函数中及时销毁echarts实例。

  beforeDestroy() {
    // 若当前未实例化,则跳出
    if (!this.chart) {
      return
    }
    // 移除当前事件窗口自适应的事件
    window.removeEventListener('resize', this.__resizeHandler)
    // 销毁实例,实例销毁后无法再被使用
    this.chart.dispose()
    // 手动进行垃圾回收,释放内存
    this.chart = null
  },

标签:resizeHandler,销毁,chart,实例,内存,Echarts,resize
来源: https://www.cnblogs.com/wanglei1900/p/16421749.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有