如何使用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 相关文章推荐
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
微信小程序音乐播放器开发
Nov 20 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
合作指挥官:孟斯克
2020/03/16 星际争霸
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
python 简易计算器程序,代码就几行
2009/08/29 Python
Python实现的归并排序算法示例
2017/11/21 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
方法名是否可以与构造器的名字相同
2012/06/04 面试题
怎样自定义一个异常类
2016/09/27 面试题
出租房屋协议书
2014/09/14 职场文书
2014年营业员工作总结
2014/11/18 职场文书
法学专业求职信范文
2015/03/19 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
母亲节感言
2015/08/03 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
redis 解决库存并发问题实现数量控制
2022/04/08 Redis