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

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

本文将结合实例讲解如何使用 PHP+jQuery+MysqL实现异步加载ECharts地图数据，我们以中国地图为例，展示去年（2015年）我国各省份GDP数据。通过异步请求PHP，读取MysqL中的数据，然后展示在地图上，因此本文除了你掌握前端知识外，还需要你了解PHP以及MysqL方面的相关知识。

HTML

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

rush:js;">

Javascript

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

rush:js;"> option = { title : { text: '2015年GDP统计数据',subtext: '数据来源网络（单位：万亿元）',left: 'center' //标题居中 },tooltip : { //提示工具， trigger: 'item',formatter: "{a}
{b} : {c}万亿元" },visualMap: { //视觉映射组件，可以根据范围调节数据变化 min: 0,//最小值 max: 10,//最大值 left: 'left',//位置 top: 'bottom',orient: 'horizontal',//水平 text:['高','低'],// 文本，默认为数值文本 calculable : true //是否启用值域漫游，即是否有拖拽用的手柄，以及用手柄调整选中范围。 },toolBox: { //工具栏 show: true,orient : 'vertical',//垂直 left: 'right',top: 'center',feature : { mark : {show: true},saveAsImage : {show: true} //保存为图片 } },series : [ { name: '2015年GDP',type: 'map',mapType: 'china',//使用中国地图 roam: false,//是否开启鼠标缩放和平移 itemStyle:{ normal:{label:{show:true}},emphasis:{label:{show:true}} },data:[] } ] }; var myChart = echarts.init(document.getElementById('myChart')); myChart.showLoading(); //预加载动画 myChart.setoption(option); //渲染地图

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

rush:js;"> $.ajax({ type: "post",async: false,//同步执行 url: "mapdata.PHP",dataType: "json",//返回数据形式为json success: function(result) { myChart.hideLoading(); //隐藏加载动画 myChart.setoption({ //渲染数据 series: [{ // 根据名字对应到相应的系列 name: '2015年GDP',data: result }] }); },error: function() { alert("请求数据失败!"); } });

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

PHP

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

$row['province'],'value' => $row['gdp'] ); } MysqL_close($link); echo json_encode($arr); //输出json格式数据

MysqL

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

rush:sql;"> CREATE TABLE IF NOT EXISTS `echarts_map` ( `id` int(10) NOT NULL AUTO_INCREMENT,`province` varchar(30) NOT NULL,`gdp` decimal(10,2) NOT NULL,PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;

原文地址：https://www.jb51.cc/jquery/50011.html

echarts异步加载数据 jquery异步加载

上一篇：jQuery常用知识点总结以及平时封装下一篇：jQuery实现返回顶部功能

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

HTML

Javascript

PHP

MysqL

相关推荐