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