ECharts地圖應用：使用jQuery和PHP、MySQL非同步讀取資料

ECharts地圖主要用於地理地區資料的可視化，展示不同地區的資料分布資訊。ECharts官網提供了中國地圖、世界地圖等地圖資料下載，通過js引入或非同步載入json檔案的形式調用地圖。

查看示範 下載源碼

本文將結合執行個體講解如何使用PHP+jQuery+MySQL實現非同步載入ECharts地圖資料，我們以中國地圖為例，展示去年（2015年）我國各省份GDP資料。通過非同步請求php，讀取mysql中的資料，然後展示在地圖上，因此本文除了你掌握前端知識外，還需要你瞭解PHP以及MySQL方面的相關知識。

HTML

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

然後是載入Echarts和中國地圖js檔案。由於本文執行個體中應用了非同步ajax載入資料，所以需要載入jQuery庫檔案。

Javascript

接下來js部分，先設定好Echarts選項內容，請看以下代碼及注釋。

option = {    title : {        text: '2015年GDP統計資料',        subtext: '資料來源網路（單位：萬億元）',        left: 'center' //標題置中    },    tooltip : { //提示工具，        trigger: 'item',formatter: "{a} 
{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;

