当前位置:首页 > 技术分析 > 正文内容

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

ruisui883个月前 (01-29)技术分析16

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
});



扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/603.html

分享给朋友:

“echarts数据更新禁止图表重新绘制” 的相关文章

【Vue3 基础】05.组件化

这是 Vue3 + Vite + Pinia +TS + Element-Plus 实战系列文档。最近比较忙没什么时间写文章,争取早日把这个系列完结吧~生命周期和模板引用在本章之前,我们通过响应式 api 和声明式渲染,处理了 DOM 的更新,但光是这些,对于一些复杂的需要手动操作 DOM 的情况,...

vue 3 学习笔记 (八)——provide 和 inject 用法及原理

在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦。像这种情况,可以使用 provide 和 inject 解决这种问题,不论组件嵌套...

全新斯柯达柯珞克Karoq深度评测:大众替代品

“斯柯达柯珞克是一款出色的全能家庭 SUV,具有许多有用的功能”价格36,605 英镑- 49,190 英镑优点方便的 VarioFlex 后排座椅非常适合家庭入住驾驶乐趣缺点保修期短保守的内饰性格比Yeti少结论——斯柯达柯珞克是一辆好车吗?斯柯达柯珞克是在辉煌的七座 斯柯达柯迪亚克之后推出的,因...

再来一波黑科技工具,低调使用

静读天下静读天下是一个特别优秀的电子书阅读器。它上面有多个在线书库,像古登堡计划,很多种优秀的书杂志,都可以下载来阅读。它还能智能识别章节功能,还支持外置的语音阅读功能。它支持多种文本格式,比如说txt,pdf,epub,mobi等等。为了便于阅读它还有10 种配色方式,还有夜间模式。不过免费版有广...

学前端,这30个CSS选择器,你必须熟记

你学会了基本的id,class类选择器和descendant后代选择器,然后就觉得完事了吗?如果这样,你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3,并且只能在现代的浏览器中使用,但学会这些是大有好处的。什么是CSS选择器呢?每一条css样式定义由两部分组成,形式如下:[...

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了。动态路由设置一般有两种:(1)、简单的角色路由设置: 比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置(2)、复杂的路由权限设置: 比如OA系统、多种角色的权限...