关于青岛地图下钻

在去年十二月份，前端老大交代个任务，关于地图下钻。这里做了个简单的青岛地图下钻，初学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);
             })

         };

效果图：

      第一次发表文章，有很多没写到点子上的地点，大家凑合看吧。