第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

范文杰_fe · 更新于 2020-09-27

ECharts 數(shù)據異步加載

我們在以前的學習中可能了解過“同步”，“異步”的概念，同步就意味著當我們完成了一件事之后才能開始另一個事情，也就是說當我們使用同步的數(shù)據請求方式向后臺發(fā)送請求，直到我們獲取到數(shù)據才能讓我們的圖表進行展示，數(shù)據量較大或者網絡較慢時可能會導致我們的圖表整體加載不出來的情況，用戶體驗及不好，所以我們應該根據情況使用異步的方式加載數(shù)據，而且 ECharts 還為我們配備了優(yōu)質 Loading 動畫~ 讓我們一起去看一下吧。

1. 簡介

很多時候圖表的數(shù)據是通過異步加載方式獲得的，在 ECharts 中可以使用 jQuery、axios、fetch 等任何熟悉的工具先加載數(shù)據，再調用 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 效果以提示用戶正在加載數(shù)據。echarts 內置了一套簡單的加載動畫效果，通過 echartInstance.showLoading 方法觸發(fā)；通過 echartInstance.hideLoading 方法關閉，例如：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px; height: 400px;"></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([27, 32, 69, 127, 147, 76, 86]);
						// 延遲3s返回，模擬耗時請求
					}, 3000);
				});
			}

			// await 語句必須包進async函數(shù)
			(async () => {
				// 1. 初始化圖表實例
				const myChart = echarts.init(document.getElementById('main'));
				// 2. 觸發(fā)加載動畫
				myChart.showLoading();
				// 3. 調用異步接口加載數(shù)據
				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>
運行案例 點擊 "運行案例" 可查看在線運行效果

示例效果：

圖片描述

echartInstance.showLoading 函數(shù)簽名如下：

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

參數(shù)：

  • type：可選，加載動畫類型，目前只支持 ‘default’；
  • opts：可選，加載動畫配置項，默認配置項：
{
  text: 'loading',
  color: '#c23531',
  textColor: '#000',
  maskColor: 'rgba(255, 255, 255, 0.8)',
  zlevel: 0
}

提示：

echarts 目前只提供了一種加載動畫樣式，而且沒有對外暴露加載動畫的擴展接口。如果應用場景要求使用自定義動畫，可以自行實現(xiàn)，在圖表容器上覆蓋一層遮罩層，并在遮罩層上疊加加載動畫效果。

3. 圖表預配置

對于異步數(shù)據場景，也可以在數(shù)據完成加載前預先提供圖表的基本配置信息，例如：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px; height: 400px;"></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([27, 32, 69, 127, 147, 76, 86]);
					}, 3000);
				});
			}
			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 }],
				};
				// 數(shù)據加載完畢后再提供數(shù)據配置
				myChart.setOption(option);
			})();
		</script>
	</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

示例效果：

圖片描述

Tips：
預設配置信息并不能帶來性能上的提升，因為每次調用 setOption 都會重繪所有組件、圖表。預設的作為純粹只是在數(shù)據來臨之前提供一個基本線框圖，提示用戶即將到來什么樣的信息內容。

4. 小結

圖片描述
本節(jié)主要介紹在 Echarts 中如何優(yōu)雅地進行數(shù)據加載，包括如何使用 showLoading 接口展示加載動畫；如何將圖表配置拆分為預配置、數(shù)據配置兩部分以盡快提供交互響應。