使用echarts绘制geo地图
作者：互联网
我这里实现的是河南省的地图 点击要下钻的区域展示相应区域的地图，点击地图外部空白处返回上一级。
一、准备geojson数据
下载需要的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.mapChart
const 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.mapChart
const 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', // 类型map
geoIndex: 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>
标签：city,name,geo,adcode,myChart,192,json,绘制,echarts 来源： https://blog.csdn.net/qq_35269556/article/details/123027781