vue.js中使用echarts实现数据动态刷新功能

在vue使用echarts时，可能会遇到这样的问题，就是数据变化时，echarts不更新

这是因为Echarts是数据驱动的，这意味着只要我们重新设置数据，那么图表就会随之重新渲染

如果想要支持数据的自动刷新，必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据。

Vue提供了“watch”：

在react新项目中 使用react-for-echarts中导出的ReactCharts组件，默认通过option的series选项更新数据参数，但是发现组件没有触发重绘？？

通过暴力设置key值强制该组件卸载刷新，缺点是可能存在性能损耗

每个echarts图表都有一个实例instance，可以借助getEchartsInstance（）函数获取到，实例中的setOption支持更新数据。

ecahrts 实例方法

1. 当第二次加载的数据覆盖等量的第一次的数据时，第一次加载多余的数据不会丢失，还会展示在图上。

console输出echarts中的option的数据legend和series数据均为正常第二次加载的数据，数据已更新，也触发了echarts的渲染。

解决办法：

this.charts.setOption(option)

应为

this.charts.setOption(option,true)

setOption有3个属性

setOption(option,notMerge,lazyUpdate)

第二个notMerge默认为false,即默认合并两个数据，置为true之后则不合并数据

2.第二次加载的数据和第一次加载的数据一样（应为不同的数据），导致图没有变化

console输出的第二次数据跟第一次数据一样

解决办法：

考虑Ajax的异步性，数据是否已经在二次渲染前完成刷新

---