關於echarts地圖下鑽。

　　　 在去年十二月份，前端老大交代個任務，關於地圖下鑽。這裏作了個簡單的青島地圖下鑽，初學echarts，作的不精，湊合看看吧。

　　　第一步呢，先引入echarts等文件，這是最基本的。

　　　　

　　  第二步，到官網下載青島各區的json包，網址 http://ecomfe.github.io/echarts-map-tool/ （建議：在作地圖下鑽時，最好用json包，不用js文件）

        第三步，頁面新建區域。

　　　　<div id="main" style="height: 90%"></div>

　　  第四步，js文件內容，看代碼。

　　

var chart = echarts.init(document.getElementById('main'));
         var cityProper = {
             '城陽區': 'js/chengyang.json',
             '嶗山區': 'js/laoshan.json',
             '李滄區': 'js/licang.json',
             '市北區': 'js/shibei.json',
             '市南區': 'js/shinan.json',
             '黃島區': 'js/huangdao.json',
             '膠州市': 'js/jiaozhou.json',
             '即墨市': 'js/jimo.json',
             '萊西市': 'js/laixi.json',
             '平度市': 'js/pingdu.json'
         };
         var data = [{
             name: '城陽區'
         }, {
             name: '嶗山區'
         }, {
             name: '李滄區'
         }, {
             name: '市北區'
         }, {
             name: '市南區'
         }, {
             name: '黃島區'
         }, {
             name: '膠州市'
         }, {
             name: '即墨市'
         }, {
             name: '萊西市'
         }, {
             name: '平度市'
         }];

         //獲取青島地圖數據。
         $.get('js/qingdao.json', function(getJSON) { 
             echarts.registerMap("青島",getJSON)
                 option = {
                     grid: {
                        left: '5%',
                        right: '4%',
                        top:'0%',
                        bottom: '0%',
                        width:'100%',
                        containLabel: true
                    },
                    toolbox: {
                         show: true,
                         orient: 'vertical',
                         x: 'right',
                         y: 'center',
                         feature: {
                             mark: {
                                 show: true
                             },
                             dataView: {
                                 show: true,
                                 readOnly: false
                             }
                         }
                     },
                     series: [{
                         tooltip: {
                             trigger: 'item'
                         },
                         name: '選擇器',
                         type: 'map',
                         mapType: '青島',
                         left: '20%',
                         top: '20%',
                        
                         roam: true,
                         selectedMode: 'single',
                         itemStyle: {
                             normal: {
                                 label: {
                                     show: true
                                 }
                             },
                             emphasis: {
                                 label: {
                                     show: true
                                 }
                             }
                         },
                         data: data
                     }],
                     animation: false
                 };


                 chart.setOption(option, false);
                 
                 chart.on("click", chartClick);
            })
            
         function chartClick(param){ 
            chart.setOption(option, false); 

            var selectedPro = param.name;
            if (!cityProper[selectedPro]) {
                 option.series.splice(1);
                 option.legend = null;
                 option.visualMap = null;
                 chart.setOption(option, true);
                 return;
             }
            
            //獲取點擊區域數據
             $.get(cityProper[selectedPro], function(geojson) {
                 echarts.registerMap(selectedPro, geojson);
                 //根據需求，若是要替換青島地圖，series參數爲[0]，不替換爲[1],其中left、top本身設置。
                 option.series[0] = {
                     name: '選擇器',
                     type: 'map',
                     mapType: selectedPro,
                     left: '20%',
                     top: '20%',
                     width: '18%',
                     roam: true,
                     selectedMode: 'single',
                     itemStyle: {
                         normal: {
                             label: {
                                 show: true
                             }
                         },
                         emphasis: {
                             label: {
                                 show: true
                             }
                         }
                     },
                     data: data
                 };
                
                 chart.setOption(option, true);
             })

         };

效果圖：

　　　　第一篇文章，寫的很差，莫怪，莫怪。。。。。