如何使用PHP jQuery MySQL实现ECharts地图数据的异步加载(带源代码下载)

ECharts地图主要用于地理区域的数据可视化，展示不同区域的数据分布信息。ECharts官网提供中国地图、世界地图等地图数据的下载，通过js引入或异步加载json文件的方式调用地图。

下载效果演示源代码。

在本文中，我们将解释如何使用PHP jQuery MySQL异步加载e-echart地图数据。我们将以中国地图为例展示中国各省去年(2015年)的GDP数据。通过异步请求php，读取mysql中的数据，然后在地图上显示出来。所以，除了掌握前端知识，本文还需要你了解PHP和MySQL的相关知识。

超文本标记语言

首先，将div#myChart放在需要加载地图的页面上。

div id=' MyChart ' style=' width : 600 px；' height:400px'/div脚本src=' http : echarts . min . js '/脚本，然后加载echart和中国地图js的文件。由于在本例中使用异步ajax加载数据，因此有必要加载jQuery库文件。

script src=' http : js/echart . min . js '/script script src=' http : js/China . js '/script script src=' http : js/jquery . min . js '/script Javascript

接下来，在js部分，首先设置Echarts选项的内容。请参见以下代码和注释。

option={ title : { text : ' 2015年GDP统计'，subtext: '数据源网络(单位：万亿元)'，left : ' center '//title centered }，tooltip : {//提示工具，Trigger :' item '，格式化程序：' {a} br/{b} : {c}万亿元' }，visualMap: {//可视化映射组件，可以调整数据}，toolbox: {//工具栏显示： true，方向： '垂直'，//垂直左侧： '右侧'，顶部： '中央'，功能： {标记： {显示： True}，另存为图像： {显示： True }//另存为图片}}，系列：[{名称： ' 2015年GDP '，类型3:var myChart=echart . init(document . getelementbyid(' myChart '))；mychart . showloading()；//预加载动画myChart.setOption(选项)；//渲染地图，然后我们使用jQuery的Ajax()异步请求数据。

$.Ajax ({type:' post '，async: false，//同步执行URL 3360' mapdata.php '，datatype3360' JSON '，//返回的数据表单是JSON success 3360函数(result){ mychart . hiding()；//隐藏并加载动画myChart.setOption({ //渲染数据序列：[{//对应对应序列名称： '2015 GDP '，数据： result }]})；}，error: function() {alert('请求数据失败！');} });显然，我们看到一个帖子请求通过jQuery的$发送到了mapdata.php。ajax()，请求以json格式返回数据，当请求成功并收到响应时，地图数据被重新呈现。

服务器端编程语言（Professional Hypertext Preprocessor的缩写）

Mapdata.php的任务是读取mysql数据表中的数据并返回给前端。第一步是连接到数据库。这部分代码在connect.php。请下载源代码查看。然后是sql查询，它读取表echarts _ map中的数据，最后以json格式返回。

include _ once(' connect . PHP ')；//连接到数据库//查询数据$sql='从echarts _ map中选择* '；$ query=MySQL _ query($ SQL)；while($ row=MySQL _ fetch _ array($ query)){ $ arr[]=array(' name '=$ row['省份']，' value '=$ row[' GDP '])；} MySQL _ close($ link)；echo JSON _ encode($ arr)；//输出json格式的数据MySQL。

最后，提供mysql数据表结构信息。下载源代码后，将sql导入mysql。演示时注意修改connect.php的数据库配置信息。

如果不存在则创建表` echart _ map `(` id ' int(10)不为空AUTO _ INCREMENT `省份varchar(30) NOT NULL，` GDP '十进制(10，2) NOT NULL，PRIMARY KEY(` id `))ENGINE=MyISAM DEFAULT CHARSET=utf8；