建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
Echarts 實(shí)現(xiàn)異步數(shù)據(jù)加載
我們?cè)谌腴T(mén)第一課中是在初始化后的 setOption 中直接填入數(shù)據(jù)的，但大部分的時(shí)候我們需要將數(shù)據(jù)異步加載后再填入。那么怎么實(shí)現(xiàn)？
荊門(mén)網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
ECharts 中實(shí)現(xiàn)異步數(shù)據(jù)的更新的操作不難，在初始化圖表后的任何時(shí)間通過(guò)使用 jQuery 等工具異步獲取數(shù)據(jù)后通過(guò) setOption 填入數(shù)據(jù)和配置項(xiàng)即可，操作如下：
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '異步數(shù)據(jù)加載示例'
},
tooltip: {},
legend: {
data:['銷(xiāo)量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷(xiāo)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});還有一種方法是先設(shè)置好別的樣式，顯示出一個(gè)空的直角坐標(biāo)軸，然后獲取并填入數(shù)據(jù)，操作如下：
cdcxhl.com(www.cdcxhl.com)
效果顯示如下：
點(diǎn)擊編輯實(shí)例 》》
ECharts 中通過(guò) name 屬性在更新數(shù)據(jù)的時(shí)候?qū)?yīng)到相應(yīng)的系列。
上面示例中如果 name 不存在也可以根據(jù)系列的順序正常更新，但是更多時(shí)候推薦更新數(shù)據(jù)的時(shí)候加上系列的 name 數(shù)據(jù)。
Echarts 設(shè)置 loading 動(dòng)畫(huà)
有時(shí)候由于各種原因，數(shù)據(jù)的加載會(huì)需要較多的時(shí)間，這樣一個(gè)空白的直角坐標(biāo)系會(huì)讓用戶(hù)認(rèn)為出現(xiàn) bug 了，為了避免這種錯(cuò)覺(jué)，我們需要使用 loading 動(dòng)畫(huà)給用戶(hù)一些提示。
利用 Echarts 提供的加載動(dòng)畫(huà)，我們通過(guò)調(diào)用 showLoading 方法顯示加載動(dòng)畫(huà)，當(dāng)數(shù)據(jù)加載完成后再調(diào)用 hideLoading 方法將加載動(dòng)畫(huà)隱藏。
具體操作如下：
cdcxhl.com(www.cdcxhl.com)
設(shè)置完效果如下：
數(shù)據(jù)為加載完成，顯示加載動(dòng)畫(huà)：
Echarts 實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)更新
ECharts 由數(shù)據(jù)驅(qū)動(dòng)，數(shù)據(jù)的改變驅(qū)動(dòng)圖表展現(xiàn)的改變，因此動(dòng)態(tài)數(shù)據(jù)的實(shí)現(xiàn)也變得異常簡(jiǎn)單。
Echarts 中通過(guò) setOption 更新所有的數(shù)據(jù)，我們要做的只是定時(shí)獲取數(shù)據(jù)，然后使用 setOption 填入數(shù)據(jù)，至于數(shù)據(jù)在過(guò)程中發(fā)生了哪些變化，不在我們的考慮范圍內(nèi)。
ECharts 會(huì)找到兩組數(shù)據(jù)之間的差異然后通過(guò)合適的動(dòng)畫(huà)去表現(xiàn)數(shù)據(jù)的變化。
ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入單個(gè)數(shù)據(jù)，可以先 data.push(value) 后 setOption
具體可以看下面示例：
cdcxhl.com(www.cdcxhl.com)
名稱(chēng)欄目：創(chuàng)新互聯(lián)ECharts教程：ECharts實(shí)現(xiàn)異步數(shù)據(jù)加載和更新
標(biāo)題鏈接：http://fisionsoft.com.cn/article/djecccp.html
