Emily's Blog

如何解决 G2 造成的内存泄露简介在容器节点被销毁时，应调用 chart.destroy() 以销毁实例释放资源，避免内存泄漏。内存泄露的基本示例在一个 Vue 组件中使用 G2 库而没有将其及时清除导致的内存泄漏。假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表被清空了。本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。这个示例的问

【Antv G2】折线图如何添加点击事件（点击任意位置即可获取折线上点的值）需求分析预期效果实现思路代码演示需求分析最近接到一个需求，要求在折线图上点任意位置，就可以获取到用户当前看到的tooltip里的信息。拿到用户当前所看到的日期之后，再发送请求获取该时间点一些其他的数据展示出来。如果有玩基金或者股票投资的同学相信对这种场景并不陌生。这个需求的本质就是给折线图添加点击事件，只是我在网络上搜索了一下，大部分人总结的方案都是只有点击折线的圆形折点才能触发，这样的操作对于用户来说可能是过于苛刻了。所以，

import { Chart } from '@antv/g2';const data = [ { month: 'Jan', city: 'Tokyo', temperature: 7 }, { month: 'Jan', city: 'London', temperature: 3.9 }, { month: 'Feb', city: 'Tokyo', temperature: 6.9 }, { month: 'Feb', city: 'London', temperature: 4