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