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


Posted in Javascript onApril 16, 2019

 在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新?

   这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础。我们再设想一下,

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

所幸Vue为我们提供了==watcher==功能,通过它我们可以很方便的实现上述功能:

watch:{
  option:function(newvalue,oldvalue){  
   //侦听相对应的属性
   //判断echarts对象是否存在存在 if(charts),charts为定义的echarts对象,
   //若存咋, 则继续判断属性是否发生变化 if(newvalue),发生变化重新设置echarts的option, charts.setOption(newvalue),没发生变化则 charts.setOption(loldvalue)
  //若charts对象不存在,则直接初始化echarts
 } 
}

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

总结

以上所述是小编给大家介绍的vue.js中使用echarts实现数据动态刷新功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
关于js类的定义
Jun 28 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
详解vue-cli 脚手架 安装
Apr 16 #Javascript
详解jquery和vue对比
Apr 16 #jQuery
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 #Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 #jQuery
vue+element UI实现树形表格带复选框的示例代码
Apr 16 #Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 #Javascript
Vue 理解之白话 getter/setter详解
Apr 16 #Javascript
You might like
PHP 批量删除数据的方法分析
2009/10/30 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
python代码过长的换行方法
2018/07/19 Python
Python3+Appium安装使用教程
2019/07/05 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
大学班长的职责
2014/01/27 职场文书
司机检讨书
2014/02/13 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
社区平安建设方案
2014/05/25 职场文书
工作证明书
2015/06/15 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python