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 相关文章推荐
javascript 获取图片颜色
Apr 05 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
简单实现js放大镜效果
Jul 24 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
vue弹出框组件封装实例代码
Oct 31 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&MYSQL留言板源码
2020/07/19 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
laravel model 两表联查示例
2019/10/24 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
js查错流程归纳
2012/05/04 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python有证书的加密解密实现方法
2014/11/19 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
Python partial函数原理及用法解析
2019/12/11 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
python里反向传播算法详解
2020/11/22 Python
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
亮化工程实施方案
2014/03/17 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
社团招新宣传语
2015/07/13 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android