數據視化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來設置中國地圖的樣式以下：

 1 function (ec) {
 2       // 基於準備好的dom，初始化echarts圖表
 3       var myChart = ec.init(document.getElementById('main'));
 4       var SubordinateMap = ec.init(document.getElementById('subordinate'));
 5 
 6       option = {
 7           tooltip : {
 8               trigger: 'item', //提示框的觸發類型。
 9               formatter: '{b}' //內容格式器能夠支持異步回調函數。返回一個你想要提示的字符串就能夠了
10           },
11           dataRange: { //值域選擇
12               min: 0,
13               max: 100,
14               calculable: false,
15               show: false,
16               color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
17               textStyle: {  //文字顏色
18                   color: '#fff'
19               }
20           },
21           series: [   //圖表生成的數據內容數組
22               {
23                   name: '中國',
24                   type: 'map',   //圖表類型爲地圖
25                   mapType: 'china',   //地圖類型中國地圖，
26                   selectedMode: 'single', //選中模式，能夠設置多選模式和單選，不能選擇則刪除刪除屬性
27                   hoverable: false,   //懸浮是否高亮
28                   itemStyle:{
29                       normal: {        //地圖樣式
30                           borderColor: '#71D1FF', //地圖邊界顏色
31                           color: '#070C67'  //地圖顏色
32                       },
33                       emphasis: {   //地圖選中時樣式
34                           label: {
35                               show: true,
36                               textStyle: {
37                                   color: '#fff' //選中時區域名字顏色
38                               },
39                           },
40                           color: '#71D1FF' //選中時顏色
41                       }
42                   },
43                   data:[
44                       {name:'廣東',selected:true}   //廣東默認別選中
45                   ],
46                   geoCoord: {   //每一個城市對應的經緯度
47                       '上海': [121.4648,31.2891] }...//相似數據省略

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

1 myChart.setOption(option, true);

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

添加一個省級對象(相似第一步的option)設置樣式數據等，Echarts2.2.7這裏不須要下載省級地圖，直接經過Data設置數據讀取就能夠了：

 1                 //省級
 2                 provinceO = {
 3                     title: { //標題
 4                         text: '全國34個省市自治區',
 5                         subtext: '省級'
 6                     },
 7                     tooltip: {
 8                         trigger: 'item'  //提示框的觸發類型。
 9                     },
10                     legend: {   //圖列
11                         orient: 'vertical', //圖列顯示的方式
12                         x: 'right',
13                         data: ['隨機數據']
14                     },
15                     series: [
16                         {
17                             name: '隨機數據',
18                             type: 'map',
19                             mapType: '湖南',  //要顯示的省份，下鑽就是經過on事件來更改屬性
20                             selectedMode: 'single', //選中模式，能夠設置多選模式和單選，不能選擇則刪除刪除屬性
21                             itemStyle: {
22                                 normal: {
23                                     label: { show: true }, //是否顯示城市名字
24                                     borderColor: '#71D1FF',  //地圖邊界顏色
25                                     color: '#070C67'
26                                 },
27                                 emphasis: { label: { show: true } } //選中後樣式
28 
29                             },
30                             data: [
31                                 { name: '重慶市', value: Math.round(Math.random() * 1000) }}....//相似數據省略

經過on來更改series下的mapType屬性，而後經過setOption方法來給第二個DIV加載地圖（固然也能夠直接給第一個DIV從新加載），這樣就實現下鑽到省的聯動效果了；

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

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

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

經過循環引入地圖數據：

 1 　　　　　　　　　　var mapType = [];
 2                  var mapGeoData = require('echarts/util/mapData/params');
 3                  //console.log(mapGeoData)
 4                  for (var city in cityMap) { //經過循環來引入數據
 5                      mapType.push(city);
 6                      // 自定義擴展圖表類型
 7                      mapGeoData.params[city] = {
 8                          getGeoJson: (function (c) {
 9                              var geoJsonName = cityMap[c]; //經過cityMap數組獲得JSON文件名
10                              return function (callback) {
11                                  $.getJSON('geoJson/' + geoJsonName + '.json', callback);  //獲得地圖JSON文件數據，首先你本地路徑下得有這個JSON文件
12                              }
13                          })(city)
14                      }
15                  }

添加一個市級對象設置樣式數據，跟上面不一樣的是這裏須要地圖數據，由於Echarts沒有帶市級地圖，須要本身去網上找地圖數據：

 1 　　　　　　　　  //市級
 2                 cityO = {
 3                     title: { //標題
 4                         text: '全國344個主要城市'
 5                     },
 6                     tooltip: {
 7                         trigger: 'item',   //提示框的觸發類型。
 8                         formatter: '{b}'  //內容格式器能夠支持異步回調函數。返回一個你想要提示的字符串就能夠了
 9                     },
10                     series: [  //圖表生成的數據內容數組
11                         {
12                             name: '全國344個主要城市（縣）地圖',
13                             type: 'map',  //類型爲地圖，
14                             mapType: '北京市', //要顯示的市，下鑽就是經過on事件來更改屬性
15                             selectedMode: 'single',//選中模式，能夠設置多選模式和單選，不能選擇則刪除刪除屬性
16                             itemStyle: {
17                                 normal: {
18                                     label: { show: true }, //是否顯示城市名字
19                                     borderColor: '#71D1FF',  //地圖邊界顏色
20                                     color:'#070C67'
21                                 },
22                                 emphasis: { label: { show: true } } //選中後的樣式
23                             },
24                             data: []
25                         }
26                     ]
27                 };

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

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

若是你還須要下鑽到更小範圍好比區級，那就只能跟百度地圖API結合了，PS:固然也能夠用Ehcarts自定義地圖實現可是每一個縣的區級地圖JSON數據網上也沒有，
而且Echarts生成也只能生成到縣。

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

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

 1 　　function (echarts, BMapExtension) {
 2                var BMapExt = new BMapExtension($('#main')[0], BMap, echarts, {
 3                    enableMapClick: false
 4                });
 5                map = BMapExt.getMap();
 6                var container = BMapExt.getEchartsContainer();
 7 
 8                var startPoint = { //經緯度
 9                    x: 104.114129,
10                    y: 37.550339
11                };
12                var point = new BMap.Point(startPoint.x, startPoint.y);
13                map.centerAndZoom(point, 5); //根據經緯度調整視角
14                map.enableScrollWheelZoom(true); //開啓滾輪縮放
15                // 地圖自定義樣式
16                map.setMapStyle({
17                    styleJson: [
18                          {
19                              "featureType": "background",
20                              "elementType": "all",
21                              "stylers": {
22                                  "color": "#444444"
23                              }
24                          }
25                       ]
26                  })
27             }

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

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

因爲沒個城市的大小，形狀都不同，在DIV裏面顯示的效果就不同，有大的城市沒有顯示全，有些小的又放的過小了，而且視角也不是最佳視角，因此我這了定義的一個數組用來存放每一個下鑽城市
的視角位置，已經縮放級別，這樣就跟根據本身設置的DIV大小來調整地圖的大小了。

 1 //定義一個數組來存放每一個城市的視角位置，和放大級別
 2        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 }]
 3        function getBoundary(city) {
 4            var ply;
 5            var bdary = new BMap.Boundary();
 6            bdary.get(city, function (rs) {       //獲取行政區域
 7                //map.clearOverlays();        //清除地圖覆蓋物
 8                var count = rs.boundaries.length; //行政區域的點有多少個
 9                for (var i = 0; i < count; i++) {
10                    ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 3, strokeColor: "#ffff00", fillColor: "none" }); //創建多邊形覆蓋物
11                    map.addOverlay(ply);  //添加覆蓋物 ，這裏要用到初始化時的map ，
12                    //map.setViewport(ply.getPath());    //調整視野
13                }
14                for (var i = 0; i < PositionData.length; i++)
15                {
16                    if (PositionData[i].name == city) {
17                        //經過經緯度指定視野的中心位置，以及放大級別
18                        map.centerAndZoom(new BMap.Point(PositionData[i].long, PositionData[i].lat), PositionData[i].zoom);
19                        break;
20                    }
21                    else {
22                        if (i == PositionData.length - 1) {
23                            //若是數組裏沒有該城市視角數據和放大級別數據時就設置默認的視角位置和放大級別
24                            map.centerAndZoom(city, 10);
25                        }
26                    }
27                }
28            });
29        }   

最後
若是想實現下鑽到區級，原理同樣，這裏就不講了，須要源碼或地圖數據的，能夠聯繫我，若是有什麼更好的方法，歡迎吐槽留言。

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