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


Posted in Javascript onFebruary 23, 2016

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

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

效果演示       源码下载

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

HTML

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

<div id="myChart" style="width: 600px;height:400px;"></div> 
<script src="echarts.min.js"></script>

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

<script src="js/echarts.min.js"></script> 
<script src="js/china.js"></script> 
<script src="js/jquery.min.js"></script>

Javascript

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

option = { 
title : { 
text: '2015年GDP统计数据', 
subtext: '数据来源网络(单位:万亿元)', 
left: 'center' //标题居中 
}, 
tooltip : { //提示工具, 
trigger: 'item', 
formatter: "{a} <br/>{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()来异步请求数据。

$.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格式返回。

include_once('connect.php'); //连接数据库 
//查询数据 
$sql = "select * from echarts_map"; 
$query = mysql_query($sql); 
while($row=mysql_fetch_array($query)){ 
$arr[] = array( 
'name' => $row['province'], 
'value' => $row['gdp'] 
); 
} 
mysql_close($link); 
echo json_encode($arr); //输出json格式数据

MySQL

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

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;
Javascript 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
很棒的vue弹窗组件
May 24 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 #Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 #Javascript
javascript每日必学之多态
Feb 23 #Javascript
javascript每日必学之继承
Feb 23 #Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 #Javascript
理解javascript封装
Feb 23 #Javascript
学习Javascript面向对象编程之封装
Feb 23 #Javascript
You might like
自己做矿石收音机
2021/03/02 无线电
PHP新手上路(十一)
2006/10/09 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python smallseg分词用法实例分析
2015/05/28 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
Python3进制之间的转换代码实例
2019/08/24 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
制作部班长职位说明书
2014/02/26 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
2014年协会工作总结
2014/11/22 职场文书
介绍信范文
2015/01/31 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
甲午风云观后感
2015/06/02 职场文书
文明上网主题班会
2015/08/14 职场文书
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers