Vue+Echart实现地图省市区三级下钻

采用在线地图数据，整体简约，扩展也方便

参考

<template><div><div ref="mapContainer" style="width: 100%; height: 600px;"></div><button @click="goBack">返回上一级</button></div>
</template><script>
import * as echarts from 'echarts';
import axios from 'axios';
import router from '../router';export default {name: 'ChinaMap',data() {return {currentLevel: 'china',  // 当前显示的地图层级levelStack: [],          // 地图层级栈coordinates: [          // 标记点坐标{ name: '北京', value: [116.405285, 39.904989] },{ name: '上海', value: [121.473701, 31.230416] }]};},mounted() {this.loadMapData();},watch: {'$route.query.code': function () {// 当路由参数变化时重新加载地图数据this.loadMapData();}},methods: {goBack() {router.push({ query: { code: this.$route.query.fromCode } });},async loadMapData() {try {const adcode = this.$route.query.code || '100000';  // 默认加载中国地图// 获取 geoJSON 数据const response = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`);const chinaGeoJson = response.data;// 注册地图echarts.registerMap(adcode, chinaGeoJson);// 提取 adcode 映射表const adcodeMap = this.extractAdcodeMap(chinaGeoJson);// 初始化 ECharts 实例const chart = echarts.init(this.$refs.mapContainer);// 配置项const option = {title: {text: '中国地图',left: 'center'},tooltip: {trigger: 'item',formatter: function (params) {const adcode = adcodeMap[params.name] || '未知';return `${params.name}<br>adcode: ${adcode}`;}},visualMap: {min: 0,max: 100000,text: ['High', 'Low'],calculable: true},series: [{name: '数值',type: 'map',map: adcode,  // 使用 adcode 作为地图名称roam: true,itemStyle: {areaColor: '#d3d3d3',  // 默认区域颜色borderColor: '#111',   // 边框颜色borderWidth: 1         // 边框宽度},emphasis: {focus: 'self',itemStyle: {areaColor: '#f4e925'  // 高亮颜色}},data: [{ name: '北京市', value: 500, adcode: '110000' },{ name: '上海市', value: 11300, adcode: '310000' },{ name: '云南省', value: 300, adcode: '530000' },{ name: '广东省', value: 300, adcode: '440000' },// 其他省份的数据]},]};// 使用配置项设置图表chart.setOption(option);// 监听点击事件chart.on('click', (params) => {const adcode = adcodeMap[params.name];if (adcode) {this.levelStack.push(this.currentLevel);  // 记录当前层级this.currentLevel = adcode;  // 更新当前层级router.push({ query: { code: adcode, fromCode: this.$route.query.code } });}});} catch (error) {console.error('Failed to load map data:');}},extractAdcodeMap(geoJson) {const adcodeMap = {};geoJson.features.forEach(feature => {const name = feature.properties.name;const adcode = feature.properties.adcode;if (name && adcode) {adcodeMap[name] = adcode;}});return adcodeMap;}}
}
</script>

效果

省级

市级

县级