基于Ajax與Echarts的網(wǎng)頁(yè)動(dòng)態(tài)數(shù)據(jù)加載

黃雅莉 鐘琪

摘 要：信息化時(shí)代，數(shù)據(jù)無(wú)處不在，面對(duì)龐大的數(shù)據(jù)，圖表可直觀地將其以一種合適的方式展現(xiàn)給我們。Echarts使開(kāi)發(fā)人員以較少的代碼設(shè)計(jì)出更為詳細(xì)、實(shí)用且酷炫的圖表，Ajax異步刷新結(jié)合Echarts的圖表功能，使得數(shù)據(jù)動(dòng)態(tài)加載。

關(guān)鍵詞： Ajax Echarts JSON 數(shù)據(jù)可視化

中圖分類(lèi)號(hào)：TP31 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-3791（2018）08（b）-0034-03

人口眾多和快速發(fā)展，使得中國(guó)成為世界上最主要的大數(shù)據(jù)國(guó)家。在研究、教學(xué)和開(kāi)發(fā)領(lǐng)域，數(shù)據(jù)可視化是一個(gè)活躍且關(guān)鍵的方面。Ajax與Echarts技術(shù)更是被廣泛用于金融、管理等各領(lǐng)域。

1 Echarts特性

Echarts，底層依賴(lài)輕量級(jí)的Canvas類(lèi)庫(kù)ZRender，使用JavaScript實(shí)現(xiàn)的開(kāi)源可視化庫(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）三種效果任意切換。

三種效果任意切換見(jiàn)表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="城市"+data.result.city+""；

str+="日期"+data.result.date+""；

str+="當(dāng)前溫度"+data.result.temp+"℃"+""；

str+="最高溫度"+data.result.temphigh+"℃"+""；

str+="最低溫度"+data.result.templow+"℃"+""；

str+="更新時(shí)間"+data.result.updatetime+""；

str+="穿衣指數(shù)"+data.result.index[6].detail+""；

$（"#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)顯示，見(jiàn)圖3。

4 結(jié)語(yǔ)

通過(guò)echarts靜態(tài)和動(dòng)態(tài)數(shù)據(jù)獲取的案例，展示大數(shù)據(jù)時(shí)代下數(shù)據(jù)信息可視化過(guò)程，Echarts和Ajax結(jié)合已成為前端數(shù)據(jù)顯示趨勢(shì)，在各領(lǐng)域被廣泛使用。

參考文獻(xiàn)

[1] 陳為，張蒿，魯愛(ài)東.數(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.