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加入最后一个，这样就产生了移动的效果