基于Ajax与Echarts的网页动态数据加载
2018-03-06黄雅莉钟琪
黄雅莉 钟琪
摘 要：信息化时代，数据无处不在，面对庞大的数据，图表可直观地将其以一种合适的方式展现给我们。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.
