如何使用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;