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完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 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
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
python使用Flask操作mysql实现登录功能
2018/05/14 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
python3安装speech语音模块的方法
2018/12/24 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
android面试问题与答案
2016/12/27 面试题
大学生饮食连锁店创业计划书
2014/01/17 职场文书
行政助理工作职责范本
2014/03/04 职场文书
争先创优活动总结
2014/08/27 职场文书
三方协议书
2015/01/27 职场文书
法制工作总结2015
2015/07/23 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers