ECharts地圖主要用於地理區域資料的視覺化，顯示不同區域的資料分佈資訊。 ECharts官網提供了中國地圖、世界地圖等地圖資料下載，透過js引入或非同步載入json檔案的形式呼叫地圖。
本文將結合實例講解如何使用PHP+jQuery+MySQL實現異步加載ECharts地圖數據，我們以中國地圖為例，展示去年（2015年）我國各省GDP數據。透過非同步請求php，讀取mysql中的數據，然後展示在地圖上，因此本文除了你掌握前端知識外，還需要你了解PHP以及MySQL方面的相關知識。
HTML
首先在頁面中需要載入地圖的位置放上div#myChart。
<div id="myChart" style="width: 600px;height:400px;"></div> <script src="echarts.min.js"></script>
然後是載入Echarts和中國地圖js檔案。由於本文實例中應用了異步ajax載入數據，所以需要載入jQuery庫檔。
<script src="js/echarts.min.js"></script> <script src="js/china.js"></script> <script src="js/jquery.min.js"></script>
Javascript
接下來js部分，先設定好Echarts選項內容，請看以下程式碼及註解。
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); //渲染地图 然後我們使用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中，請下載原始碼檢視。然後就是sql查詢，讀取表echarts_map中的數據，最後以json格式回傳。
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
最後提供mysql資料表結構信息，資料資訊可以下載源碼後，將sql導入你的mysql中即可，注意示範時修改connect.php的資料庫配置資訊。
CREATE TABLE IF NOT EXISTS `echarts_map` ( `id` int(10) NOT NULL AUTO_INCREMENT, `province` varchar(30) NOT NULL, `gdp` decimal(10,2) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
