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

引入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;