vue+echarts 地图实现三级下钻

html代码

1.  
   <!-- 中下图表 -->
2.  
   <div class="centerBOT centerdiv" style="position: relative;">
3.  
   <div class="top">
4.  
   <div class="span" :class="[index==1?'active':'']" @click="all(1)">地图</div>
5.  
   <div class="span" :class="[index==2?'active':'']" @click="all(2)">机构</div>
6.  
   </div>
7.  
   <el-button size="mini" type="primary" @click="backMap()" class="btn" v-if="index==1" style="position: absolute; right: 5%;z-index: 999;">返回概览</el-button
8.  
   >
9.  
   <div class="left" ref="myEcharts" style="width:100%;height:100%" v-show="index==1">
10.  
    </div>
11.  
    <div v-show="index==2"> 我是一个盒子，我不知道我该装些什么</div>
12.  
     
13.  
    </div>

引入(npm i 下载对应的依赖包  echarts版本是5.3的)

1.  
   import * as echarts from "echarts";
2.  
   import $ from "jquery";
3.  
    

js代码

1.  
   mounted() {
2.  
   this.getlist()
3.  
   setTimeout(()=>{
4.  
   this.mapChart()
5.  
   },500)
6.  
   },
7.  
   data() {
8.  
   return {
9.  
   allData:[]
10.  
    };
11.  
    }
12.  
    methods: {
13.  
    // 返回第一级
14.  
    backMap() {
15.  
    this.mapChart();
16.  
    },
17.  
    all(value){
18.  
    this.index=value
19.  
    },
20.  
    // 配置渲染map
21.  
    mapChart() {
22.  
    console.log('我渲染了中国地图')
23.  
    let that = this
24.  
    let myChart = echarts.init(this.$refs.myEcharts);
25.  
    // 监听 页面发生 变化
26.  
    window.addEventListener("resize", () => {
27.  
    myChart.resize();
28.  
    });
29.  
     
30.  
    // 渲染首页地图
31.  
    $.getJSON(`/map/china.json`, (data) => {
32.  
    console.log(data,'数据')
33.  
    // 注册
34.  
    echarts.registerMap('china', data);
35.  
    // 渲染
36.  
    initEcharts('china');
37.  
    });
38.  
     
39.  
    //将数据渲染上去
40.  
    function initEcharts(map) {
41.  
    let option = {
42.  
    // 悬浮数据
43.  
    tooltip: {
44.  
    show: true,
45.  
    formatter: function(params) {
46.  
    if (params.data) return params.name '：' params.data['value']
47.  
    },
48.  
    },
49.  
    // 左侧图表值联动
50.  
    visualMap: {
51.  
    type: 'continuous',
52.  
    text: ['多', '少'],
53.  
    showLabel: true,
54.  
    left: '30',
55.  
    bottom:'70',
56.  
    min: 0,
57.  
    max: 8,
58.  
    inRange: {
59.  
    color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]
60.  
    },
61.  
    splitNumber: 0
62.  
    },
63.  
    // 定义数据来源
64.  
    series: [
65.  
    {
66.  
    name: '人数',
67.  
    type: 'map',
68.  
    mapType: map,
69.  
    zoom: 1.2,
70.  
    selectedMode: 'false',//是否允许选中多个区域
71.  
    label: {
72.  
    normal: {
73.  
    show: true
74.  
    },
75.  
    emphasis: {
76.  
    show: true
77.  
    }
78.  
    },
79.  
    data: that.allData
80.  
    }
81.  
    ]
82.  
     
83.  
    };
84.  
    myChart.setOption(option);
85.  
    }
86.  
     
87.  
    //定义全国省份的数组
88.  
    var provinces = {
89.  
    // 23个省
90.  
    台湾: "taiwan",
91.  
    河北: "hebei",
92.  
    山西: "shanxi",
93.  
    辽宁: "liaoning",
94.  
    吉林: "jilin",
95.  
    黑龙江: "heilongjiang",
96.  
    江苏: "jiangsu",
97.  
    浙江: "zhejiang",
98.  
    安徽: "anhui",
99.  
    福建: "fujian",
100.  
     江西: "jiangxi",
101.  
     山东: "shandong",
102.  
     河南: "henan",
103.  
     湖北: "hubei",
104.  
     湖南: "hunan",
105.  
     广东: "guangdong",
106.  
     海南: "hainan",
107.  
     四川: "sichuan",
108.  
     贵州: "guizhou",
109.  
     云南: "yunnan",
110.  
     陕西: "shanxi1",
111.  
     甘肃: "gansu",
112.  
     青海: "qinghai",
113.  
     // 5个自治区
114.  
     新疆: "xinjiang",
115.  
     广西: "guangxi",
116.  
     内蒙古: "neimenggu",
117.  
     宁夏: "ningxia",
118.  
     西藏: "xizang",
119.  
     // 4个直辖市
120.  
     北京: "beijing",
121.  
     天津: "tianjin",
122.  
     上海: "shanghai",
123.  
     重庆: "chongqing",
124.  
     // 2个特别行政区
125.  
     香港: "xianggang",
126.  
     澳门: "aomen",
127.  
     };
128.  
      
129.  
     // 市
130.  
     var cityMap = {
131.  
     北京市: "110100",
132.  
     天津市: "120100",
133.  
     上海市: "310100",
134.  
     重庆市: "500100",
135.  
     崇明县: "310200",
136.  
     湖北省直辖县市: "429000",
137.  
     铜仁市: "522200",
138.  
     毕节市: "522400",
139.  
     石家庄市: "130100",
140.  
     唐山市: "130200",
141.  
     秦皇岛市: "130300",
142.  
     邯郸市: "130400",
143.  
     邢台市: "130500",
144.  
     保定市: "130600",
145.  
     张家口市: "130700",
146.  
     承德市: "130800",
147.  
     沧州市: "130900",
148.  
     廊坊市: "131000",
149.  
     衡水市: "131100",
150.  
     太原市: "140100",
151.  
     大同市: "140200",
152.  
     阳泉市: "140300",
153.  
     长治市: "140400",
154.  
     晋城市: "140500",
155.  
     朔州市: "140600",
156.  
     晋中市: "140700",
157.  
     运城市: "140800",
158.  
     忻州市: "140900",
159.  
     临汾市: "141000",
160.  
     吕梁市: "141100",
161.  
     呼和浩特市: "150100",
162.  
     包头市: "150200",
163.  
     乌海市: "150300",
164.  
     赤峰市: "150400",
165.  
     通辽市: "150500",
166.  
     鄂尔多斯市: "150600",
167.  
     呼伦贝尔市: "150700",
168.  
     巴彦淖尔市: "150800",
169.  
     乌兰察布市: "150900",
170.  
     兴安盟: "152200",
171.  
     锡林郭勒盟: "152500",
172.  
     阿拉善盟: "152900",
173.  
     沈阳市: "210100",
174.  
     大连市: "210200",
175.  
     鞍山市: "210300",
176.  
     抚顺市: "210400",
177.  
     本溪市: "210500",
178.  
     丹东市: "210600",
179.  
     锦州市: "210700",
180.  
     营口市: "210800",
181.  
     阜新市: "210900",
182.  
     辽阳市: "211000",
183.  
     盘锦市: "211100",
184.  
     铁岭市: "211200",
185.  
     朝阳市: "211300",
186.  
     葫芦岛市: "211400",
187.  
     长春市: "220100",
188.  
     吉林市: "220200",
189.  
     四平市: "220300",
190.  
     辽源市: "220400",
191.  
     通化市: "220500",
192.  
     白山市: "220600",
193.  
     松原市: "220700",
194.  
     白城市: "220800",
195.  
     延边朝鲜族自治州: "222400",
196.  
     哈尔滨市: "230100",
197.  
     齐齐哈尔市: "230200",
198.  
     鸡西市: "230300",
199.  
     鹤岗市: "230400",
200.  
     双鸭山市: "230500",
201.  
     大庆市: "230600",
202.  
     伊春市: "230700",
203.  
     佳木斯市: "230800",
204.  
     七台河市: "230900",
205.  
     牡丹江市: "231000",
206.  
     黑河市: "231100",
207.  
     绥化市: "231200",
208.  
     大兴安岭地区: "232700",
209.  
     南京市: "320100",
210.  
     无锡市: "320200",
211.  
     徐州市: "320300",
212.  
     常州市: "320400",
213.  
     苏州市: "320500",
214.  
     南通市: "320600",
215.  
     连云港市: "320700",
216.  
     淮安市: "320800",
217.  
     盐城市: "320900",
218.  
     扬州市: "321000",
219.  
     镇江市: "321100",
220.  
     泰州市: "321200",
221.  
     宿迁市: "321300",
222.  
     杭州市: "330100",
223.  
     宁波市: "330200",
224.  
     温州市: "330300",
225.  
     嘉兴市: "330400",
226.  
     湖州市: "330500",
227.  
     绍兴市: "330600",
228.  
     金华市: "330700",
229.  
     衢州市: "330800",
230.  
     舟山市: "330900",
231.  
     台州市: "331000",
232.  
     丽水市: "331100",
233.  
     合肥市: "340100",
234.  
     芜湖市: "340200",
235.  
     蚌埠市: "340300",
236.  
     淮南市: "340400",
237.  
     马鞍山市: "340500",
238.  
     淮北市: "340600",
239.  
     铜陵市: "340700",
240.  
     安庆市: "340800",
241.  
     黄山市: "341000",
242.  
     滁州市: "341100",
243.  
     阜阳市: "341200",
244.  
     宿州市: "341300",
245.  
     六安市: "341500",
246.  
     亳州市: "341600",
247.  
     池州市: "341700",
248.  
     宣城市: "341800",
249.  
     福州市: "350100",
250.  
     厦门市: "350200",
251.  
     莆田市: "350300",
252.  
     三明市: "350400",
253.  
     泉州市: "350500",
254.  
     漳州市: "350600",
255.  
     南平市: "350700",
256.  
     龙岩市: "350800",
257.  
     宁德市: "350900",
258.  
     南昌市: "360100",
259.  
     景德镇市: "360200",
260.  
     萍乡市: "360300",
261.  
     九江市: "360400",
262.  
     新余市: "360500",
263.  
     鹰潭市: "360600",
264.  
     赣州市: "360700",
265.  
     吉安市: "360800",
266.  
     宜春市: "360900",
267.  
     抚州市: "361000",
268.  
     上饶市: "361100",
269.  
     济南市: "370100",
270.  
     青岛市: "370200",
271.  
     淄博市: "370300",
272.  
     枣庄市: "370400",
273.  
     东营市: "370500",
274.  
     烟台市: "370600",
275.  
     潍坊市: "370700",
276.  
     济宁市: "370800",
277.  
     泰安市: "370900",
278.  
     威海市: "371000",
279.  
     日照市: "371100",
280.  
     莱芜市: "371200",
281.  
     临沂市: "371300",
282.  
     德州市: "371400",
283.  
     聊城市: "371500",
284.  
     滨州市: "371600",
285.  
     菏泽市: "371700",
286.  
     郑州市: "410100",
287.  
     开封市: "410200",
288.  
     洛阳市: "410300",
289.  
     平顶山市: "410400",
290.  
     安阳市: "410500",
291.  
     鹤壁市: "410600",
292.  
     新乡市: "410700",
293.  
     焦作市: "410800",
294.  
     濮阳市: "410900",
295.  
     许昌市: "411000",
296.  
     漯河市: "411100",
297.  
     三门峡市: "411200",
298.  
     南阳市: "411300",
299.  
     商丘市: "411400",
300.  
     信阳市: "411500",
301.  
     周口市: "411600",
302.  
     驻马店市: "411700",
303.  
     省直辖县级行政区划: "469000",
304.  
     武汉市: "420100",
305.  
     黄石市: "420200",
306.  
     十堰市: "420300",
307.  
     宜昌市: "420500",
308.  
     襄阳市: "420600",
309.  
     鄂州市: "420700",
310.  
     荆门市: "420800",
311.  
     孝感市: "420900",
312.  
     荆州市: "421000",
313.  
     黄冈市: "421100",
314.  
     咸宁市: "421200",
315.  
     随州市: "421300",
316.  
     恩施土家族苗族自治州: "422800",
317.  
     长沙市: "430100",
318.  
     株洲市: "430200",
319.  
     湘潭市: "430300",
320.  
     衡阳市: "430400",
321.  
     邵阳市: "430500",
322.  
     岳阳市: "430600",
323.  
     常德市: "430700",
324.  
     张家界市: "430800",
325.  
     益阳市: "430900",
326.  
     郴州市: "431000",
327.  
     永州市: "431100",
328.  
     怀化市: "431200",
329.  
     娄底市: "431300",
330.  
     湘西土家族苗族自治州: "433100",
331.  
     广州市: "440100",
332.  
     韶关市: "440200",
333.  
     深圳市: "440300",
334.  
     珠海市: "440400",
335.  
     汕头市: "440500",
336.  
     佛山市: "440600",
337.  
     江门市: "440700",
338.  
     湛江市: "440800",
339.  
     茂名市: "440900",
340.  
     肇庆市: "441200",
341.  
     惠州市: "441300",
342.  
     梅州市: "441400",
343.  
     汕尾市: "441500",
344.  
     河源市: "441600",
345.  
     阳江市: "441700",
346.  
     清远市: "441800",
347.  
     东莞市: "441900",
348.  
     中山市: "442000",
349.  
     潮州市: "445100",
350.  
     揭阳市: "445200",
351.  
     云浮市: "445300",
352.  
     南宁市: "450100",
353.  
     柳州市: "450200",
354.  
     桂林市: "450300",
355.  
     梧州市: "450400",
356.  
     北海市: "450500",
357.  
     防城港市: "450600",
358.  
     钦州市: "450700",
359.  
     贵港市: "450800",
360.  
     玉林市: "450900",
361.  
     百色市: "451000",
362.  
     贺州市: "451100",
363.  
     河池市: "451200",
364.  
     来宾市: "451300",
365.  
     崇左市: "451400",
366.  
     海口市: "460100",
367.  
     三亚市: "460200",
368.  
     三沙市: "460300",
369.  
     成都市: "510100",
370.  
     自贡市: "510300",
371.  
     攀枝花市: "510400",
372.  
     泸州市: "510500",
373.  
     德阳市: "510600",
374.  
     绵阳市: "510700",
375.  
     广元市: "510800",
376.  
     遂宁市: "510900",
377.  
     内江市: "511000",
378.  
     乐山市: "511100",
379.  
     南充市: "511300",
380.  
     眉山市: "511400",
381.  
     宜宾市: "511500",
382.  
     广安市: "511600",
383.  
     达州市: "511700",
384.  
     雅安市: "511800",
385.  
     巴中市: "511900",
386.  
     资阳市: "512000",
387.  
     阿坝藏族羌族自治州: "513200",
388.  
     甘孜藏族自治州: "513300",
389.  
     凉山彝族自治州: "513400",
390.  
     贵阳市: "520100",
391.  
     六盘水市: "520200",
392.  
     遵义市: "520300",
393.  
     安顺市: "520400",
394.  
     黔西南布依族苗族自治州: "522300",
395.  
     黔东南苗族侗族自治州: "522600",
396.  
     黔南布依族苗族自治州: "522700",
397.  
     昆明市: "530100",
398.  
     曲靖市: "530300",
399.  
     玉溪市: "530400",
400.  
     保山市: "530500",
401.  
     昭通市: "530600",
402.  
     丽江市: "530700",
403.  
     普洱市: "530800",
404.  
     临沧市: "530900",
405.  
     楚雄彝族自治州: "532300",
406.  
     红河哈尼族彝族自治州: "532500",
407.  
     文山壮族苗族自治州: "532600",
408.  
     西双版纳傣族自治州: "532800",
409.  
     大理白族自治州: "532900",
410.  
     德宏傣族景颇族自治州: "533100",
411.  
     怒江傈僳族自治州: "533300",
412.  
     迪庆藏族自治州: "533400",
413.  
     拉萨市: "540100",
414.  
     昌都地区: "542100",
415.  
     山南地区: "542200",
416.  
     日喀则地区: "542300",
417.  
     那曲地区: "542400",
418.  
     阿里地区: "542500",
419.  
     林芝地区: "542600",
420.  
     西安市: "610100",
421.  
     铜川市: "610200",
422.  
     宝鸡市: "610300",
423.  
     咸阳市: "610400",
424.  
     渭南市: "610500",
425.  
     延安市: "610600",
426.  
     汉中市: "610700",
427.  
     榆林市: "610800",
428.  
     安康市: "610900",
429.  
     商洛市: "611000",
430.  
     兰州市: "620100",
431.  
     嘉峪关市: "620200",
432.  
     金昌市: "620300",
433.  
     白银市: "620400",
434.  
     天水市: "620500",
435.  
     武威市: "620600",
436.  
     张掖市: "620700",
437.  
     平凉市: "620800",
438.  
     酒泉市: "620900",
439.  
     庆阳市: "621000",
440.  
     定西市: "621100",
441.  
     陇南市: "621200",
442.  
     临夏回族自治州: "622900",
443.  
     甘南藏族自治州: "623000",
444.  
     西宁市: "630100",
445.  
     海东地区: "632100",
446.  
     海北藏族自治州: "632200",
447.  
     黄南藏族自治州: "632300",
448.  
     海南藏族自治州: "632500",
449.  
     果洛藏族自治州: "632600",
450.  
     玉树藏族自治州: "632700",
451.  
     海西蒙古族藏族自治州: "632800",
452.  
     银川市: "640100",
453.  
     石嘴山市: "640200",
454.  
     吴忠市: "640300",
455.  
     固原市: "640400",
456.  
     中卫市: "640500",
457.  
     乌鲁木齐市: "650100",
458.  
     克拉玛依市: "650200",
459.  
     吐鲁番地区: "652100",
460.  
     哈密地区: "652200",
461.  
     昌吉回族自治州: "652300",
462.  
     博尔塔拉蒙古自治州: "652700",
463.  
     巴音郭楞蒙古自治州: "652800",
464.  
     阿克苏地区: "652900",
465.  
     克孜勒苏柯尔克孜自治州: "653000",
466.  
     喀什地区: "653100",
467.  
     和田地区: "653200",
468.  
     伊犁哈萨克自治州: "654000",
469.  
     塔城地区: "654200",
470.  
     阿勒泰地区: "654300",
471.  
     自治区直辖县级行政区划: "659000",
472.  
     台湾省: "710000",
473.  
     香港特别行政区: "810100",
474.  
     澳门特别行政区: "820000",
475.  
     };
476.  
     // 点击事件情况
477.  
     myChart.off('click');
478.  
      
479.  
     // 点击触发查找省或市的数据
480.  
     myChart.on("click", (param) => {
481.  
     console.log("触发了", param);
482.  
     if (param.name in provinces) {
483.  
     // 处理省模块
484.  
     let names = param.name;
485.  
     for (let key in provinces) {
486.  
     if (names == key) {
487.  
     showProvince(provinces[key], key);
488.  
     break;
489.  
     }
490.  
     }
491.  
     } else if (param.name in cityMap) {
492.  
     // 处理市模块
493.  
     let names = param.name;
494.  
     for (let key in cityMap) {
495.  
     if (names == key) {
496.  
     showCitys(cityMap[key], key);
497.  
     break;
498.  
     }
499.  
     }
500.  
     }
501.  
     });
502.  
      
503.  
     //展示对应的省
504.  
     function showProvince(eName, param) {
505.  
     console.log(eName, param);
506.  
     $.getJSON(`/map/province/${eName}.json`, (data) => {
507.  
     console.log(data.value,'省id数据')
508.  
     //请求接口数据
509.  
     that.date.province=data.value
510.  
     //请求接口
511.  
     that.getlist(that.date)
512.  
      
513.  
     setTimeout(()=>{
514.  
     echarts.registerMap(param, data);
515.  
     initEcharts(param);
516.  
     },500)
517.  
      
518.  
     });
519.  
     }
520.  
      
521.  
     //展示对应市
522.  
     function showCitys(cName, param) {
523.  
     console.log(cName, param);
524.  
     // 显示县级地图
525.  
     $.getJSON(`/map/city/${cName}.json`, (data) => {
526.  
     console.log(data,'市下区的数据')
527.  
     //请求接口数据
528.  
     that.date.city=data.cName
529.  
     //请求接口
530.  
     that.getlist(that.date)
531.  
      
532.  
     setTimeout(()=>{
533.  
     echarts.registerMap(param, data);
534.  
     initEcharts(param);
535.  
     },500)
536.  
      
537.  
     });
538.  
     }
539.  
      
540.  
      
541.  
     }
542.  
      
543.  
     }

在项目里的pulic 中定义地图文件（压缩包文件个人主页下载）

这篇好文章是转载于：学新通技术网