一、echart 动态折线图实现原理等
1.原理：echart 动态折线图的实现原理，本质就是动态的改变series中data的值。
2.步骤：
a.定义一个定时器，间隔指定的时间去触发事件（改变series中data的方法）。
b.在事件中，要重新定义option，并重新设置。
c.在事件中，不断的改变series中data的值（建议从前面删除，后面插入的方式）。
3.注意：
a.如果chart被封装成了组件，有可能会不成功。建议在单一页面里面操作。
二、官网代码
1.官网代码
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
};
}
var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
data.push(randomData());
}
option = {
title: {
text: '动态数据 + 时间坐标轴'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
}]
};
setInterval(function () {
for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}
myChart.setOption({
series: [{
data: data
}]
});
}, 1000);
三、效果图（静态）
效果是：折线会往箭头方向移动，左边的消失，右边的进入。
四、入坑的bug
正常情况下，折线图会正常的消失和出现，但是有时候不是那么简单的就成功了。我遇到的问题是折线图在上下跳动。如图：
1.原因分析：
a.出现问题，总是要百度一下。第一次有点希望的看了这个帖子：https://www.dazhuanlan.com/2020/01/10/5e17f65b727fc/
事出有因，我的数据结构还真就是普通的结构（[key,value]），不是官网的对象结构{name:::,value:[key:"",value""]}。高兴的以为能解决问题，改了不少代码。最终。。。结果都懂的。
b.既然不是数据结构的问题，那么肯定就是别的问题。我把方向转移到了数据的格式上面。因为，不是所有的数据都会跳动，有的数据会，有的数据不会。为什么会出现这种情况呢？还真的不好定位。结果，各种编码集转换，格式处理。然而，结果还是不是很满意，还是没有解决问题。
c.这样，一个月过去了，心里的石头还是没有放下来。又换了个思维，从出现跳动的数值上面下文章，是不是数值有什么问题，有什么规律呢？看了半天，还是没有看出什么问题来，毕竟不是数学专业的。
d.时间很快，半个月又过去了。这次从出现跳动的频率上来思考。开始以为是1秒钟一次跳动（定时器不同，会有不同）。然后放慢了速度，发现出现跳动的频率和时间没有关系。问题越来越近了，既然不是时间问题，那就是次数问题啊！果不其然，不管怎么改变定时器的频率，都是“删除/添加”5次数据后就开始跳动一次。问题总算是定位到了，该怎么解决呢？各种尝试后，终于弄出来了。心里的石头也是总算放下来了。
五、bug处理
1.定时器：this.timer = setInterval(this.get, 1000);
2.get方法
3.在每次get()方法里面，要先处理5次对series中data的“删除/新增”操作。这5次操作和5次后跳动的关系正好匹配上，就解决问题了。至于为什么会出现这个问题，本人小白一个，希望大神来补充一下。
get()的伪代码如下：
for(var i = 0; i < 5; i++) {
data.shift();
data.push(newData);
}
chart.setOption(option);
问题解决了，心里舒服多了！