Echarts坑-动态折线图更新时跳动

发表于 阅读次数：

用Echarts做动态折线图，参照->这个demo
每次新插入一个点并删除最前面的点，实现随着时间平滑移动。但遇到一个问题，更新数据时会产生跳动。

一番试验找到原因，是定义的data格式问题。是我把demo中的randomData()函数改了个格式

1
2
3
4
5
function randomData() {
    var now = new Date();
    var value = 1 + (Math.random() - 0.5) * 2;
    return [now, value*1000]
}

改完虽然能运行，能实时更新数据，但每次插入一个数据，绘图呈现的效果就是重新绘制全图一样，有一个从水平线扩展成折线图的感觉，所以造成了图形不停跳动。当然，demo中并没有这样的跳动，是很稳定的平移。

解决方法：改成以下格式，也就是demo给出的格式

1
2
3
4
5
6
7
8
9
10
11
function randomData() {
    now = new Date();
    value =  Math.random() * 21 - 10;
    return { 
        name :now,
        value: [
            now,
            Math.round(value)
        ]
    }
}

之后便能平滑的移动了。

总结：返回值必须是一个对象，有name属性和value属性。