數據視化Echarts+百度地圖API實現市縣區級下鑽

開始

　　這兩天公司有個頁面需要做數據可視化的展示，數據視化采用的是Echarts+百度地圖API做展示，需要用到縣級區級下鑽的一個聯動效果發現網上關於Echarts做到縣區級下鑽的資料很少，有的話也不是很詳細，對於剛接觸Echarts的讓人來說可能有些搞不明白，在這里我把Echarts下鑽開發過程中總結的知識分享給大家，也能使自己加深印象，當然啦，對於一些在軟件行業折騰了幾年的老油條來說，這些都是一些非常基礎的東西。但是還是希望能幫助到那些剛接觸Echarts遇到類似問題需要幫助的人。如果哪里寫的不對，或者有更好的方法，也歡迎大家吐槽留言，互相學習。

進入正題

　　我這里用的是Echarts2.2.7,這是官網http://echarts.baidu.com/echarts2/；
　　首先下載Echarts包引入Echarts.js,然后再准備兩個個DIV，配置路徑，使用MAP,官網有說明http://echarts.baidu.com/echarts2/doc/start.html；
　　這里就不細說了，講下官網沒有的。中國地圖下鑽到省級聯動效果。

　　

第一步

加載中國地圖都准備好了后再函數里定義一個option來設置中國地圖的樣式如下：

 

　　　　　　function (ec) {
                // 基於准備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main'));
                var SubordinateMap = ec.init(document.getElementById('subordinate'));

                option = {
                    tooltip : {
                        trigger: 'item', //提示框的觸發類型。
                        formatter: '{b}' //內容格式器可以支持異步回調函數。返回一個你想要提示的字符串就可以了
                    },
                    dataRange: { //值域選擇
                        min: 0,
                        max: 100,
                        calculable: false,
                        show: false,
                        color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
                        textStyle: {  //文字顏色
                            color: '#fff'
                        }
                    },
                    series: [   //圖表生成的數據內容數組
                        {
                            name: '中國',
                            type: 'map',   //圖表類型為地圖
                            mapType: 'china',   //地圖類型中國地圖，
                            selectedMode: 'single', //選中模式，可以設置多選模式和單選，不能選擇則刪除刪除屬性
                            hoverable: false,   //懸浮是否高亮
                            itemStyle:{
                                normal: {        //地圖樣式 
                                    borderColor: '#71D1FF', //地圖邊界顏色
                                    color: '#070C67'  //地圖顏色
                                },
                                emphasis: {   //地圖選中時樣式 
                                    label: {
                                        show: true,
                                        textStyle: {
                                            color: '#fff' //選中時區域名字顏色
                                        },
                                    },
                                    color: '#71D1FF' //選中時顏色
                                }
                            },
                            data:[
                                {name:'廣東',selected:true}   //廣東默認別選中
                            ],
                            geoCoord: {   //每個城市對應的經緯度
                                '上海': [121.4648,31.2891] }

 

這個是全國地圖，最后在使用setOption（）方法加載地圖：

myChart.setOption(option, true);

 

第二步通過on事件實現省級下鑽

添加一個省級對象(類似第一步的option)設置樣式數據等，Echarts2.2.7這里不需要下載省級地圖，直接通過Data設置數據讀取就可以了：

//省級
                provinceO = {
                    title: { //標題
                        text: '全國34個省市自治區',
                        subtext: '省級'
                    },
                    tooltip: {
                        trigger: 'item'  //提示框的觸發類型。
                    },
                    legend: {   //圖列
                        orient: 'vertical', //圖列顯示的方式
                        x: 'right',
                        data: ['隨機數據']
                    },                    
                    series: [
                        {
                            name: '隨機數據',
                            type: 'map',
                            mapType: '湖南',  //要顯示的省份，下鑽就是通過on事件來更改屬性
                            selectedMode: 'single', //選中模式，可以設置多選模式和單選，不能選擇則刪除刪除屬性
                            itemStyle: {
                                normal: {  
                                    label: { show: true }, //是否顯示城市名字
                                    borderColor: '#71D1FF',  //地圖邊界顏色
                                    color: '#070C67'
                                },
                                emphasis: { label: { show: true } } //選中后樣式
                                
                            },
                            data: [ 
                                { name: '重慶市', value: Math.round(Math.random() * 1000) }}//類似數據省略

 

通過on來更改series下的mapType屬性，然后通過setOption方法來給第二個DIV加載地圖（當然也可以直接給第一個DIV重新加載），這樣就實現下鑽到省的聯動效果了；

var ecConfig = require('echarts/config');
                myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {  
                    var name = param.target;//獲得選中的城市
                    provinceO.series[0].mapType = name;//設置series的mapType屬性為當前選中的城市
                    SubordinateMap.setOption(provinceO, true);//給SubordinateMapDIV重現加載地圖

                });

第三步通實現市級下鑽效果
通過一個數組綁定每個城市對應的文件名：

 var cityMap = {
                    "北京市": "110100", //每個城市對應的json文件名
                    "天津市": "120100",
                    "上海市": "310100",
                    "重慶市": "500100"}//重復數據省略

 

通過循環引入地圖數據：

 　　　　　　　　 var mapType = [];
                var mapGeoData = require('echarts/util/mapData/params');
                //console.log(mapGeoData)
                for (var city in cityMap) { //通過循環來引入數據
                    mapType.push(city);
                    // 自定義擴展圖表類型
                    mapGeoData.params[city] = {
                        getGeoJson: (function (c) {
                            var geoJsonName = cityMap[c]; //通過cityMap數組得到JSON文件名
                            return function (callback) {
                                $.getJSON('geoJson/' + geoJsonName + '.json', callback);  //得到地圖JSON文件數據，首先你本地路徑下得有這個JSON文件
                            }
                        })(city)
                    }
                }

 

添加一個市級對象設置樣式數據，跟上面不同的是這里需要地圖數據，因為Echarts沒有帶市級地圖，需要自己去網上找地圖數據：

//市級
                cityO = {
                    title: { //標題
                        text: '全國344個主要城市'
                    },
                    tooltip: {
                        trigger: 'item',   //提示框的觸發類型。
                        formatter: '{b}'  //內容格式器可以支持異步回調函數。返回一個你想要提示的字符串就可以了
                    },
                    series: [  //圖表生成的數據內容數組
                        {
                            name: '全國344個主要城市（縣）地圖',
                            type: 'map',  //類型為地圖，
                            mapType: '北京市', //要顯示的市，下鑽就是通過on事件來更改屬性
                            selectedMode: 'single',//選中模式，可以設置多選模式和單選，不能選擇則刪除刪除屬性
                            itemStyle: {
                                normal: {
                                    label: { show: true }, //是否顯示城市名字
                                    borderColor: '#71D1FF',  //地圖邊界顏色
                                    color:'#070C67'
                                },
                                emphasis: { label: { show: true } } //選中后的樣式
                            },
                            data: []
                        }
                    ]
                };

 

然后通過on來更改series下的mapType屬性，在通過setOption方法來給第二個DIV重新加載地圖就實現下鑽到市級了。

　　　　SubordinateMap.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
                    var name = param.target;//獲得選中的城市
                    cityO.series[0].mapType = name;//設置series的mapType屬性為當前選中的城市
                    SubordinateMap.setOption(cityO, true);//給SubordinateMapDIV重現加載地圖
                });

 

如果你還需要下鑽到更小范圍比如區級，那就只能跟百度地圖API結合了，PS:當然也可以用Ehcarts自定義地圖實現但是每個縣的區級地圖JSON數據網上也沒有，
並且Echarts生成也只能生成到縣。

如何下鑽到縣區級：
實現效果：點擊某個市的縣后，在到百度地圖上框出邊界線，設置縮放級別調整視角。（如果想要更好的效果也可以把邊除了框出來的城市外其他的城市不顯示）

引入百度地圖API，在頁面上添加一個DIV來加載百度地圖，然后初始化百度地圖：

　　　　function (echarts, BMapExtension) {
                var BMapExt = new BMapExtension($('#main')[0], BMap, echarts, {
                    enableMapClick: false
                });
                map = BMapExt.getMap();
                var container = BMapExt.getEchartsContainer();

                var startPoint = { //經緯度
                    x: 104.114129, 
                    y: 37.550339
                };
                var point = new BMap.Point(startPoint.x, startPoint.y);
                map.centerAndZoom(point, 5); //根據經緯度調整視角
                map.enableScrollWheelZoom(true); //開啟滾輪縮放
                // 地圖自定義樣式
                map.setMapStyle({
                    styleJson: [
                          {
                              "featureType": "background",
                              "elementType": "all",
                              "stylers": {
                                  "color": "#444444"
                              }
                          }

 

通過Echarts加載的市級地圖的on事件觸發百度地圖設置函數：

　　　　　　　　　var myChart = echarts.init(document.getElementById('main'));
                var ecConfig = require('echarts/config');
                myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
                        getBoundary(param.target);
                });            

 

由於沒個城市的大小，形狀都不一樣，在DIV里面顯示的效果就不一樣，有大的城市沒有顯示全，有些小的又放的太小了，並且視角也不是最佳視角，所以我這了定義的一個數組用來存放每個下鑽城市
的視角位置，已經縮放級別，這樣就跟根據自己設置的DIV大小來調整地圖的大小了。

//定義一個數組來存放每個城市的視角位置，和放大級別
        var PositionData = [{ name: '濟寧市', long: 116.782471, lat: 35.226815, zoom: 10 }, { name: '新鄉市', long: 114.172514, lat: 35.216547, zoom: 10 }, { name: '甘孜藏族自治州', long: 99.935306, lat: 31.093953, zoom: 8 }]
        function getBoundary(city) {
            var ply;
            var bdary = new BMap.Boundary();
            bdary.get(city, function (rs) {       //獲取行政區域
                //map.clearOverlays();        //清除地圖覆蓋物       
                var count = rs.boundaries.length; //行政區域的點有多少個
                for (var i = 0; i < count; i++) {
                    ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 3, strokeColor: "#ffff00", fillColor: "none" }); //建立多邊形覆蓋物
                    map.addOverlay(ply);  //添加覆蓋物 ，這里要用到初始化時的map ，
                    //map.setViewport(ply.getPath());    //調整視野
                }
                for (var i = 0; i < PositionData.length; i++)
                {
                    if (PositionData[i].name == city) {
                        //通過經緯度指定視野的中心位置，以及放大級別
                        map.centerAndZoom(new BMap.Point(PositionData[i].long, PositionData[i].lat), PositionData[i].zoom);
                        break;
                    }
                    else {
                        if (i == PositionData.length - 1) {
                            //如果數組里沒有該城市視角數據和放大級別數據時就設置默認的視角位置和放大級別
                            map.centerAndZoom(city, 10);
                        }
                    }
                }
            });
        }

 

最后
如果想實現下鑽到區級，原理一樣，這里就不講了，需要源碼或地圖數據的，可以聯系我，如果有什么更好的方法，歡迎吐槽留言。

當然你也可以請我喝杯咖啡（學的，不發個二維碼都沒啥期待，哈哈哈）