PHP+mysql+Jquery异步读取数据

时间:2017-07-31 16:12:55 类型:PHP
字号:    

我们在实际的项目需求中,需要对某块区域进行数据的可视化,展示不同的数据信息分布,便于数据展示和分析,为用户提供决策依据;这时我们需要用到ECharts地图,主要用于地理区域数据的可视化,展示不同区域的数据分布信息。ECharts官网提供了中国地图、世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图。


我们以中国地图为例,展示去年(2015年)我国各省份GDP数据。通过异步请求php,读取mysql中的数据,然后展示在地图上。

HTML
首先在页面中需要加载地图的位置放上div#myChart。


然后是加载Echarts和中国地图js文件。由于本文实例中应用了异步ajax加载数据,所以需要加载jQuery库文件。

Javascript
接下来js部分,先设置好Echarts选项内容,请看以下代码及注释。



然后我们使用jQuery的Ajax()来异步请求数据。

很显然,我们看到通过jQuery的$.ajax()向mapdata.php发送了一个post请求,要求返回json格式的数据,当请求成功并得到回应时,重新渲染地图数据。

PHP
mapdata.php的任务是读取mysql数据表中的数据,然后返回给前端。首先是要连接数据库,这部分代码在connect.php中,请下载源码查看。然后就是sql查询,读取表echarts_map中的数据,最后以json格式返回。


MySQL
最后提供mysql数据表结构信息,数据信息可以下载源码后,将sql导入你的mysql中即可,注意演示时修改connect.php的数据库配置信息。