echarts 动态更新数据

前言

echarts也可以很方便的用来做动态图表，即根据最新数据来更新图表显示。

代码

直接上代码

1. 获取图表实例 首先，您需要获取图表实例，可以通过 Echarts 提供的 API 来获取。

var myChart = echarts.init(document.getElementById('myChart'));

2. 更新数据 一旦您获得了图表实例，就可以通过调用 setOption 方法更新图表数据。在 setOption 方法中，您可以使用数据项来更新数据

var arr = [];
for(var i = 0; i< 7; i++ ) {
    arr.push(Math.round(Math.random() * 100 + 10));
}
myChart.setOption({
    series: [{
        data: arr,
        animation: true,
        animationDuration: 1000,
        animationEasing: 'linear'
    }]
});

上述代码中，animation 配置被设置为 true，表示开启动画效果。animationDuration 配置被设置为 1000，表示动画持续时间为 1 秒。animationEasing 配置被设置为 linear，表示动画缓动效果为线性。