在制作大屏可视化时,需要有种动的效果,大概的思想是通过定时器太改变
1、组件传递时间参数
//由于每个图表都是都是封装成一个组件,在父组件中 通过 传递时间
<myEcharts :moveTime="4000">
2、子组件中进行接收
<template>
<div style="width:1000px; height:700px" ref="broken1"></div>
</template>
<script>
//1. 获取到时间
props : {
moveTime : null
},
data() {
return:{
timer : null
}
}
beforeDestroy() {
//2.销毁前清除定时器
clearInterval(this.timer);
},
echartsFun() {
let brokenView = this.echarts.init(this.$refs.broken1);
//3.设置定时器
this.timer = setInterval(()=>{
//option....
},this.moveTime)
//4.清除整个对象
brokenView.clear();
brokenView.setOption(option)
},
</script>