基于Ajax與Echarts的網頁動態數據加載
2018-03-06 12:59:26黃雅莉鐘琪
科技資訊 2018年23期
黃雅莉 鐘琪
摘 要：信息化時代，數據無處不在，面對龐大的數據，圖表可直觀地將其以一種合適的方式展現給我們。Echarts使開發人員以較少的代碼設計出更為詳細、實用且酷炫的圖表，Ajax異步刷新結合Echarts的圖表功能，使得數據動態加載。
關鍵詞： Ajax Echarts JSON 數據可視化
中圖分類號：TP31 文獻標識碼：A 文章編號：1672-3791（2018）08（b）-0034-03
人口眾多和快速發展，使得中國成為世界上最主要的大數據國家。在研究、教學和開發領域，數據可視化是一個活躍且關鍵的方面。Ajax與Echarts技術更是被廣泛用于金融、管理等各領域。
1 Echarts特性
Echarts，底層依賴輕量級的Canvas類庫ZRender，使用JavaScript實現的開源可視化庫。圖表樣式多，提供多種交互式組件。根據需要選擇對應圖表，或傳入renderltem函數自定義系列。
2 靜態數據頁面
2.1 設計
目的：人口變化，對制定國民經濟規劃，促進社會主義和諧社會的發展具有重要的意義，現以圖表呈現人口變化情況。
數據來源：數據來自國家數據網站（http：//data.stats.gov.cn）中2012—2015年總人口，指標含有：年末總人口（萬人）、男性人口（萬人）、女性人口（萬人）、城鎮人口（萬人）、鄉村人口（萬人）。
2.2 實現
（1）引入echarts.min.js。
（2）初始化echarts實例，獲取div標簽。
var myChart=echarts.init（document.getElementById（‘main））；
（3）指定圖表的配置項和數據，僅展示series部分。
series： [
{
name： '年末總人口（萬人）'，
type： 'bar'，
label： labelOption，
data： [135404， 136072， 136782， 137462， 138271]
}，
{
name： '男性人口（萬人）'，
type： 'bar'，
label： labelOption，
data： [69395， 69728， 70079， 70414， 70815]
}......
]
（4）使用指定配置項和數據顯示圖表。
myChart.setOption（option）
（5）三種效果任意切換。
三種效果任意切換見表1、圖1、圖2。
3 Ajax動態獲取天氣預報數據
3.1 原理
Ajax即“Asynchronous Javascript And XML”，更新部分頁面實現與服務端數據交換，響應快，傳輸效率高，減少帶寬使用。
JSON數據來自天氣預報接口，實時更新，JQuery和Ajax異步處理JSON數據。
3.2 實現
（1）本機所在地獲取。
$（function（）{
$.ajax（{
url： 'http：//api.map.baidu.com/location/ip？ak=ia6HfFL660Bvh43exmH9LrI6'，
type： 'POST'，
dataType： 'json'，
success：function（data） {
$（'#city'）.html（JSON.stringify（data.content.address_detail.province + "，" + data.content.address_detail.city））
}
}）；
}）；
（2）地圖點擊事件。
myChart.on（'click'， function（params） {
$.ajax（{
url："DataServlet？city="+params.name，
type："GET"，
dataType："json"，
success：function（data）{
$（"#valueTable"）.empty（）；//選擇其他城市清空上次數據
var str="
str+="
str+="
str+="
str+="
str+="
str+="
$（"#valueTable"）.append（str）；
}
}）
}）；
（3）獲取json數據，注冊地圖，加載信息。
function loadMap（address， name） {
$.get（address， function（data） {
echarts.registerMap（name， data）；
var option = {
series ： [ {
name ： 'MAP'，
type ： 'map'，
mapType ： name，
label ： {
normal ： {
show ： true
}，
emphasis ： {
show ： true
}
}，
data ： cityData
} ]
}；
myChart.setOption（option）；
}）；
}
（4）實現本機地址獲取，地圖下鉆以及天氣預報顯示，見圖3。
4 結語
通過echarts靜態和動態數據獲取的案例，展示大數據時代下數據信息可視化過程，Echarts和Ajax結合已成為前端數據顯示趨勢，在各領域被廣泛使用。
參考文獻
[1] 陳為，張蒿，魯愛東.數據可視化的基本原理與方法[M]. 北京：科學出版社，2013.
[2] D Li，H Mei，Y Shen，et al.ECharts： A Declarative Framework for Rapid Construction of Web-based Visualization[J].Visual Informatics，2018，2（2）：136-146.
