如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)(附源碼下載)

更新時(shí)間：2016年02月23日 11:43:40 投稿：mrr

ECharts地圖主要用于地理區(qū)域數(shù)據(jù)的可視化，展示不同區(qū)域的數(shù)據(jù)分布信息，通過本文給大家介紹如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)，需要的朋友參考下吧

ECharts地圖主要用于地理區(qū)域數(shù)據(jù)的可視化，展示不同區(qū)域的數(shù)據(jù)分布信息。ECharts官網(wǎng)提供了中國(guó)地圖、世界地圖等地圖數(shù)據(jù)下載，通過js引入或異步加載json文件的形式調(diào)用地圖。

效果演示源碼下載

本文將結(jié)合實(shí)例講解如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)，我們以中國(guó)地圖為例，展示去年（2015年）我國(guó)各省份GDP數(shù)據(jù)。通過異步請(qǐng)求php，讀取mysql中的數(shù)據(jù)，然后展示在地圖上，因此本文除了你掌握前端知識(shí)外，還需要你了解PHP以及MySQL方面的相關(guān)知識(shí)。

HTML

首先在頁(yè)面中需要加載地圖的位置放上div#myChart。

<div id="myChart" style="width: 600px;height:400px;"></div> 
<script src="echarts.min.js"></script>

然后是加載Echarts和中國(guó)地圖js文件。由于本文實(shí)例中應(yīng)用了異步ajax加載數(shù)據(jù)，所以需要加載jQuery庫(kù)文件。

<script src="js/echarts.min.js"></script> 
<script src="js/china.js"></script> 
<script src="js/jquery.min.js"></script>

Javascript

接下來js部分，先設(shè)置好Echarts選項(xiàng)內(nèi)容，請(qǐng)看以下代碼及注釋。

option = { 
title : { 
text: '2015年GDP統(tǒng)計(jì)數(shù)據(jù)', 
subtext: '數(shù)據(jù)來源網(wǎng)絡(luò)（單位：萬(wàn)億元）', 
left: 'center' //標(biāo)題居中 
}, 
tooltip : { //提示工具， 
trigger: 'item', 
formatter: "{a} <br/> : {c}萬(wàn)億元" 
}, 
visualMap: { //視覺映射組件，可以根據(jù)范圍調(diào)節(jié)數(shù)據(jù)變化 
min: 0, //最小值 
max: 10, //最大值 
left: 'left', //位置 
top: 'bottom', 
orient: 'horizontal', //水平 
text:['高','低'], // 文本，默認(rèn)為數(shù)值文本 
calculable : true //是否啟用值域漫游，即是否有拖拽用的手柄，以及用手柄調(diào)整選中范圍。 
}, 
toolbox: { //工具欄 
show: true, 
orient : 'vertical', //垂直 
left: 'right', 
top: 'center', 
feature : { 
mark : {show: true}, 
saveAsImage : {show: true} //保存為圖片 
} 
}, 
series : [ 
{ 
name: '2015年GDP', 
type: 'map', 
mapType: 'china', //使用中國(guó)地圖 
roam: false, //是否開啟鼠標(biāo)縮放和平移 
itemStyle:{ 
normal:{label:{show:true}}, 
emphasis:{label:{show:true}} 
}, 
data:[] 
} 
] 
}; 
var myChart = echarts.init(document.getElementById('myChart')); 
myChart.showLoading(); //預(yù)加載動(dòng)畫 
myChart.setOption(option); //渲染地圖

然后我們使用jQuery的Ajax()來異步請(qǐng)求數(shù)據(jù)。

$.ajax({ 
type: "post", 
async: false, //同步執(zhí)行 
url: "mapdata.php", 
dataType: "json", //返回?cái)?shù)據(jù)形式為json 
success: function(result) { 
myChart.hideLoading(); //隱藏加載動(dòng)畫 
myChart.setOption({ //渲染數(shù)據(jù) 
series: [{ 
// 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列 
name: '2015年GDP', 
data: result 
}] 
}); 
}, 
error: function() { 
alert("請(qǐng)求數(shù)據(jù)失敗!"); 
} 
});

很顯然，我們看到通過jQuery的$.ajax()向mapdata.php發(fā)送了一個(gè)post請(qǐng)求，要求返回json格式的數(shù)據(jù)，當(dāng)請(qǐng)求成功并得到回應(yīng)時(shí)，重新渲染地圖數(shù)據(jù)。

PHP

mapdata.php的任務(wù)是讀取mysql數(shù)據(jù)表中的數(shù)據(jù)，然后返回給前端。首先是要連接數(shù)據(jù)庫(kù)，這部分代碼在connect.php中，請(qǐng)下載源碼查看。然后就是sql查詢，讀取表echarts_map中的數(shù)據(jù)，最后以json格式返回。

include_once('connect.php'); //連接數(shù)據(jù)庫(kù) 
//查詢數(shù)據(jù) 
$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格式數(shù)據(jù)

MySQL

最后提供mysql數(shù)據(jù)表結(jié)構(gòu)信息，數(shù)據(jù)信息可以下載源碼后，將sql導(dǎo)入你的mysql中即可，注意演示時(shí)修改connect.php的數(shù)據(jù)庫(kù)配置信息。

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;

您可能感興趣的文章: