如何使用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 相关文章推荐
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
教你如何终止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调用三种数据库的方法(3)
2006/10/09 PHP
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP异常处理浅析
2015/05/12 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
使用python生成目录树
2018/03/29 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
教师求职推荐信范文
2013/11/20 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
大学生实习推荐信
2015/03/27 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python