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

用ECharts地图应用+jQuery+PHP+MySQL的组合来展示去年(2015年)我国各省份GDP数据,并且把ajax返回来的json数据展示在地图上。

实例异步读取地图数据ECharts地图应用jQuery+PHP+MySQL,20210909133649.jpg,第1张

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');


需开通白银VIP及以上VIP等级才能访问此内容

登录账户注册账 户

转载请说明出处
UE资源网 » 实例异步读取地图数据ECharts地图应用jQuery+PHP+MySQL

发表评论

欢迎 访客 发表评论

成为会员可下载全站资源!

查看演示 官网购买