美文网首页
让你的echarts每隔一段时间刷新

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

作者: 顺小星 | 来源:发表于2020-08-09 17:54 被阅读0次

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

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

    相关文章

      网友评论

          本文标题:让你的echarts每隔一段时间刷新

          本文链接:https://www.haomeiwen.com/subject/gwbfdktx.html