我这里实现的是河南省的地图点击要下钻的区域展示相应区域的地图，点击地图外部空白处返回上一级。

一、准备geojson数据

网址：DataV.GeoAtlas地理小工具系列

下载需要的geojson数据。保存到src/assets文件夹下

准备河南省的地市编码json文件（all_henan.json）,该文件网上比较难找，我在这里贴出来all_henan.json文件

 [{"adcode": "410100","name": "郑州市"}, {"adcode": "410200","name": "开封市"}, {"adcode": "410300","name": "洛阳市"}, {"adcode": "410400","name": "平顶山市"}, {"adcode": "410500","name": "安阳市"}, {"adcode": "410600","name": "鹤壁市"}, {"adcode": "410700","name": "新乡市"}, {"adcode": "410800","name": "焦作市"}, {"adcode": "410900","name": "濮阳市"}, {"adcode": "411000","name": "许昌市"}, {"adcode": "411100","name": "漯河市"}, {"adcode": "411200","name": "三门峡市"}, {"adcode": "411300","name": "南阳市"}, {"adcode": "411400","name": "商丘市"}, {"adcode": "411500","name": "信阳市"}, {"adcode": "411600","name": "周口市"}, {"adcode": "411700","name": "驻马店市"}, {"adcode": "419001","name": "济源市"}]

如果要做全国地图，全国的省地市编码json文件（all.json）如下：（如果匹配有问题的话，可能需要加上省，如"河南"改为"河南省"）

[{"name": "安徽","city": [{"adcode": "340100","name": "合肥"}, {"adcode": "340200","name": "芜湖"}, {"adcode": "340300","name": "蚌埠"}, {"adcode": "340400","name": "淮南"}, {"adcode": "340500","name": "马鞍山"}, {"adcode": "340600","name": "淮北"}, {"adcode": "340700","name": "铜陵"}, {"adcode": "340800","name": "安庆"}, {"adcode": "341000","name": "黄山"}, {"adcode": "341100","name": "滁州"}, {"adcode": "341200","name": "阜阳"}, {"adcode": "341300","name": "宿州"}, {"adcode": "341500","name": "六安"}, {"adcode": "341600","name": "亳州"}, {"adcode": "341700","name": "池州"}, {"adcode": "341800","name": "宣城"}]
}, {"name": "福建","city": [{"adcode": "350100","name": "福州"}, {"adcode": "350200","name": "厦门"}, {"adcode": "350300","name": "莆田"}, {"adcode": "350400","name": "三明"}, {"adcode": "350500","name": "泉州"}, {"adcode": "350600","name": "漳州"}, {"adcode": "350700","name": "南平"}, {"adcode": "350800","name": "龙岩"}, {"adcode": "350900","name": "宁德"}]
}, {"name": "广东","city": [{"adcode": "440100","name": "广州"}, {"adcode": "440200","name": "韶关"}, {"adcode": "440300","name": "深圳"}, {"adcode": "440400","name": "珠海"}, {"adcode": "440500","name": "汕头"}, {"adcode": "440600","name": "佛山"}, {"adcode": "440700","name": "江门"}, {"adcode": "440800","name": "湛江"}, {"adcode": "440900","name": "茂名"}, {"adcode": "441200","name": "肇庆"}, {"adcode": "441300","name": "惠州"}, {"adcode": "441400","name": "梅州"}, {"adcode": "441500","name": "汕尾"}, {"adcode": "441600","name": "河源"}, {"adcode": "441700","name": "阳江"}, {"adcode": "441800","name": "清远"}, {"adcode": "441900","name": "东莞"}, {"adcode": "442000","name": "中山"}, {"adcode": "445100","name": "潮州"}, {"adcode": "445200","name": "揭阳"}, {"adcode": "445300","name": "云浮"}]
}, {"name": "广西","city": [{"adcode": "450100","name": "南宁"}, {"adcode": "450200","name": "柳州"}, {"adcode": "450300","name": "桂林"}, {"adcode": "450400","name": "梧州"}, {"adcode": "450500","name": "北海"}, {"adcode": "450600","name": "防城港"}, {"adcode": "450700","name": "钦州"}, {"adcode": "450800","name": "贵港"}, {"adcode": "450900","name": "玉林"}, {"adcode": "451000","name": "百色"}, {"adcode": "451100","name": "贺州"}, {"adcode": "451200","name": "河池"}, {"adcode": "451300","name": "来宾"}, {"adcode": "451400","name": "崇左"}]
}, {"name": "贵州","city": [{"adcode": "520100","name": "贵阳"}, {"adcode": "520200","name": "六盘水"}, {"adcode": "520300","name": "遵义"}, {"adcode": "520400","name": "安顺"}, {"adcode": "520500","name": "毕节"}, {"adcode": "520600","name": "铜仁"}, {"adcode": "522300","name": "黔西南布依族苗族自治州"}, {"adcode": "522600","name": "黔东南苗族侗族自治州"}, {"adcode": "522700","name": "黔南布依族苗族自治州"}]
}, {"name": "甘肃","city": [{"adcode": "620100","name": "兰州"}, {"adcode": "620200","name": "嘉峪关"}, {"adcode": "620300","name": "金昌"}, {"adcode": "620400","name": "白银"}, {"adcode": "620500","name": "天水"}, {"adcode": "620600","name": "武威"}, {"adcode": "620700","name": "张掖"}, {"adcode": "620800","name": "平凉"}, {"adcode": "620900","name": "酒泉"}, {"adcode": "621000","name": "庆阳"}, {"adcode": "621100","name": "定西"}, {"adcode": "621200","name": "陇南"}, {"adcode": "622900","name": "临夏回族自治州"}, {"adcode": "623000","name": "甘南藏族自治州"}]
}, {"name": "河北","city": [{"adcode": "130100","name": "石家庄"}, {"adcode": "130200","name": "唐山"}, {"adcode": "130300","name": "秦皇岛"}, {"adcode": "130400","name": "邯郸"}, {"adcode": "130500","name": "邢台"}, {"adcode": "130600","name": "保定"}, {"adcode": "130700","name": "张家口"}, {"adcode": "130800","name": "承德"}, {"adcode": "130900","name": "沧州"}, {"adcode": "131000","name": "廊坊"}, {"adcode": "131100","name": "衡水"}]
}, {"name": "黑龙江","city": [{"adcode": "230100","name": "哈尔滨"}, {"adcode": "230200","name": "齐齐哈尔"}, {"adcode": "230300","name": "鸡西"}, {"adcode": "230400","name": "鹤岗"}, {"adcode": "230500","name": "双鸭山"}, {"adcode": "230600","name": "大庆"}, {"adcode": "230700","name": "伊春"}, {"adcode": "230800","name": "佳木斯"}, {"adcode": "230900","name": "七台河"}, {"adcode": "231000","name": "牡丹江"}, {"adcode": "231100","name": "黑河"}, {"adcode": "231200","name": "绥化"}, {"adcode": "232700","name": "大兴安岭"}]
}, {"name": "河南省","adcode": "410000","city": [{"adcode": "410100","name": "郑州"}, {"adcode": "410200","name": "开封"}, {"adcode": "410300","name": "洛阳"}, {"adcode": "410400","name": "平顶山"}, {"adcode": "410500","name": "安阳"}, {"adcode": "410600","name": "鹤壁"}, {"adcode": "410700","name": "新乡"}, {"adcode": "410800","name": "焦作"}, {"adcode": "410900","name": "濮阳"}, {"adcode": "411000","name": "许昌市"}, {"adcode": "411100","name": "漯河"}, {"adcode": "411200","name": "三门峡"}, {"adcode": "411300","name": "南阳"}, {"adcode": "411400","name": "商丘"}, {"adcode": "411500","name": "信阳"}, {"adcode": "411600","name": "周口"}, {"adcode": "411700","name": "驻马店"}, {"adcode": "419001","name": "济源"}]
}, {"name": "湖北","city": [{"adcode": "420100","name": "武汉"}, {"adcode": "420200","name": "黄石"}, {"adcode": "420300","name": "十堰"}, {"adcode": "420500","name": "宜昌"}, {"adcode": "420600","name": "襄阳"}, {"adcode": "420700","name": "鄂州"}, {"adcode": "420800","name": "荆门"}, {"adcode": "420900","name": "孝感"}, {"adcode": "421000","name": "荆州"}, {"adcode": "421100","name": "黄冈"}, {"adcode": "421200","name": "咸宁"}, {"adcode": "421300","name": "随州"}, {"adcode": "422800","name": "恩施土家族苗族自治州"}, {"adcode": "429004","name": "仙桃"}, {"adcode": "429005","name": "潜江"}, {"adcode": "429006","name": "天门"}, {"adcode": "429021","name": "神农架林区"}]
}, {"name": "湖南","city": [{"adcode": "430100","name": "长沙"}, {"adcode": "430200","name": "株洲"}, {"adcode": "430300","name": "湘潭"}, {"adcode": "430400","name": "衡阳"}, {"adcode": "430500","name": "邵阳"}, {"adcode": "430600","name": "岳阳"}, {"adcode": "430700","name": "常德"}, {"adcode": "430800","name": "张家界"}, {"adcode": "430900","name": "益阳"}, {"adcode": "431000","name": "郴州"}, {"adcode": "431100","name": "永州"}, {"adcode": "431200","name": "怀化"}, {"adcode": "431300","name": "娄底"}, {"adcode": "433100","name": "湘西土家族苗族自治州"}]
}, {"name": "海南","city": [{"adcode": "460100","name": "海口"}, {"adcode": "460200","name": "三亚"}, {"adcode": "460300","name": "三沙"}, {"adcode": "460400","name": "儋州"}]
}, {"name": "吉林","city": [{"adcode": "220100","name": "长春"}, {"adcode": "220200","name": "吉林"}, {"adcode": "220300","name": "四平"}, {"adcode": "220400","name": "辽源"}, {"adcode": "220500","name": "通化"}, {"adcode": "220600","name": "白山"}, {"adcode": "220700","name": "松原"}, {"adcode": "220800","name": "白城"}, {"adcode": "222400","name": "延边朝鲜族自治州"}]
}, {"name": "江苏","city": [{"adcode": "320100","name": "南京"}, {"adcode": "320200","name": "无锡"}, {"adcode": "320300","name": "徐州"}, {"adcode": "320400","name": "常州"}, {"adcode": "320500","name": "苏州"}, {"adcode": "320600","name": "南通"}, {"adcode": "320700","name": "连云港"}, {"adcode": "320800","name": "淮安"}, {"adcode": "320900","name": "盐城"}, {"adcode": "321000","name": "扬州"}, {"adcode": "321100","name": "镇江"}, {"adcode": "321200","name": "泰州"}, {"adcode": "321300","name": "宿迁"}]
}, {"name": "江西","city": [{"adcode": "360100","name": "南昌"}, {"adcode": "360200","name": "景德镇"}, {"adcode": "360300","name": "萍乡"}, {"adcode": "360400","name": "九江"}, {"adcode": "360500","name": "新余"}, {"adcode": "360600","name": "鹰潭"}, {"adcode": "360700","name": "赣州"}, {"adcode": "360800","name": "吉安"}, {"adcode": "360900","name": "宜春"}, {"adcode": "361000","name": "抚州"}, {"adcode": "361100","name": "上饶"}]
}, {"name": "辽宁","city": [{"adcode": "210100","name": "沈阳"}, {"adcode": "210200","name": "大连"}, {"adcode": "210300","name": "鞍山"}, {"adcode": "210400","name": "抚顺"}, {"adcode": "210500","name": "本溪"}, {"adcode": "210600","name": "丹东"}, {"adcode": "210700","name": "锦州"}, {"adcode": "210800","name": "营口"}, {"adcode": "210900","name": "阜新"}, {"adcode": "211000","name": "辽阳"}, {"adcode": "211100","name": "盘锦"}, {"adcode": "211200","name": "铁岭"}, {"adcode": "211300","name": "朝阳"}, {"adcode": "211400","name": "葫芦岛"}]
}, {"name": "内蒙古","city": [{"adcode": "150100","name": "呼和浩特"}, {"adcode": "150200","name": "包头"}, {"adcode": "150300","name": "乌海"}, {"adcode": "150400","name": "赤峰"}, {"adcode": "150500","name": "通辽"}, {"adcode": "150600","name": "鄂尔多斯"}, {"adcode": "150700","name": "呼伦贝尔"}, {"adcode": "150800","name": "巴彦淖尔"}, {"adcode": "150900","name": "乌兰察布"}, {"adcode": "152200","name": "兴安盟"}, {"adcode": "152500","name": "锡林郭勒盟"}, {"adcode": "152900","name": "阿拉善盟"}]
}, {"name": "宁夏","city": [{"adcode": "640100","name": "银川"}, {"adcode": "640200","name": "石嘴山"}, {"adcode": "640300","name": "吴忠"}, {"adcode": "640400","name": "固原"}, {"adcode": "640500","name": "中卫"}]
}, {"name": "青海","city": [{"adcode": "630100","name": "西宁"}, {"adcode": "630200","name": "海东"}, {"adcode": "632200","name": "海北藏族自治州"}, {"adcode": "632300","name": "黄南藏族自治州"}, {"adcode": "632500","name": "海南藏族自治州"}, {"adcode": "632600","name": "果洛藏族自治州"}, {"adcode": "632700","name": "玉树藏族自治州"}, {"adcode": "632800","name": "海西蒙古族藏族自治州"}]
}, {"name": "山西","city": [{"adcode": "140100","name": "太原"}, {"adcode": "140200","name": "大同"}, {"adcode": "140300","name": "阳泉"}, {"adcode": "140400","name": "长治"}, {"adcode": "140500","name": "晋城"}, {"adcode": "140600","name": "朔州"}, {"adcode": "140700","name": "晋中"}, {"adcode": "140800","name": "运城"}, {"adcode": "140900","name": "忻州"}, {"adcode": "141000","name": "临汾"}, {"adcode": "141100","name": "吕梁"}]
}, {"name": "山东","city": [{"adcode": "370100","name": "济南"}, {"adcode": "370200","name": "青岛"}, {"adcode": "370300","name": "淄博"}, {"adcode": "370400","name": "枣庄"}, {"adcode": "370500","name": "东营"}, {"adcode": "370600","name": "烟台"}, {"adcode": "370700","name": "潍坊"}, {"adcode": "370800","name": "济宁"}, {"adcode": "370900","name": "泰安"}, {"adcode": "371000","name": "威海"}, {"adcode": "371100","name": "日照"}, {"adcode": "371200","name": "莱芜"}, {"adcode": "371300","name": "临沂"}, {"adcode": "371400","name": "德州"}, {"adcode": "371500","name": "聊城"}, {"adcode": "371600","name": "滨州"}, {"adcode": "371700","name": "菏泽"}]
}, {"name": "四川","city": [{"adcode": "510100","name": "成都"}, {"adcode": "510300","name": "自贡"}, {"adcode": "510400","name": "攀枝花"}, {"adcode": "510500","name": "泸州"}, {"adcode": "510600","name": "德阳"}, {"adcode": "510700","name": "绵阳"}, {"adcode": "510800","name": "广元"}, {"adcode": "510900","name": "遂宁"}, {"adcode": "511000","name": "内江"}, {"adcode": "511100","name": "乐山"}, {"adcode": "511300","name": "南充"}, {"adcode": "511400","name": "眉山"}, {"adcode": "511500","name": "宜宾"}, {"adcode": "511600","name": "广安"}, {"adcode": "511700","name": "达州"}, {"adcode": "511800","name": "雅安"}, {"adcode": "511900","name": "巴中"}, {"adcode": "512000","name": "资阳"}, {"adcode": "513200","name": "阿坝藏族羌族自治州"}, {"adcode": "513300","name": "甘孜藏族自治州"}, {"adcode": "513400","name": "凉山彝族自治州"}]
}, {"name": "陕西","city": [{"adcode": "610100","name": "西安"}, {"adcode": "610200","name": "铜川"}, {"adcode": "610300","name": "宝鸡"}, {"adcode": "610400","name": "咸阳"}, {"adcode": "610500","name": "渭南"}, {"adcode": "610600","name": "延安"}, {"adcode": "610700","name": "汉中"}, {"adcode": "610800","name": "榆林"}, {"adcode": "610900","name": "安康"}, {"adcode": "611000","name": "商洛"}]
}, {"name": "天津","city": [{"adcode": "120100","name": "天津市市辖区"}]
}, {"name": "台湾","city": [{"adcode": "719002","name": "台北"}, {"adcode": "719019","name": "高雄"}, {"adcode": "719017","name": "台中"}, {"adcode": "719016","name": "台南"}, {"adcode": "719010","name": "新北"}, {"adcode": "719011","name": "基隆"}, {"adcode": "719006","name": "新竹"}, {"adcode": "719004","name": "嘉义"}]
}, {"name": "西藏","city": [{"adcode": "540100","name": "拉萨"}, {"adcode": "540200","name": "日喀则"}, {"adcode": "540300","name": "昌都"}, {"adcode": "540400","name": "林芝"}, {"adcode": "540500","name": "山南"}, {"adcode": "540600","name": "那曲"}, {"adcode": "542500","name": "阿里"}]
}, {"name": "新疆","city": [{"adcode": "650100","name": "乌鲁木齐"}, {"adcode": "650200","name": "克拉玛依"}, {"adcode": "650400","name": "吐鲁番"}, {"adcode": "650500","name": "哈密"}, {"adcode": "652300","name": "昌吉回族自治州"}, {"adcode": "652700","name": "博尔塔拉蒙古自治州"}, {"adcode": "652800","name": "巴音郭楞蒙古自治州"}, {"adcode": "652900","name": "阿克苏"}, {"adcode": "653000","name": "克孜勒苏柯尔克孜自治州"}, {"adcode": "653100","name": "喀什"}, {"adcode": "653200","name": "和田"}, {"adcode": "654000","name": "伊犁哈萨克自治州"}, {"adcode": "654200","name": "塔城"}, {"adcode": "654300","name": "阿勒泰"}, {"adcode": "659001","name": "石河子"}, {"adcode": "659002","name": "阿拉尔"}, {"adcode": "659003","name": "图木舒克"}, {"adcode": "659004","name": "五家渠"}]
}, {"name": "云南","city": [{"adcode": "530100","name": "昆明"}, {"adcode": "530300","name": "曲靖"}, {"adcode": "530400","name": "玉溪"}, {"adcode": "530500","name": "保山"}, {"adcode": "530600","name": "昭通"}, {"adcode": "530700","name": "丽江"}, {"adcode": "530800","name": "普洱"}, {"adcode": "530900","name": "临沧"}, {"adcode": "532300","name": "楚雄彝族自治州"}, {"adcode": "532500","name": "红河哈尼族彝族自治州"}, {"adcode": "532600","name": "文山壮族苗族自治州"}, {"adcode": "532800","name": "西双版纳傣族自治州"}, {"adcode": "532900","name": "大理白族自治州"}, {"adcode": "533100","name": "德宏傣族景颇族自治州"}, {"adcode": "533300","name": "怒江傈僳族自治州"}, {"adcode": "533400","name": "迪庆藏族自治州"}]
}, {"name": "浙江","city": [{"adcode": "330100","name": "杭州"}, {"adcode": "330200","name": "宁波"}, {"adcode": "330300","name": "温州"}, {"adcode": "330400","name": "嘉兴"}, {"adcode": "330500","name": "湖州"}, {"adcode": "330600","name": "绍兴"}, {"adcode": "330700","name": "金华"}, {"adcode": "330800","name": "衢州"}, {"adcode": "330900","name": "舟山"}, {"adcode": "331000","name": "台州"}, {"adcode": "331100","name": "丽水"}]
},{"name": "上海","city": [{"adcode": "310000","name": "上海市区"}]},{"name": "重庆","city": [{"adcode": "500000","name": "重庆市区"}]},{"name": "北京","city": [{"adcode": "110000","name": "北京市区"}]}
]

二、点击区域下钻事件： click事件:myChart.on('click', params => {});

      // 解绑click事件myChart.off("click");//给地图添加监听事件myChart.on('click', params => {//let alladcode=require('@/assets/all.json')if(alladcode){let clickRegion = alladcode.filter(areaJson => areaJson.name === params.name);let clickRegionCode;if(clickRegion){clickRegionCode=clickRegion[0].adcode;}else{clickRegionCode=410000;}let regionGeoJson=this.getGeoJson(clickRegionCode + '_full.json');this.$emit('setName',params.name)this.initMapChart(regionGeoJson, params.name, myChart, clickRegion[0].city)}})

三、点击外部空白区域返回上一级：myChart.getZr().on('click', params=>{});

      myChart.getZr().on('click', params => {if(params.target) {//画布非空白区return;} else {//画布空白区 返回上一级let alladcode=require('@/assets/all_henan.json')let regionGeoJson=this.getGeoJson(410000 + '_full.json');this.$emit('setName','河南省')this.initMapChart(regionGeoJson, '河南省', myChart, alladcode)}});

四、完整代码

CenterCmp.vue

<template><div class="center-cmp"><div class="map" ref="mapChart" style="width: 4.166667rem /* 800/192 */;height:2.59375rem /* 498/192 */;"></div></div>
</template><script>
export default {name: 'CenterCmp',components: {},data () {return {config: {data: [ ],color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],lineWidth: 30,radius: '55%',activeRadius: '60%'},alladcode:[],publicUrl:'//geo.datav.aliyun.com/areas_v3/bound/',labelConfig: {data: ['收费站', '监控中心', '道路外场', '其他']}}},methods: {initChart: function () {const echarts = require('echarts')const el = this.$refs.mapChartconst chart = echarts.init(el)let alladcode =  require('@/assets/all_henan.json')let chinaGeoJson =  require('@/assets/410000_full.json')this.initMapChart(chinaGeoJson, '河南省', chart, alladcode)},//获取地图json数据getGeoJson (jsonName) {// this.$axios.get(this.publicUrl + jsonName).then(result => {//   return  result;return require('@/assets/'+jsonName)// })},initMapChart (geoJson, name, chart, alladcode) {//geoJson = require('@/assets/410000_full_xuchang.json')const el = this.$refs.mapChartconst echarts = require('echarts')const myChart = echarts.init(el)echarts.registerMap('geo', geoJson)const option = {// 这里渲染地图// 数据映射visualMap: {type: 'piecewise', // 分段标签min: 0, // 最小值max: 50, // 最大值，不设置为无限大right: 30, // 距离右侧位置bottom: 30, // 距离底部位置orient: 'vertical', // 组件竖直放置align: 'left', // 色块在左textGap: 14, // 文字主体之间的距离itemSymbol: 'circle', // 右下角映射组件使用圆点形状show: true,seriesIndex: 0, // 指定取哪个系列的数据(series.data)，若不设置则会影响图上标点颜色设置。// 一以下是分段式视觉映射组件的每一段的范围// gt：大于、gte：大于等于、lt：小于、lte：小于等于。textStyle:{color:'#fff'//文字颜色},pieces: [{gt: 5,label: '5个以上',color: '#1492FF',//图元颜色},{gte: 2,lte: 5,label: '2-5个',color: '#59AAF5'},{gte: 0,lt: 2,label: '0-2个',color: '#99CBF9'}]/*pieces或者inRange内设置颜色试验时都能生效，个人认为需要传入组件控制颜色时再选择用inRange，两个都存在并给予不同的颜色，显示以pieces为主。*/},geo: {map: 'geo', // 上面引入的数据名show: true,roam: false, // 关闭拖拽label: {show: true,color: '#fff',fontSize: 15},itemStyle: {areaColor: '#1492FF', // 地图区域的颜色(没有数据时会按照这个颜色显示)borderColor: '#fff', // 地图区域的边框borderWidth: 0.6},emphasis: { // 高亮的显示设置label: {color: '#fff'},itemStyle: {areaColor: '#9DE3FF'}},select: { // 选中显示设置label: {color: '#fff'},itemStyle: {areaColor: '#9DE3FF'}}},series: [// 配置数据的显示{type: 'map', // 类型mapgeoIndex: 0, // 指定geo属性后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。data: [ ]},// 以下配置了图中白色标记圆点的显示{type: 'scatter', // 类型：散点coordinateSystem: 'geo', // 使用地理坐标系itemStyle: {color: {type: 'radial', // 径向渐变，前三个参数分别是圆心 x, y 和半径x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0.5,color: '#fff' // 50% 处的颜色},{offset: 1,color: 'rgb(0 0 0 / 0%)' // 100% 处的颜色}],global: false // 缺省为 false},borderColor: '#fff', // 边框白色borderWidth: 1 // 边框宽度},symbolSize: 10, // 散点大小data: [ ],zlevel: 1}]}myChart.setOption(option)myChart.getZr().on('click', params => {if(params.target) {//画布非空白区return;} else {//画布空白区 返回上一级let alladcode=require('@/assets/all_henan.json')let regionGeoJson=this.getGeoJson(410000 + '_full.json');this.$emit('setName','河南省')this.initMapChart(regionGeoJson, '河南省', myChart, alladcode)}});// 解绑click事件myChart.off("click");//给地图添加监听事件myChart.on('click', params => {//let alladcode=require('@/assets/all.json')if(alladcode){let clickRegion = alladcode.filter(areaJson => areaJson.name === params.name);let clickRegionCode;if(clickRegion){clickRegionCode=clickRegion[0].adcode;}else{clickRegionCode=410000;}let regionGeoJson=this.getGeoJson(clickRegionCode + '_full.json');this.$emit('setName',params.name)this.initMapChart(regionGeoJson, params.name, myChart, clickRegion[0].city)}})window.addEventListener('resize', function () {myChart.resize()})}},mounted () {this.initChart()}
}
</script><style lang='less'>
.center-cmp {width: 4.166667rem /* 800/192 */;height: 3.125rem /* 600/192 */;// width: 100%;// height: 100%;margin: 0px;padding: 0px;display: flex;flex-direction: column;.cc-header {height: .364583rem /* 70/192 */;display: flex;justify-content: space-between;align-items: center;font-size: .15625rem /* 30/192 */;}.cc-details {height: .625rem /* 120/192 */;display: flex;justify-content: center;font-size: .166667rem /* 32/192 */;align-items: center;.card {background-color: rgba(4,49,128,.6);color: #08e5ff;height: .364583rem /* 70/192 */;width: .364583rem /* 70/192 */;font-size: .234375rem /* 45/192 */;font-weight: bold;line-height: .364583rem /* 70/192 */;text-align: center;margin: .052083rem /* 10/192 */;}}.cc-main-container {position: relative;flex: 1;display: flex;.ccmc-middle {width: 50%;height: 90%;.active-ring-name {font-size: .104167rem /* 20/192 */ !important;}}.ccmc-left, .ccmc-right {width: 25%;display: flex;flex-direction: column;justify-content: center;font-size: .125rem /* 24/192 */;span {font-size: .208333rem /* 40/192 */;font-weight: bold;}.station-info {height: 80px;display: flex;align-items: center;}}.ccmc-left {align-items: flex-end;span {margin-left: .104167rem /* 20/192 */;}}.ccmc-right {align-items: flex-start;span {margin-right: .104167rem /* 20/192 */;}}}.label-tag {position: absolute;width: 2.604167rem /* 500/192 */;height: .15625rem /* 30/192 */;bottom: .052083rem /* 10/192 */;left: 50%;transform: translateX(-50%);}
}
</style>

使用echarts绘制geo地图相关推荐

使用Echarts绘制geo地图（案例）
使用Echarts绘制geo地图(案例) 项目使用@vue/cli 4.5.13以及echarts版本为5.1.2. 需求:在省份地图上,将数据进行分段映射.如图: 首先下载geojson数据链接: ...
vue中用echarts 绘制geo 中国地图
前言由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
Echarts绘制各省地图
Echarts 绘制全国地图近期工作需要用到echarts制作省内地图,研究了一番,好多人写的很模糊不好理解,我这里写个菜鸟教程记录一下. 在页面引入 jquery.js h和echarts.js ...
不习惯的 Vue3 起步六の Echarts绘制下钻地图
序看过一些可视化大屏展示地图的例子,准备动手做做. 既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图使用: Vue3 Vite Typescript echarts 实现效果: 准 ...
Echarts — 绘制省级地图
版本:vue@3.0.5 + echarts@5.1.2 本文将介绍如何使用 echarts 绘制一个省级地图(以江西省为例) 一.安装 echarts npm i echarts --save-de ...
echarts引入geo地图数据，前端学习记录01
最近遇到项目需要使用使用geoJson数据在echarts上进行地图的绘制,仅使用此文记录学习的过程. 首先需要在项目中引入echart相关依赖,在package.json中添加如下依赖: " ...

使用echarts绘制geo地图