如何使用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 CSS样式控制 学习笔记
Jul 23 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 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中数据的批量导入(csv文件)
2006/10/09 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
selenium如何定位span元素的实现
2021/01/13 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
高三体育教学反思
2014/01/29 职场文书
安全生产宣传标语
2014/06/06 职场文书
会计毕业生自荐书
2014/06/12 职场文书
卖车协议书范例
2014/09/16 职场文书
高三英语教学反思
2016/03/03 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS