[v5] 使用render对图表定时数据更新，存在内存泄漏情况

[XuChunxiao]

在示例https://g2.antv.antgroup.com/zh/examples/general/line#line-basic 代码后新增定时更新逻辑
setInterval(()=>{ chart.render(); },1000)
截图展示了运行一段时间后的三次内存信息，可以看出一直在增长：

[xiaoiver]

看起来是存在大量 Animation 对象未销毁：

建议每次 render 前调用 animation.cancel()，如果不想调用 displayObject.destroy() 的话（为了复用已有图形）。

// stop all active animations
displayObject.getAnimations().forEach((animation) => {
  animation.cancel();
});

[pearmini]

嗯嗯，看来每次渲染之前应该把之前的 animation 对象都销毁。

[hustcc]

和这个是同一问题吗？ #4796 是否需要发包解决？

[pearmini]

和这个是同一问题吗？ #4796 是否需要发包解决？

不是一个问题，#4796 已经解决了。

[xiaoiver]

测试代码如下：

setInterval(() => {
  chart.render();
}, 100);

仔细排查了一下发现开启 grid 之后才会造成 OOM，而关闭就好了：

const line = chart
  .line()
  .data({
    type: 'fetch',
    value: 'data/aapl.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close')
  .axis({
    x: { grid: false },
    y: { grid: false }
  });

下图为关闭 grid 后间隔 30s 的截图，定时器 100ms 重绘一次。可以看出内存占用大小稳定，没有爆炸式增长：

而开启 grid 后造成大量 Animation 未被回收的原因是 G2 context.transitions 没有收集到 GUI grid 组件的 Animation 对象。