PHP与echarts读取地图数据并显示例子

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

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

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

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

$.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;