基于Ajax與Echarts的網頁動態數據加載

黃雅莉 鐘琪

摘 要：信息化時代，數據無處不在，面對龐大的數據，圖表可直觀地將其以一種合適的方式展現給我們。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="城市"+data.result.city+""；

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

str+="當前溫度"+data.result.temp+"℃"+""；

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

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

str+="更新時間"+data.result.updatetime+""；

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

$（"#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.