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/> : {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;
新聞熱點
疑難解答
