vue.js中使用echarts实现数据动态刷新功能
程序员文章站
2022-04-29 13:36:24
在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新?
这是因为ec...
在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实现数据动态刷新功能,希望对大家有所帮助
上一篇: 各种水果蔬菜果汁做法
推荐阅读
-
微信小程序中使用ECharts 异步加载数据实现图表功能
-
详解iOS开发中UItableview控件的数据刷新功能的实现
-
在vue.js中使用echarts,数据动态刷新
-
vue.js使用v-model指令实现的数据双向绑定功能示例
-
vue.js中使用echarts实现数据动态刷新功能
-
vue中通过使用$attrs实现组件之间的数据传递功能
-
使用JAVA中的动态代理实现数据库连接池 JavaSQLJDBC应用服务器互联网
-
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
-
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
-
微信小程序中使用ECharts 异步加载数据实现图表功能