ECharts is “[a] powerful, interactive charting and visualization library for browser”, an open-source js library developed by the team of Baidu. The interface of ECharts is very simple that just takes an object for the options, and it can create thousands of visualization combinations. It can handle large data rendering in canvas or svg, and there are many chart types pre-defined already. It also has a very detailed documentation (although sometimes the Chinese version has better explanation).
Don’t get me wrong of pointing out the issue of it and disliking it. I love using ECharts a lot. Here I am focusing only on why the memory leak of ECharts occurs. For how to find it, I highly recommend reading this article written by Kayce Basques from Google https://developers.google.com/web/tools/chrome-devtools/memory-problems/.
I occasionally check if there is any memory leak in my code, and today I found out that ECharts had memory leak even after I disposed the chart. Here is a link to the demo: https://demo.kelvinau.net/echarts-memory-leak/.
Clicking the first button “Dispose without setting to null” will call chart.dispose(), which is the official function to dispose the chart. Using Chrome Heap snapshot, I can see that ECharts instance still exists after disposed, so I take a look at the dispose function.
The function is not very long, and it seems to be doing all sorts of cleaning. The only thing that looks strange to me is the first few lines. It checks if the instance is disposed, and gives a warning for dev version, and simply just returns.
The ECharts instance exists to check if it is disposed. I consider this as a feature. Setting a breakpoint there, you can take a look at this to see what is left in the instance.
I briefly took a look at it and already saw two DOM elements in the instance, and I believe there should be more.