头像

PHP+echarts读取地图数据

来源:http://www.sucaihuo.com/js/720.html 素材火管理员 2016-01-29 20:44浏览(4077) 收藏

今天我们HP+Ajax远程加载ECharts中国省份,展示去年(2015年)我国各省份GDP数据,并且把ajax返回来的json数据展示在地图上。
PHP+echarts读取地图数据
分类:统计图 > 地图 难易:高级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 152 下载资源 下载积分: 80 积分

echarts生成图表区域#myChart

<div id="myChart" style="width:700px;height:560px"></div>

引入echarts百度图表插件和全国各地数据china.js

<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>

接下来设置echarts相关属性和api接口

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

最后远程加载中国地图数据

$.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("请求数据失败!");
    }
});

PHP读取中国省份表

$sql = "select * from echarts_map";
$query = mysql_query($sql);
while($row=mysql_fetch_array($query)){
	$arr[] = array(
		'name' => $row['province'],
		'value' => $row['gdp']
	);
}

最后附上中国省份地图表

CREATE TABLE IF NOT EXISTS `echarts_map` ( 
  `id` int(11) NOT NULL AUTO_INCREMENT, 
  `province` varchar(45) NOT NULL, 
  `gdp` decimal(10,2) NOT NULL, 
  PRIMARY KEY (`id`) 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;
评论52
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 51楼
    10-11 13:15
    晓涵
    不错,不过还要赞积分!
  • 头像 50楼
    09-13 15:54
    puitn_wp
    老夫收下了
  • 头像 49楼
    09-11 09:05
    开心
    很实用,收下了
  • 头像 48楼
    09-06 17:30
    jiaxiaoguan
    我国各省份
  • 头像 47楼
    09-05 15:41
    jiaxiaoguan
    加下积分·
  • 头像 46楼
    08-25 00:05
    忘忧谷2016
    还不错的呀
  • 头像 45楼
    08-24 10:25
    993554
    嘛一下攒积分
  • 头像 44楼
    08-21 10:58
    China_IT_cxj
    真不错,可以收藏备用,赞!!!!
  • 头像 43楼
    08-16 10:56
    jianghong
    可以收藏一下,
  • 头像 42楼
    08-07 17:41
    sususu
    很好的。。。。。
1 2