Echarts中国地图省市区县三级联动

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

---

效果展示