范文杰_fe ·ECharts 數(shù)據(jù)異步加載
我們?cè)谝郧暗膶W(xué)習(xí)中可能了解過“同步”，“異步”的概念，同步就意味著當(dāng)我們完成了一件事之后才能開始另一個(gè)事情，也就是說當(dāng)我們使用同步的數(shù)據(jù)請(qǐng)求方式向后臺(tái)發(fā)送請(qǐng)求，直到我們獲取到數(shù)據(jù)才能讓我們的圖表進(jìn)行展示，數(shù)據(jù)量較大或者網(wǎng)絡(luò)較慢時(shí)可能會(huì)導(dǎo)致我們的圖表整體加載不出來的情況，用戶體驗(yàn)及不好，所以我們應(yīng)該根據(jù)情況使用異步的方式加載數(shù)據(jù)，而且 ECharts 還為我們配備了優(yōu)質(zhì) Loading 動(dòng)畫~ 讓我們一起去看一下吧。
1. 簡(jiǎn)介
很多時(shí)候圖表的數(shù)據(jù)是通過異步加載方式獲得的，在 ECharts 中可以使用 jQuery、axios、fetch 等任何熟悉的工具先加載數(shù)據(jù)，再調(diào)用 setOption 渲染圖表，例如：
const ecInstance = echarts.init(document.getElementById('main'));
const data = await axios.get('data/source');
ecInstance.setOption({
title: ...,
series: [
{type:'xxx', data:data}
]
});
2. 使用加載動(dòng)畫
上例的問題是從 init 到 setOption 這段時(shí)間內(nèi)，圖表容器沒有內(nèi)容，一片空白，可能會(huì)讓用戶誤解為 bug，因此需要給容器加上 loading 效果以提示用戶正在加載數(shù)據(jù)。echarts 內(nèi)置了一套簡(jiǎn)單的加載動(dòng)畫效果，通過 echartInstance.showLoading 方法觸發(fā)；通過 echartInstance.hideLoading 方法關(guān)閉，例如：
<!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返回，模擬耗時(shí)請(qǐng)求
}, 3000);
});
}
// await 語句必須包進(jìn)async函數(shù)
(async () => {
// 1. 初始化圖表實(shí)例
const myChart = echarts.init(document.getElementById('main'));
// 2. 觸發(fā)加載動(dòng)畫
myChart.showLoading();
// 3. 調(diào)用異步接口加載數(shù)據(jù)
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. 設(shè)置圖表配置
myChart.setOption(option);
// 5. 隱藏加載動(dòng)畫
myChart.hideLoading();
})();
</script>
</body>
</html>
示例效果：
echartInstance.showLoading 函數(shù)簽名如下：
(type?: string, opts?: Object) => void
參數(shù)：
- type：可選，加載動(dòng)畫類型，目前只支持 ‘default’；
- opts：可選，加載動(dòng)畫配置項(xiàng)，默認(rèn)配置項(xiàng)：
{
text: 'loading',
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.8)',
zlevel: 0
}
提示：
echarts 目前只提供了一種加載動(dòng)畫樣式，而且沒有對(duì)外暴露加載動(dòng)畫的擴(kuò)展接口。如果應(yīng)用場(chǎng)景要求使用自定義動(dòng)畫，可以自行實(shí)現(xiàn)，在圖表容器上覆蓋一層遮罩層，并在遮罩層上疊加加載動(dòng)畫效果。
3. 圖表預(yù)配置
對(duì)于異步數(shù)據(jù)場(chǎng)景，也可以在數(shù)據(jù)完成加載前預(yù)先提供圖表的基本配置信息，例如：
<!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ù)據(jù)加載完畢后再提供數(shù)據(jù)配置
myChart.setOption(option);
})();
</script>
</body>
</html>
示例效果：
Tips：
預(yù)設(shè)配置信息并不能帶來性能上的提升，因?yàn)槊看握{(diào)用setOption都會(huì)重繪所有組件、圖表。預(yù)設(shè)的作為純粹只是在數(shù)據(jù)來臨之前提供一個(gè)基本線框圖，提示用戶即將到來什么樣的信息內(nèi)容。
4. 小結(jié)
本節(jié)主要介紹在 Echarts 中如何優(yōu)雅地進(jìn)行數(shù)據(jù)加載，包括如何使用 showLoading 接口展示加載動(dòng)畫；如何將圖表配置拆分為預(yù)配置、數(shù)據(jù)配置兩部分以盡快提供交互響應(yīng)。
2025 imooc.com All Rights Reserved |