我們在實際的項目需求中，需要對某塊區(qū)域進(jìn)行數(shù)據(jù)的可視化，展示不同的數(shù)據(jù)信息分布，便于數(shù)據(jù)展示和分析，為用戶提供決策依據(jù)；這時我們需要用到ECharts地圖，主要用于地理區(qū)域數(shù)據(jù)的可視化，展示不同區(qū)域的數(shù)據(jù)分布信息。ECharts官網(wǎng)提供了中國地圖、世界地圖等地圖數(shù)據(jù)下載，通過js引入或異步加載json文件的形式調(diào)用地圖。
我們以中國地圖為例，展示去年（2015年）我國各省份GDP數(shù)據(jù)。通過異步請求php，讀取mysql中的數(shù)據(jù)，然后展示在地圖上。
HTML
首先在頁面中需要加載地圖的位置放上div#myChart。
然后是加載Echarts和中國地圖js文件。由于本文實例中應(yīng)用了異步ajax加載數(shù)據(jù)，所以需要加載jQuery庫文件。
Javascript
接下來js部分，先設(shè)置好Echarts選項內(nèi)容，請看以下代碼及注釋。
然后我們使用jQuery的Ajax()來異步請求數(shù)據(jù)。
很顯然，我們看到通過jQuery的$.ajax()向mapdata.php發(fā)送了一個post請求，要求返回json格式的數(shù)據(jù)，當(dāng)請求成功并得到回應(yīng)時，重新渲染地圖數(shù)據(jù)。
PHP
mapdata.php的任務(wù)是讀取mysql數(shù)據(jù)表中的數(shù)據(jù)，然后返回給前端。首先是要連接數(shù)據(jù)庫，這部分代碼在connect.php中，請下載源碼查看。然后就是sql查詢，讀取表echarts_map中的數(shù)據(jù)，最后以json格式返回。
MySQL
最后提供mysql數(shù)據(jù)表結(jié)構(gòu)信息，數(shù)據(jù)信息可以下載源碼后，將sql導(dǎo)入你的mysql中即可，注意演示時修改connect.php的數(shù)據(jù)庫配置信息。
