让你的echarts每隔一段时间刷新

最近在做大屏的骚操作,老板说要将大屏上面的图标效果尽量的活动起来,前篇说的“数字步进器”也是如此。
首先echarts图肯定是用组件抽出来写的,相信各位也是如此

父组件中

image.png
<EchartLine :refresh_interVal="6000"></EchartLine>

子组件中

props: {
      refresh_interVal: null  //接收父组件的刷新间隔值
},
data() {
    return {
        timer:null, //定义一个刷新的timer
    };
},
beforeDestroy() {
        clearInterval(this.timer)
},
methods:{
  refresh() {
        this.timer = setInterval(() => {
        this.init() //你获取echarts数据的方法
        }, this.refresh_interVal)
    },
}

最后在你渲染echarts中的方法的最下面,加上一行代码,清除数据重新渲染,即可达到图表每个一段时间动一下的效果。


image.png
myEcharts.clear()

不想工作了.......今天下班去看《星际穿越》!