ECharts 数据异步加载

我们在以前的学习中可能了解过“同步”，“异步”的概念，同步就意味着当我们完成了一件事之后才能开始另一个事情，也就是说当我们使用同步的数据请求方式向后台发送请求，直到我们获取到数据才能让我们的图表进行展示，数据量较大或者网络较慢时可能会导致我们的图表整体加载不出来的情况，用户体验及不好，所以我们应该根据情况使用异步的方式加载数据，而且 ECharts 还为我们配备了优质 Loading 动画~ 让我们一起去看一下吧。

1. 简介

很多时候图表的数据是通过异步加载方式获得的，在 ECharts 中可以使用 jQuery、axios、fetch 等任何熟悉的工具先加载数据，再调用 setOption 渲染图表，例如：

const ecInstance = echarts.init(document.getElementById('main'));
const data = await axios.get('data/source');
ecInstance.setOption({
  title: ...,
  series: [
    {type:'xxx', data:data}
  ]
});

2. 使用加载动画

上例的问题是从 init 到 setOption 这段时间内，图表容器没有内容，一片空白，可能会让用户误解为 bug，因此需要给容器加上 loading 效果以提示用户正在加载数据。echarts 内置了一套简单的加载动画效果，通过 echartInstance.showLoading 方法触发；通过 echartInstance.hideLoading 方法关闭，例如：