所属分类:PHP实例-Ajax
本素材将结合实例讲解如何使用ECharts+PHP+jQuery+MySQL实现异步加载ECharts地图数据,展示中国去年(2015年)我国各省份GDP数据。通过异步请求php,读取mysql中的数据,然后展示在地图上。
HTML部分:
<div id="myChart" style="width: 600px;height:400px;">div>
<script src="echarts.min.js">script>
#myChart为要加载地图的容器
Javascript部分:
option = {
title : {
text: '2015年GDP统计数据',
subtext: '数据来源网络(单位:万亿元)',
left: 'center' //标题居中
},
tooltip : { //提示工具,
trigger: 'item',
formatter: "{a}
{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:数据库的连接配置
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数据库部分:
demo_03.sql:数据库备份文件,可直接导入
另外提供数据库结构SQL语句(带数据):
DROP TABLE IF EXISTS `demo_03`;
CREATE TABLE `demo_03` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`province` varchar(30) NOT NULL,
`gdp` decimal(10,2) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=35 DEFAULT CHARSET=utf8;
insert into `demo_03`(`id`,`province`,`gdp`) values (1,'北京','2.29'),(2,'天津','1.65'),(3,'上海','2.50'),(4,'重庆','1.57'),(5,'河北','2.98'),(6,'河南','3.70'),(7,'云南','1.37'),(8,'辽宁','2.91'),(9,'黑龙江','1.50'),(10,'安徽','2.20'),(11,'山东','6.30'),(12,'新疆','0.94'),(13,'江苏','7.06'),(14,'浙江','4.28'),(15,'江西','1.67'),(16,'湖北','2.95'),(17,'广西','1.68'),(18,'甘肃','0.69'),(19,'山西','1.28'),(20,'内蒙古','1.80'),(21,'陕西','1.81'),(22,'吉林','1.40'),(23,'福建','2.59'),(24,'贵州','1.05'),(25,'广东','7.28'),(26,'青海','0.24'),(27,'西藏','0.10'),(28,'四川','3.01'),(29,'宁夏','0.29'),(30,'海南','0.37'),(31,'台湾','0.00'),(32,'香港','0.00'),(33,'澳门','0.00'),(34,'湖南','2.90');