ECharts地圖應用：使用jQuery和PHP、MySQL異步讀取數據

本文將結合實例講解如何使用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;