echarts iOS多次切换空白

148 阅读1分钟

问题:

vue项目中,echarts在手机端ios一个页签与另一个页签之间多次切换后,导致echarts不能重绘

分析:

echarts频繁画图的时候造成内存泄漏,比较吃内存,echarts实例对象大,占用内存过多,导致不能重新渲染

解决:

  1. 不要把chart实例赋值在this上。(this对象一直存在不会被回收,如果放的话要把对象置成null)
  2. 新版本echarts不支持对一个dom多次创建实例。
  3. 释放生成的echarts对象。
//-dom 不存在时不画
if (!this.$refs.chartContent) {
    return
}
//- 不要重复初始化
let myChart = echarts.getInstanceByDom(this.$refs.chartContent)
if (!myChart) {
    myChart = echarts.init(this.$refs.chartContent, null, { renderer: 'svg' })
}
//- 释放对象
beforeDestroy() {
    let myChart = echarts.getInstanceByDom(this.$refs.chartContent)
    if (myChart) {
        echarts.dispose(myChart)
    }
}