基于Ajax与Echarts的网页动态数据加载.docx

基于Ajax与Echarts的网页动态数据加载黄雅莉钟琪摘要：信息化时代，数据无处不在，面对庞大的数据，图表可直观地将其以一种合适的方式展现给我们。Echarts使开发人员以较少的代码设计出更为详细、实用且酷炫的图表，Ajax异步刷新结合Echarts的图表功能，使得数据动态加载。关键词：AjaxEchartsJSON数据可视化中图分类号：TP31文献标识码：A文章编号：1672-3791（2018）08（b）-0034-03人口众多和快速发展，使得中国成为世界上最主要的大数据国家。在研究、教学和开发领域，数据可视化是一个活跃且关键的方面。Ajax与Echarts技术更是被广泛用于金融、管理等各领域。1Echarts特性Echarts，底层依赖轻量级的Canvas类库ZRender，使用Javascript实现的开源可视化库。图表样式多，提供多种交互式组件。根据需要选择对应图表，或传入renderltem函数自定义系列。2静态数据页面2.1设计目的：人口变化，对制定国民经济规划，促进社会主义和谐社会的发展具有重要的意义，现以图表呈现人口变化情况。数据来源：数据来自国家数据网站（http：//data.stats.gov.cn）中2012—2015年总人口，指标含有：年末总人口（万人）、男性人口（万人）、女性人口（万人）、城镇人口（万人）、乡村人口（万人）。2.2实现（1）引入echarts.min.js。（2）初始化echarts實例，获取div标签。varmyChart=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。3Ajax动态获取天气预报数据3.1原理Ajax即“AsynchronousJavascriptAndXML”，更新部分页面实现与服务端数据交换，响应快，传输效率高，减少带宽使用。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（）；//选择其他城市清空上次数据varstr="城市"+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数据，注册地图，加载信息。functionloadMap（address，name）{$.get（address，function（data）{echarts.registerMap（name，data）；varoption={series：[{name：'MAP'，t