如何使用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扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
localStorage实现便签小程序
Nov 28 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
学习和使用python的13个理由
2019/07/30 Python
python字符串反转的四种方法详解
2019/12/02 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
英语专业推荐信
2013/11/16 职场文书
销售文员的岗位职责
2013/11/20 职场文书
单位消防安全制度
2014/01/12 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
五年级学生评语大全
2014/12/26 职场文书
团代会邀请函
2015/02/02 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
小学体育课教学反思
2016/02/16 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
Python 循环读取数据内存不足的解决方案
2021/05/25 Python