成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

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

效果演示 源碼下載

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

HTML

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

<div id="myChart" style="width: 600px;height:400px;"></div> 
<script src="http://www.gimoo.net/t/1903/echarts.min.js"></script> 

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

<script src="http://www.gimoo.net/t/1903/js/echarts.min.js"></script> 
<script src="http://www.gimoo.net/t/1903/js/china.js"></script> 
<script src="http://www.gimoo.net/t/1903/js/jquery.min.js"></script> 

Javascript

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

option = { 
title : { 
text: '2015年GDP統(tǒng)計數(shù)據(jù)', 
subtext: '數(shù)據(jù)來源網(wǎng)絡(luò)（單位：萬億元）', 
left: 'center' //標(biāo)題居中 
}, 
tooltip : { //提示工具， 
trigger: 'item', 
formatter: "{a} <br/>{b} : {c}萬億元" 
}, 
visualMap: { //視覺映射組件，可以根據(jù)范圍調(diào)節(jié)數(shù)據(jù)變化 
min: 0, //最小值 
max: 10, //最大值 
left: 'left', //位置 
top: 'bottom', 
orient: 'horizontal', //水平 
text:['高','低'], // 文本，默認為數(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', //使用中國地圖 
roam: false, //是否開啟鼠標(biāo)縮放和平移 
itemStyle:{ 
normal:{label:{show:true}}, 
emphasis:{label:{show:true}} 
}, 
data:[] 
} 
] 
}; 
var myChart = echarts.init(document.getElementById('myChart')); 
myChart.showLoading(); //預(yù)加載動畫 
myChart.setOption(option); //渲染地圖 

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

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

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

PHP

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

include_once('connect.php'); //連接數(shù)據(jù)庫 
//查詢數(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中即可，注意演示時修改connect.php的數(shù)據(jù)庫配置信息。

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;