zoukankan      html  css  js  c++  java
  • Echarts动画效果:实现数据左右移动

    1、业务背景

      图形实时从后台获取数据,让图形从最右边出现,每隔一秒向左移一位,当最左边的数据移到Y轴时,最左边的数据移出屏幕,最右边增加一个数。实现一个从右往左动画的效果

    2、先看下项目中的demo解决实例

      让数据从最右边出,不重复说了,利用数组的length特性

    mounted(){
        this.series.length = 50
        this.fetchData();
    }

      其次就是对数据的处理:当数组长度大于设定的固定值时,删除数组的第一个元素;然后将获取到的值push到数组

    fetchData(){
        this.timer = setInterval(_ => {
            getMonitorApi().then((res) => {
                if(res.status === 200){
                    if(this.series.length > 50){
                        this.series.shift()
                    }
                    this.series.push(res.data.series.data)
                    this.xData = res.data.xData
                    this.drawLine()
                }
            })
        },2000)
    },

    3、解决方案思路

    (1)首先第一步考虑的是,获取到这个series的data数组:

    var data= option.series[0].data;//获取数组  

    (2)其次是做一个定时器,随机生成一个随机数,push到数组,并且删除数组的第一个元素:

        window.setInterval(function(){  
            data.shift();  
            var randomNum=parseInt(Math.random()*400)  
            data.push(randomNum); 
        },1000);  

    (3)然后是写一个刷新的函数,并把新的数据绑定到ECharts中:

        function refreshData(){  
            var option = myChart.getOption();//获取页面的option  
            option.series[0].data = data;//设置新的数据  
            myChart.setOption(option);//绑定到ECharts  
        }

    (4)最后在定时器里调用刷新函数,使数据产生移动效果

        window.setInterval(function(){  
            data.shift();  
            var randomNum=parseInt(Math.random()*400)  
            data.push(randomNum);  
            console.log(data);  
            refreshData();  
        },1000);  

      补充:因为固定数组里面只有固定的显示个数,所以删除第一个,push加入最后一个,这样就产生了移动的效果

  • 相关阅读:
    随机选择
    Creating Apps With Material Design —— Defining Shadows and Clipping Views
    HDU 1853Cyclic Tour(网络流之最小费用流)
    053第502题
    【ThinkingInC++】64、重载new和delete,来模仿内存的分配
    Android设置里面默认存储器选项(default write disk)的实现
    Transparency Tutorial with C#
    ssh远程登录linux live系统
    JAVA把字符串当作表达式执行
    [Head First设计模式]生活中学设计模式——组合模式
  • 原文地址:https://www.cnblogs.com/goloving/p/9108307.html
Copyright © 2011-2022 走看看