欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在vue.js中使用echarts,数据动态刷新

程序员文章站 2022-05-08 08:12:50
在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新? 这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础。我们再设想一下, 如果想要支持数据的自动刷新,必然需要一个监听器能够实时监 ......

   在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,数据动态刷新