关于echarts地图下钻。

Posted 2020-08-30 wl_莫云

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

         };

效果图：

　　　　第一篇文章，写的不好，莫怪，莫怪。。。。。