echarts加载数据时加动画效果

ECharts是一个流行的JavaScript图表库，它可以轻松地添加数据动态加载的动画效果。当你需要分批或者延迟加载大量数据时，可以使用`echarts.setOption()`的异步模式结合`series.data`的数组处理来实现动画加载。

首先，创建一个空的数据数组，然后在每次加载一部分数据后，更新这个数组，并设置一个新的option，其中包含新的数据部分和动画配置。例如：

// 假设dataList是你所有数据的部分列表
var dataList = [];
for (let i = 0; i < totalData; i += pageSize) {
  dataList.push({
    // 数据部分...
  });
}

var option = {
  series: [
    {
      type: 'line',
      data: dataList[0], // 初始加载第一部分数据
      animation: { // 动画配置
        effect: 'elastic', // 指定动画效果
        duration: 1000, // 动画持续时间，单位ms
      },
    }
  ]
};

function loadMoreData() {
  if (dataList.length > 0) {
    var newSeriesData = dataList.shift(); // 移除已加载数据
    option.series[0].data = newSeriesData.concat(option.series[0].data); // 更新数据
    echarts.setOption(option, true); // 异步更新图表
  }
}

loadMoreData(); // 调用初始加载

在这个例子中，`loadMoreData`函数会按照设定的页面大小逐次加载更多的数据并添加动画。当数据加载完毕时，你可以移除动画配置或者调整它以适应你的需求。