如何使用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/jquery对上传文件格式过滤的方法
Jul 25 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
js网页右下角提示框实例
Oct 14 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
python绘制直方图和密度图的实例
2019/07/08 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
Python的logging模块基本用法
2020/12/24 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
2014年机关作风建设工作总结
2014/10/23 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
行政助理岗位职责
2015/02/10 职场文书
物业工程部岗位职责
2015/02/11 职场文书
基层党建工作简报
2015/07/21 职场文书