G2封装图形组件在vue中进行数据更新，组件重载问题

先看一下官方文档

更新数据

G2 更新数据的方式主要有三种：

• 仅仅是更新图表的数据

• 清理所有，重新绘制

• 使用 DataView 时的更新

更新数据

如果需要马上更新图表，使用 chart.changeData(data) 即可

chart.changeData(newData);

• view 也支持 view.changeData(data)

如果仅仅是更新数据，而不需要马上更新图表，可以调用 chart.source(data)，需要更新图表时调用 chart.repaint()

chart.source(newData);

chart.guide().clear();// 清理guide
chart.repaint();

清理图形语法

更新数据时还可以清除图表上的所有元素，重新定义图形语法，重新绘制

chart.line().position('x*y');

chart.render();

chart.clear(); // 清理所有
chart.source(newData); // 重新加载数据
chart.interval().position('x*y').color('z');
chart.render();

然后重点是用起来，先看我的组件结构：

关键点在于：

1. 不要将chart实例化在初始化方法里
2. 将这个实例保存下来
3. 重载方法不要去new Chart
4. 直接执行changeData（）