最近接到大屏需求全部都是图表展示，在测试的时候有两次白屏了，这让我担心会不会是内存泄漏导致的毕竟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两个生命周期内都进行了处理：
componentDidUpdate处理.png
componentWillUnmount处理.png
在
this.dispose方法中它调用了echarts本身的dispose方法
调用echarts的dispose方法.png
因而这里我们可以看到
echarts-for-react这个插件在编写的时候已经帮助我们避免了这一问题。当然如果有需要，我们自己也可以进行进一步的优化。
网友评论