基于Ajax與Echarts的網(wǎng)頁(yè)動(dòng)態(tài)數(shù)據(jù)加載
2018-03-06 12:59:26黃雅莉鐘琪
科技資訊 2018年23期
黃雅莉 鐘琪
摘 要：信息化時(shí)代，數(shù)據(jù)無(wú)處不在，面對(duì)龐大的數(shù)據(jù)，圖表可直觀地將其以一種合適的方式展現(xiàn)給我們。Echarts使開發(fā)人員以較少的代碼設(shè)計(jì)出更為詳細(xì)、實(shí)用且酷炫的圖表，Ajax異步刷新結(jié)合Echarts的圖表功能，使得數(shù)據(jù)動(dòng)態(tài)加載。
關(guān)鍵詞： Ajax Echarts JSON 數(shù)據(jù)可視化
中圖分類號(hào)：TP31 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-3791（2018）08（b）-0034-03
人口眾多和快速發(fā)展，使得中國(guó)成為世界上最主要的大數(shù)據(jù)國(guó)家。在研究、教學(xué)和開發(fā)領(lǐng)域，數(shù)據(jù)可視化是一個(gè)活躍且關(guān)鍵的方面。Ajax與Echarts技術(shù)更是被廣泛用于金融、管理等各領(lǐng)域。
1 Echarts特性
Echarts，底層依賴輕量級(jí)的Canvas類庫(kù)ZRender，使用JavaScript實(shí)現(xiàn)的開源可視化庫(kù)。圖表樣式多，提供多種交互式組件。根據(jù)需要選擇對(duì)應(yīng)圖表，或傳入renderltem函數(shù)自定義系列。
2 靜態(tài)數(shù)據(jù)頁(yè)面
2.1 設(shè)計(jì)
目的：人口變化，對(duì)制定國(guó)民經(jīng)濟(jì)規(guī)劃，促進(jìn)社會(huì)主義和諧社會(huì)的發(fā)展具有重要的意義，現(xiàn)以圖表呈現(xiàn)人口變化情況。
數(shù)據(jù)來(lái)源：數(shù)據(jù)來(lái)自國(guó)家數(shù)據(jù)網(wǎng)站（http：//data.stats.gov.cn）中2012—2015年總?cè)丝冢笜?biāo)含有：年末總?cè)丝冢ㄈf(wàn)人）、男性人口（萬(wàn)人）、女性人口（萬(wàn)人）、城鎮(zhèn)人口（萬(wàn)人）、鄉(xiāng)村人口（萬(wàn)人）。
2.2 實(shí)現(xiàn)
（1）引入echarts.min.js。
（2）初始化echarts實(shí)例，獲取div標(biāo)簽。
var myChart=echarts.init（document.getElementById（‘main））；
（3）指定圖表的配置項(xiàng)和數(shù)據(jù)，僅展示series部分。
series： [
{
name： '年末總?cè)丝冢ㄈf(wàn)人）'，
type： 'bar'，
label： labelOption，
data： [135404， 136072， 136782， 137462， 138271]
}，
{
name： '男性人口（萬(wàn)人）'，
type： 'bar'，
label： labelOption，
data： [69395， 69728， 70079， 70414， 70815]
}......
]
（4）使用指定配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption（option）
（5）三種效果任意切換。
三種效果任意切換見表1、圖1、圖2。
3 Ajax動(dòng)態(tài)獲取天氣預(yù)報(bào)數(shù)據(jù)
3.1 原理
Ajax即“Asynchronous Javascript And XML”，更新部分頁(yè)面實(shí)現(xiàn)與服務(wù)端數(shù)據(jù)交換，響應(yīng)快，傳輸效率高，減少帶寬使用。
JSON數(shù)據(jù)來(lái)自天氣預(yù)報(bào)接口，實(shí)時(shí)更新，JQuery和Ajax異步處理JSON數(shù)據(jù)。
3.2 實(shí)現(xiàn)
（1）本機(jī)所在地獲取。
$（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）地圖點(diǎn)擊事件。
myChart.on（'click'， function（params） {
$.ajax（{
url："DataServlet？city="+params.name，
type："GET"，
dataType："json"，
success：function（data）{
$（"#valueTable"）.empty（）；//選擇其他城市清空上次數(shù)據(jù)
var str="
str+="
str+="
str+="
str+="
str+="
str+="
$（"#valueTable"）.append（str）；
}
}）
}）；
（3）獲取json數(shù)據(jù)，注冊(cè)地圖，加載信息。
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）實(shí)現(xiàn)本機(jī)地址獲取，地圖下鉆以及天氣預(yù)報(bào)顯示，見圖3。
4 結(jié)語(yǔ)
通過echarts靜態(tài)和動(dòng)態(tài)數(shù)據(jù)獲取的案例，展示大數(shù)據(jù)時(shí)代下數(shù)據(jù)信息可視化過程，Echarts和Ajax結(jié)合已成為前端數(shù)據(jù)顯示趨勢(shì)，在各領(lǐng)域被廣泛使用。
參考文獻(xiàn)
[1] 陳為，張蒿，魯愛東.數(shù)據(jù)可視化的基本原理與方法[M]. 北京：科學(xué)出版社，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.
