如何使用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 相关文章推荐
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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
聊天室php&amp;mysql(三)
2006/10/09 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
php输出形式实例整理
2020/05/05 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
img标签中onerror用法
2009/08/13 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python安装教程
2018/02/28 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python算法中的时间复杂度问题
2019/11/19 Python
基于Python实现扑克牌面试题
2019/12/11 Python
python操作yaml说明
2020/04/08 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
物流专业大学的自我评价
2014/01/11 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
房产公证委托书范本
2014/09/20 职场文书
安装工程师岗位职责
2015/02/13 职场文书
学习心理学心得体会
2016/01/22 职场文书