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