echarts数据更新禁止图表重新绘制

简介: echarts的数据更新使用setOption来实现的。官网的解释是这样的:设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。

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
});
目录
相关文章
|
2月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
42 0
|
2月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
64 2
|
12天前
|
JavaScript
Vue引入Echarts图表的使用
Vue引入Echarts图表的使用
|
1月前
|
数据可视化 前端开发
web前端-Echarts-5.3高级可视化和图表组合布局
web前端-Echarts-5.3高级可视化和图表组合布局
|
2月前
使用vue3实现echarts漏斗图表以及实现echarts全屏放大效果
使用vue3实现echarts漏斗图表以及实现echarts全屏放大效果
26 0
|
3月前
|
JavaScript 小程序 Java
基于Java的大学生汉服租赁网站的设计与实现(亮点:在线支付、ECharts图表展示、完整下单流程、视频点播、点赞评论互动)
基于Java的大学生汉服租赁网站的设计与实现(亮点:在线支付、ECharts图表展示、完整下单流程、视频点播、点赞评论互动)
36 0
|
3月前
|
移动开发 JavaScript
Echarts根据需要生成对应的图表
Echarts根据需要生成对应的图表
24 0
|
3月前
|
移动开发 JavaScript
echarts生成图表并下载为PDF文件(附带js源码地址)
echarts生成图表并下载为PDF文件(附带js源码地址)
40 0
|
3月前
|
移动开发 前端开发 JavaScript
用echarts实现一个简单的生成图表的功能
用echarts实现一个简单的生成图表的功能
18 0