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

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

zonemu2周前 (07-21)技术文章7

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



相关文章

2020年最漂亮的7个Linux发行版(最受欢迎的linux发行版)

请关注本头条号,每天坚持更新原创干货技术文章。如需学习视频,请在微信搜索公众号“智传网优”直接开始自助视频学习1. 前言对于想学习Linux的朋友们,心中一定有疑问,哪个Linux版本比较好入门,Li...

Vue状态管理:Pinia完整指南(状态管理vuex)

概述本文专注于Vue的状态管理。我们将深入探讨如何使用Pinia来管理Vue应用程序的状态。状态管理使用props和emit进行父子组件间的数据协作虽然方便,但在以下情况下可能不够充分,数据传递往往会...

「2022」打算跳槽涨薪,必问面试题及答案——VUE篇

1、为什么选择VUE,解决了什么问题?vue.js 正如官网所说的,是一套构建用户界面的渐进式框架。与其它重量级框架不同的是,vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层,不仅易...

Vue2的16种传参通信方式(vue传参数)

前言先直入主题列出有哪些传参方式,下面再通过事例一一讲解。props(父传子)$emit与v-on (子传父)EventBus (兄弟传参).sync与update: (父子双向)v-model (父...

同事git push到主分支上了,技术总监怒了

事情是这样的,同事前几天提交使用git提交代码的时候不小心提交到主分支上了,关键还提交成功了,这可是他自己开发的模块,还没测试的呢。技术总监也知道了,这下他慌乱了。最后还是技术总监给他兜底了。为了防止...

程序员开发必会之git常用命令,git配置、拉取、提交、分支管理

整理日常开发过程中经常使用的git命令!git配置SSH刚进入项目开发中,我们首先需要配置git的config、配置SSH方式拉取代码,以后就免输入账号密码了!# 按顺序执行 git config -...