如何使用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去掉字符串里的所有空格
Feb 08 Javascript
JS 建立对象的方法
Apr 21 Javascript
javascript fullscreen全屏实现代码
Apr 09 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
JS精确判断数据类型代码实例
Dec 18 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动态创建Web站点的方法
2011/08/14 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
document.write的几点使用心得
2014/05/14 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
python类参数self使用示例
2014/02/17 Python
python使用cPickle模块序列化实例
2014/09/25 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python SVD压缩图像的实现代码
2019/11/05 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
PHP中如何使用Cookie
2015/10/28 面试题
入党自荐书范文
2014/03/09 职场文书
教室布置标语
2014/06/26 职场文书
共青团员自我评价范文
2014/09/14 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
企业团队精神心得体会
2016/01/19 职场文书
AJAX学习笔记
2021/05/18 Javascript
使用JS实现简易计算器
2021/06/14 Javascript
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android