如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息。ECharts官网提供了中国地图、世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图。

效果演示      源码下载

本文将结合实例讲解如何使用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; 
时间: 2016-02-20

echarts图表导出excel示例

根据传入的参数生成相应的图形 复制代码 代码如下: loadChart : function(data,item){  var that = this;  require(['echarts', 'echarts/chart/bar', 'echarts/chart/line',    'echarts/chart/pie'], function(ec) {   that.body.setHeight(800);   var myChart = ec.init(that.body.dom);  

jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件echarts实现的多柱子柱状图效果.分享给大家供大家参考,具体如下: 1.问题背景: 利用ECharts制作一个多柱子柱状图,其中数据源模拟动态获取 2.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-多柱子柱状图</title> <script type="text/

echarts3 使用总结(绘制各种图表,地图)

由于项目需要自学了echarts,下面将学到的东西总结如下,如果有哪里写的不好,请批评指正 一.前期准备 1.使用echarts之前先要引入echarts.js,js可以到官网下载 2.写一个div容器用来装echarts内容,这个容器必须有高度,不然看不到内容. 3.在script中获取div容器的id,根据需要写option中的参数(也许你现在还不知道option是干嘛用的,不要着急往下看),使用setoption生成图表. (代码如下)注:后面将不再对引入js,获取id,调用option生

基于Echarts 3.19 制作常用的图形(非静态)

饼图: 环境:Echarts 3.19 vs2013 实现方式:ajax+ashx+json 注意事项: 官网所需格式为 [{value:23,name:'xxxx' }] 请将key 的名字不要写错 具体代码,各位看官 请下移目光. <!--请先引用文件--> <script src="../Scripts/jquery-1.8.2.min.js"></script> <script src="../Scripts/echarts/

jQuery插件Echarts实现的渐变色柱状图

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts柱状图</title> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="container" style="width:

详解ECharts使用心得总结

前言 上周项目组要临时给客户做一个演示的原型,首页设计的是一个中国地图,本来打算用谷歌的地图,但是,做出来之后,整体的效果看起来太差了,最后就在网上搜相关的地图呈现的控件,然后就找到了这个ECharts报表呈现组件,挺不错的一个组件,而且地图数据都是离线的,真心很赞.但是,使用起来却颇费了一番工夫.所以就把使用中的一些心得体会跟大家分享一下. 1.    插件的下载 以下是ECharts的下载链接,需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender,当然对于大部分图表而言不需要

Echarts基本用法_动力节点Java学院整理

echarts太完美了: 1,开源软件,无私的为我们提供漂亮的图形界面: 2,使用简单,默默的为我们封装了重要的js,只要会引用就会使用echarts: 3,种类多,echarts为我们提供了各种图标,其中最具象征的就是地图了: 4,兼容性好,基于html5动画渲染超棒. echarts官网 提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件. 官网上的demo中夹杂着很多我们用不到的东西,想使用饼状图就得从demo中把不用的去掉,劈植斩叶留下最原始的功能实现.这样毕竟比较

JSP中EL表达式用法_动力节点Java学院整理

JSP页面中支持使用EL表达式,EL全名为Expression Language.EL表达式的主要作用有: ① 获取数据: ② 执行运算: ③ 使用EL表达式的11大隐式对象: ④ 调用Java方法. 当然,EL表达式还能配合JSTL标签,进行其他一些功能的显示,例如迭代等等. 我们先来看使用EL表达式来获取数据 在JSP页面中使用${标识符}的形式,就是通知JSP引擎在Servlet中调用pageContext.findAttribute("标识符")来获取数据,具体是以标识符作为关

Java BigDecimal详解_动力节点Java学院整理

1.引言 借用<Effactive Java>这本书中的话,float和double类型的主要设计目标是为了科学计算和工程计算.他们执行二进制浮点运算,这是为了在广域数值范围上提供较为精确的快速近似计算而精心设计的.然而,它们没有提供完全精确的结果,所以不应该被用于要求精确结果的场合.但是,商业计算往往要求结果精确,例如银行存款数额,这时候BigDecimal就派上大用场啦. 2.BigDecimal简介 BigDecimal 由任意精度的整数非标度值 和32 位的整数标度 (scale) 组

Java线程让步_动力节点Java学院整理

yield()介绍 yield()的作用是让步.它能让当前线程由"运行状态"进入到"就绪状态",从而让其它具有相同优先级的等待线程获取执行权:但是,并不能保证在当前线程调用yield()之后,其它具有相同优先级的线程就一定能获得执行权:也有可能是当前线程又进入到"运行状态"继续运行! yield()示例 下面,通过示例查看它的用法. // YieldTest.java的源码 class ThreadA extends Thread{ public

Java中List Set和Map之间的区别_动力节点Java学院整理

Java集合的主要分为三种类型: • Set(集) • List(列表) • Map(映射) 要深入理解集合首先要了解下我们熟悉的数组: 数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型),而JAVA集合可以存储和操作数目不固定的一组数据. 所有的JAVA集合都位于 java.util包中! JAVA集合只能存放引用类型的的数据,不能存放基本数据类型. 世间上本来没有集合,(只有数组参考C语言)但有人想要,所以有了集合 有人想有可以自动扩展的数组,所以有了List 有的

Java数组的特性_动力节点Java学院整理

Java中的数组是对象吗? Java和C++都是面向对象的语言.在使用这些语言的时候,我们可以直接使用标准的类库,也可以使用组合和继承等面向对象的特性构建自己的类,并且根据自己构建的类创建对象.那么,我们是不是应该考虑这样一个问题:在面向对象的语言中,数组是对象吗? 要判断数组是不是对象,那么首先明确什么是对象,也就是对象的定义.在较高的层面上,对象是根据某个类创建出来的一个实例,表示某类事物中一个具体的个体.对象具有各种属性,并且具有一些特定的行为.而在较低的层面上,站在计算机的角度,对象就是

ArrayList详解和使用示例_动力节点Java学院整理

第1部分 ArrayList介绍 ArrayList简介 ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAccess, Cloneable, java.io.Serializable这些接口. ArrayList 继承了AbstractList,实现了List.它是一个数组队列,提供了相关的添加.删除.修改.遍历等功能. ArrayList 实现了RandmoAccess接口,即提

Java线程休眠_动力节点Java学院整理

sleep()介绍 sleep() 定义在Thread.java中. sleep() 的作用是让当前线程休眠,即当前线程会从"运行状态"进入到"休眠(阻塞)状态".sleep()会指定休眠时间,线程休眠的时间会大于/等于该休眠时间:在线程重新被唤醒时,它会由"阻塞状态"变成"就绪状态",从而等待cpu的调度执行. sleep()示例 下面通过一个简单示例演示sleep()的用法. // SleepTest.java的源码 cl

Java List简介_动力节点Java学院整理

Java中可变数组的原理就是不断的创建新的数组,将原数组加到新的数组中,下文对Java List用法做了详解.  List:元素是有序的(怎么存的就怎么取出来,顺序不会乱),元素可以重复(角标1上有个3,角标2上也可以有个3)因为该集合体系有索引  ArrayList:底层的数据结构使用的是数组结构(数组长度是可变的百分之五十延长)(特点是查询很快,但增删较慢)线程不同步  LinkedList:底层的数据结构是链表结构(特点是查询较慢,增删较快)  Vector:底层是数组数据结构 线

Java 中的 BufferedReader 介绍_动力节点Java学院整理

BufferedReader 介绍 BufferedReader 是缓冲字符输入流.它继承于Reader. BufferedReader 的作用是为其他字符输入流添加一些缓冲功能. BufferedReader 函数列表 BufferedReader(Reader in) BufferedReader(Reader in, int size) void close() void mark(int markLimit) boolean markSupported() int read() int