ECharts使用jQuery和PHP、MySQL非同步讀取資料例子

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