NodeV14.20.0安装

# 历史版本Node下载地址
https://nodejs.org/en/download/prebuilt-installer

# NodeV14.20.0配置与部署
https://nodejs.org/dist/v14.20.0/node-v14.20.0-x64.msi

---

构建默认Vue3工程目录

npm install -g @vue/cli --registry=https://registry.npm.taobao.org
vue create china --registry=https://registry.npm.taobao.org# 选择Vue3初始化项目
> Default ([Vue 3] babel, eslint)

---

安装依赖

cd chinanpm install -s axios@1.7.5 --registry=https://registry.npm.taobao.org
npm install -s echarts@5.5.1 --registry=https://registry.npm.taobao.org
npm install -s element-plus@2.8.1 --registry=https://registry.npm.taobao.org
npm install -s vue-router@4.4.3 --registry=https://registry.npm.taobao.org

---

目录配置

china   
├── package.json
├── package-lock.json
├── src
│       └── main.js
|       └── App.vue
|       └── router
|              └── index.js
|		└── components
|              └── ChinaMap.vue

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

<!-- App.vue -->
<template><ChinaMap/>
</template><script>
import ChinaMap from './components/ChinaMap.vue'export default {name: 'App',components: {ChinaMap}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

<!-- components/ChinaMap.vue -->
<template><div><el-button type="primary" @click="returnParent">返回上一级</el-button><div style="width:1920px;height:1080px" ref="chartsDOM"></div></div></template><script>
import * as echarts from "echarts";
import axios from 'axios';
import router from "@/router";export default {name: 'ChinaMap',mounted() {this.init('100000', 'china');},data() {return {mapChart: null,adcode: 100000}},methods: {init(adcode, mapName) {const _this = this;console.log('init:\t' + adcode);this.adcode = adcode;let mapJsonData;if (this.mapChart) this.mapChart.dispose();// 初始化统计图对象this.mapChart = echarts.init(this.$refs["chartsDOM"]);// 显示 loading 动画this.mapChart.showLoading();// 获取数据并进行地图绘制axios.get('https://geo.datav.aliyun.com/areas_v3/bound/' + adcode + '_full.json').then(res => {mapJsonData = res.data;// 关闭动画_this.mapChart.hideLoading();// 注册地图数据echarts.registerMap(mapName, mapJsonData);// echarts.registerMap(mapName, JSON.parse(JSON.stringify(mapJsonData)));let option = {series: [{name: '中国地图',type: 'map',map: mapName,// 此处map的内容与echarts.registerMap中自定义的名字一直label: {show: true}}]};_this.mapChart.setOption(option, this.mapChart.on("click", function clickMap(params) {// console.log(params.name)// console.log(JSON.stringify(mapJsonData.features))let features = mapJsonData.features;const adcode = features.filter((item) => {return item.properties.name === params.name;})[0].properties.adcode;console.log(adcode);if ((adcode + '').endsWith("00")) {router.push({});_this.init(adcode, adcode + '');}}));})},returnParent() {console.log(this.adcode)const _this = this;if ((this.adcode + '').endsWith("0000")) {router.push({});const adcodeTemp = 100000;const mapNameTemp = adcodeTemp + '' + new Date().getTime();console.log(adcodeTemp);console.log(mapNameTemp);router.push({});_this.init(adcodeTemp, mapNameTemp);} else {const adcodeTemp = (this.adcode + '').substr(0, 2) + '0000';const mapNameTemp = adcodeTemp + '' + new Date().getTime();console.log(adcodeTemp);console.log(mapNameTemp);router.push({});_this.init(adcodeTemp, mapNameTemp);}}}
}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

<!-- router/index.js -->
import {createRouter, createWebHistory} from 'vue-router'const router = createRouter({history: createWebHistory(),routes: [{path: '/',name: 'chinaMap',component: () => import("@/components/ChinaMap")}]
})export default router

---

编译运行

npm install --registry=https://registry.npm.taobao.org

npm run serve

---

效果展示