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加入最后一個，這樣就產生了移動的效果