解决echarts图表造成浏览器内存泄漏问题

问题重现:公司做的是监控系统大屏,所以需要相对实时的数据,需要前端不断轮询后台数据,所以时间久了造成浏览器崩溃。排查了好几天的问题,发现是用到echarts的模块占用的内存不断上升。

错误的原因:

  1. 每次轮询后都创建了一个新的echarts对象
  2. 定时器滥用,造成每次都创建一个对象

解决办法:

  1.  定时器写法,在每次setInterval()里都先clearInterval()销毁

    var timer = setInterval(function() {                            clearInterval(timer);    
        // 下面处理业务
        }, 1000)
  2. echarts写法,第一次初始化一个对象,后面都复用这个对象;然后在每次轮询后,只重新set数据有变化的属性。例如:

    RingDiagram(e) {    
        var _this = this;    
        // 第一次设置公共不会变化的属性    
        if (_this.times === 1) {        
            _this.chart =       this.$echarts.init(document.getElementById('RingDiagramTime'));        
            _this.times++;        
            _this.chart.setOption({    
                // 添加属性    
            });                
        }else{        
             _this.chart.setOption({            
                series: [{                
                    data: e,            
                }]        
            });    
       }
    }

Chrome查了内存的方法:

阅读 635

推荐阅读