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

本文主要是介绍【Echarts】Echarts图形随窗口自适应大小resize。Echarts造成内存泄漏影响性能处理办法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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
  },

这篇关于【Echarts】Echarts图形随窗口自适应大小resize。Echarts造成内存泄漏影响性能处理办法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！