ECharts 数据异步加载

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

很多时候图表的数据是通过异步加载方式获得的，在 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}
  ]
});

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

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		< charset="utf-8" />
		< http-equiv="X-UA-Compatible" content="IE=edge" />
		< name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: px; height: px;"></div>

		<script src="//cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
		<script type="text/javascript">
			// 使用 promise 模拟异步操作
			function fetchData() {
				return new Promise((r) => {
					setTimeout(() => {
						r([, , , , , , ]);
						// 延迟3s返回，模拟耗时请求
					}, );
				});
			}

			// await 语句必须包进async
			(async () => {
				// 1. 初始化图表实例
				const myChart = echarts.init(document.getElementById('main'));
				// 2. 触发加载动画
				myChart.showLoading();
				// 3. 异步接口加载数据
				const data = await fetchData();

				const option = {
					xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
					yAxis: { type: 'value' },
					series: [{ type: 'bar', data: data }],
				};
				// 4. 设置图表配置
				myChart.setOption(option);
				// 5. 隐藏加载动画
				myChart.hideLoading();
			})();
		</script>
	</body>
</html>

示例：

签名如下：

(type?: string, opts?: Object) => void

参数：

{
  text: 'loading',
  color: '#c23531',
  textColor: '#000',
  maskColor: 'rgba(255, 255, 255, 0.8)',
  zlevel: 
}

：

echarts 目前只提供了一种加载动画样式，而且没有加载动画的扩展接口。如果应用场景要求使用动画，可以自行实现，在图表容器上覆盖一层遮罩层，并在遮罩层上叠加加载动画。

对于异步数据场景，也可以在数据完成加载前预先提供图表的基本配置信息，例如：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		< charset="utf-8" />
		< http-equiv="X-UA-Compatible" content="IE=edge" />
		< name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: px; height: px;"></div>

		<script src="//cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
		<script type="text/javascript">
			function fetchData() {
				return new Promise((r) => {
					setTimeout(() => {
						r([, , , , , , ]);
					}, );
				});
			}
			const myChart = echarts.init(document.getElementById('main'));

			const option = {
				xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
				yAxis: { type: 'value' },
				series: [{ type: 'bar' }],
			};
			// 提前提供基本配置
			myChart.setOption(option);

			(async () => {
				const data = await fetchData();

				const option = {
					series: [{ data: data }],
				};
				// 数据加载完毕后再提供数据配置
				myChart.setOption(option);
			})();
		</script>
	</body>
</html>

示例：

Tips：
预设配置信息并不能带来上的提升，因为每次 setOption 都会重绘所有组件、图表。预设的作为纯粹只是在数据来临之前提供基本线框图，即将到来什么样的信息。

←ECharts action 交互

ECharts 标题组件→

ECharts 数据异步加载

您的鼓励是对我最大的支持