头像

PHP+echarts读取地图数据

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

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

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

查看演示 下载资源: 199 下载资源 下载积分: 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;
最新交易
评论49
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3401083589

  • 头像 48楼
    06-17 10:27
    你***ゝ
    挺好的,标点清楚,没有一点瑕疵
  • 头像 47楼
    06-11 15:22
    你***ゝ
    特别棒,作为初级程序员不想多说什么
  • 头像 46楼
    05-15 15:32
    46***om
    很好喜欢,希望以后有更好的地图
  • 头像 45楼
    05-07 14:25
    xu***ui
    非常完美的地图展示
  • 头像 44楼
    05-01 20:37
    金***會
    厉害了,解决了我的问题
  • 头像 43楼
    04-21 14:06
    dd***12
    不错,正需要这种高科技呢
  • 头像 42楼
    03-24 19:49
    u_***06
    可以的不错不错。。
  • 头像 41楼
    03-16 13:34
    上***峰
    嗯,就是这个,能够快速解决我的问题
  • 头像 40楼
    03-09 09:01
    若***见
    百度的产品吧。很不错的
  • 头像 39楼
    02-25 23:45
    心***扬
    正好留着用,感谢分享……
1 2