前段時間簡單的學習了echarts和百度地圖，並把它們組合起來，做了一個點選地圖把json裡對應省份的資料輸出，然後點選檢視地圖時會把資料的地址標註在百度地圖上，現在和大家分享一下我學習的心得。
一、echarts
ECharts是一個高度個性化定製的資料視覺化圖表的純 Javascript 圖表庫，它相容主流的瀏覽器，對於製作視覺化的資料圖表是一個好的幫手。ECharts的最新版本ECharts3.0版本，對於剛開始接觸它的人來說，感覺不太容易上手,而且地圖的資料感覺有點出入。所以，我就選擇ECharts2.0來練練手，每當我們接觸一個東西，其實讓我們更加容易認識它的就是通過它的文件，文件會詳細說明它的特性和功能，現在奉上

<script src="js/echarts-all.js"></script>

其次要有一個Dom節點來存放echarts

<div id="echart" class="echart"></div>

然後就是簡單的配置：

var myChart = echarts.init(document.getElementById('echart'));
var option = {
                tooltip : {
                    trigger: 'item'
 
,
                    formatter: '{b}'
                },
                series : [
                    {
                        name: '中國',
                        type: 'map',
                        mapType: 'china',
                        selectedMode : 'single',
                        itemStyle:{
                            normal:{label:{show:true
 
}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name:'廣東',selected:true} 
                        ]
                    }
                ]
            };
         myChart.setOption(option);

以上就可以生成一箇中國的地圖了。

二、資料
模擬後臺的資料，寫在data.js裡面，通過require過來，資料的格式：

{
    "id":"1",
    "pro":"廣西",
    "info":{
        "city":"南寧",
        "data":{
            "name":"南寧東葛路錦華華為授權體驗店",
            "phone":"0771-2636869",
            "addr":"南寧東葛路錦華華為授權體驗店"
        }
    }
}
.
.
.

三、百度地圖
百度地圖的介面文件有詳細的說明，在這裡我只簡單略過一下，不明白的可以直接去看文件百度地圖API
用到百度地圖，首先你要先申請一個地圖的key，具體不做說明，然後引入：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourkey"></script>

建立地圖，並標註一個點：

var map = new BMap.Map("baiduMap");     /* 建立map例項 */
var point = new BMap.Point(113.381958,23.10755);
map.centerAndZoom(point,17);
map.addOverlay(point );
map.clearOverlays();
var bMapNavigation = new BMap.NavigationControl();  /*建立地圖平移縮放控制元件*/
map.addControl( bMapNavigation );               /* 新增一條魚骨*/
var bMapScale = new BMap.ScaleControl();  /*建立地圖比例尺控制元件*/
map.addControl( bMapScale );          /* 新增比例尺*/
map.enableScrollWheelZoom();   // 啟動滑鼠滾輪操作
map.enableContinuousZoom();    // 開啟連續縮放效果
map.enableInertialDragging();　// 開啟慣性拖拽效果
map.enableKeyboard();          // 開啟鍵盤操作

在專案裡我建立一個地址解析器，把地址解析並標註到地圖上

通過選擇的省份搜尋資料

具體效果如圖：

點選檢視地圖的效果圖：

以上就是這個小專案的全部功能，主要是對全國各個省份網點的查詢並在地圖上標註出來，對不同的點在地圖上重新渲染一遍，具體的程式碼已上傳到我的githus上。