关于Echarts及echarts-for-react的内存泄漏问题

Posted 2023-04-23

参考技术A 最近接到大屏需求全部都是图表展示，在测试的时候有两次白屏了，这让我担心会不会是内存泄漏导致的毕竟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

https://github.com/hustcc/echarts-for-react/blob/master/src/core.jsx#L122
关于这个插件，我看了一下它的解决办法，它在 componentDidUpdate 和 componentWillUnmount 两个生命周期内都进行了处理：

echarts关于鼠标hover图标显示不正确的问题及解决

问题描述：鼠标悬停的位置和图标上显示的位置不一致！

如图：

问题原因： 在写这些东西的时候，加了zoom属性。

body{
  zoom:0.85;
}

这就导致了，整个页面的内容缩小了0.85，但是echarts内的坐标轴的标注却没有跟着一起减小。

解决办法：
对包裹echarts图形的元素，放大到缩放前的比例，也就是 1/zoom的值。

.echart-box {
  zoom:1.176471
}

就可以正常显示了。