最近在做大屏的骚操作,老板说要将大屏上面的图标效果尽量的活动起来,前篇说的“数字步进器”也是如此。
首先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()
网友评论