最近接到大屏需求全部都是图表展示,在测试的时候有两次白屏了,这让我担心会不会是内存泄漏导致的毕竟Echarts真的有这个问题哈。
原因
ECharts在每次setOption
后都需要清理变量,在ECharts中是有API手动清理变量的,分别是clear()
和dispose()
,区别是前者只需插入参数,ECharts就会重绘图表;而后者则是直接将ECharts对象进行清理,需要重新构建ECharts对象。另外,针对IE,也有专门的回收内存函数CollectGarbage
,每次浏览器最小化的时候,浏览器都会调用该函数,清理内存。
解决办法
chart.dispose()
配合echarts.init()
,然后再setOption()
。或者调用其clear()
方法。
具体可以参见https://github.com/apache/incubator-echarts/issues/4726
echarts-for-react
https://github.com/hustcc/echarts-for-react/blob/master/src/core.jsx#L122
关于这个插件,我看了一下它的解决办法,它在componentDidUpdate
和componentWillUnmount
两个生命周期内都进行了处理:
在
this.dispose
方法中它调用了echarts本身的dispose
方法因而这里我们可以看到
echarts-for-react
这个插件在编写的时候已经帮助我们避免了这一问题。当然如果有需要,我们自己也可以进行进一步的优化。