如何使用PHP+jQuery+MySQL實作非同步載入ECharts地圖資料(附原始碼下載)_jquery

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;