echart 动态折线图实现，及上下波动bug修复

一、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);

问题解决了，心里舒服多了！