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 china
npm 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
效果展示