素材牛VIP会员

ECharts地图应用+jQuery+PHP+MySQL实现异步读取地图数据

 所属分类:PHP实例-Ajax

 浏览:7028次  评论:8次  更新时间:2016-07-29
牛币素材VIP可免积分下载
ECharts地图应用+jQuery+PHP+MySQL实现异步读取地图数据
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:用ECharts地图应用+jQuery+PHP+MySQL的组合来展示去年(2015年)我国各省份GDP数据,并且把ajax返回来的json数据展示在地图上。

详细介绍

本素材将结合实例讲解如何使用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');

讨论这个素材(8)回答他人问题或分享使用心得会奖励牛币

冷***知  
2016年09月25日

支持一下,正好有项目要用到

回复
ct***05  
2017年08月01日

学习echarts中,有用过mui的ajax吗,如果进行webapp开发是否会有问题呢,需要如何处理啊,谢谢

素***员:只要原理理解了,至于用什么工具、插件,运行在什么平台都不是问题
回复
lo***ng  
2017年11月22日

支持一下,正好有项目要用到

回复
缔***者  
2018年01月08日

说实话好机会

回复
周***淇  
2018年03月03日

说实话好机会

回复
qq***87  
2019年09月18日

无法显示 什么情况?

回复
qq***43  
2019年12月29日

神仙呀,着末厉害

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)