echarts的数据更新使用setOption来实现的。
官网的解释是这样的:
设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
所以我们在希望数据实时更新的时间,使用setOption即可。
但是setOption会导致图表及时更新。
及时更新在通常情况下是没有问题,但是和dataZoom缩放组件一起使用的话。每次的setOption都会将以前的dataZoom进行重置。
比如,现在的dataZoom的初始位置为80-100,手动缩放到40-60,此时使用setOption的话,dataZoom会瞬间回到80-100的位置,即回到重新设置的位置。
这样并不是我们所期望的效果,我们希望得到的是,数据的更新并不影响我本次的缩放,即setOption不会影响我当前的缩放位置。
解决方法
echarts3.0以上的setOption中有可选配置参数。
参数:
调用方式:
chart.setOption(option, notMerge, lazyUpdate);
或者
chart.setOption(option, {
notMerge: ...,
lazyUpdate: ...,
silent: ...
});
- option
图表的配置项和数据,具体见配置项手册。
- notMerge
可选,是否不跟之前设置的 option 进行合并,默认为 false,即合并。
- lazyUpdate
可选,在设置完 option 后是否不立即更新图表,默认为 false,即立即更新。
- silent
可选,阻止调用 setOption 时抛出事件,默认为 false,即抛出事件。
其中的lazyUpdate参数就是我们的所需要的
++可选,在设置完 option 后是否不立即更新图表,默认为 false,即立即更新。++
完整的配置参数
chart.setOption(option, {
false,
true,
false
});