在去年十二月份，前端老大交代個任務，關于地圖下鉆。這里做了個簡單的青島地圖下鉆，初學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);             })         };效果圖：
      第一次發表文章，有很多沒寫到點子上的地點，大家湊合看吧。