使用Vue3 + Echarts实现中国地图的绘制

效果图展示

效果描述

使用Echarts绘制中国地图，每个省份按照其下第一级市区的数量进行颜色的渲染，渲染范围为【0,40】，点击省份的时候页面将会变为该省份的地图，点击省份下的市区页面将会变为该市区的地图，此时点击返回省份按钮，就会回到该省份的地图，点击重置到中国地图按钮，页面将会重新绘制为中国地图。

地图数据来源

DataV.GeoAtlas地理小工具系列 (aliyun.com)https://datav.aliyun.com/portal/school/atlas/area_selector

如果有更好的数据来源的话欢迎评论！！

代码展示

页面渲染

<template>
  <div class="box">
    <div>
      <button @click="resetMap">重置到中国地图</button>
      <button @click="handleBack">返回到省级</button>
    </div>
    <div ref="container" style="width: 100%; flex: 1"></div>
  </div>
  <map></map>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, ref } from "vue";
import getData from "./api";
const container = ref(null);
const chartInstance = ref(null);
const setOption = (options) => {
  chartInstance.value.setOption(options);
};
const place = ref("中国"); //要获取哪个地区的地图数据
const pro = ref("中国"); //上一级地区
// 重置地图到中国
const resetMap = () => {
  place.value = "中国";
  pro.value = "中国";
  getOptions(place.value);
};
// 返回上一级
const handleBack = () => {
  getOptions(pro.value);
  console.log(111, pro.value, place.value);
};
// 点击地图区域时触发的事件，参数 params 包含当前点击的地图区域的信息
const handleMapClick = (params) => {
  pro.value = place.value; //记录上一级地区
  place.value = params.name;
  getOptions(place.value);
  console.log(222, pro.value, place.value);
};
// 获取并设置图表配置项
const getOptions = (val) => {
  getData(val).then((res) => {
    chartInstance.value.hideLoading();
    echarts.registerMap("ZG", res.data);
    let option = {
      visualMap: {
        min: 0,
        max: 40,
        calculable: false, //是否显示拖拽用的手柄，设置成true后可以拖拽数据
        realTime: true, //拖拽时，是否实时更新
        inRange: {
          color: ["#FFFFE0", "#E6E6FA", "lightskyblue", "#90EE90", "#ff6363"],
        },
      },
      //提示框组件配置项
      tooltip: {
        trigger: "item", //触发类型
        formatter: function (params) {
          //提示内容【省份名称】以及其下有多少个市区
          return `${params.name}<br/>下设区域：${params.data.value}`;
        },
      },
      series: [
        {
          name: "中国地图",
          type: "map",
          map: "ZG",
          label: {
            show: true,
          },
          // 添加 data 属性，并为每个区域指定数据值
          data: res.data.features.map((item) => ({
            name: item.properties.name, // 地图区域的名称
            value: item.properties.childrenNum, // 地图区域的数据值
          })),
        },
      ],
    };
    setOption(option);
  });
};

onMounted(() => {
  chartInstance.value = echarts.init(container.value);
  chartInstance.value.showLoading();
  getOptions(place.value);
  // 添加点击事件监听器
  chartInstance.value.on("click", handleMapClick);
  window.onresize = () => {
    chartInstance.value.resize();
  };
});
onUnmounted(() => {
  // 页面销毁的时候，让地图实例也销毁
  if (chartInstance.value) {
    chartInstance.value.dispose();
  }
});
</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  text-align: right;
}
button {
  padding: 0 10px;
  width: fit-content;
  height: 50px;
  border-radius: 20px;
}
</style>

地区数据

import axios from 'axios'
const base = "https://geo.datav.aliyun.com/areas_v3/bound/"

let city = ""

function getData(params) {
  if (params.includes('中国')) { city = "100000_full.json" }
  // 省份
  else if (params.includes('北京')) { city = '110000_full.json' }
  else if (params.includes('东城')) { city = '110101.json' }
  else if (params.includes('西城')) { city = '110102.json' }
  else if (params.includes('朝阳区')) { city = '110105.json' }
  else if (params.includes('丰台')) { city = '110106.json' }
  else if (params.includes('石景山')) { city = '110107.json' }
  else if (params.includes('海淀')) { city = '110108.json' }
  else if (params.includes('顺义')) { city = '110113.json' }
  else if (params.includes('通州')) { city = '110112.json' }
  else if (params.includes('大兴')) { city = '110115.json' }
  else if (params.includes('房山')) { city = '110111.json' }
  else if (params.includes('门头沟')) { city = '110109.json' }
  else if (params.includes('昌平')) { city = '110114.json' }
  else if (params.includes('平谷')) { city = '110117.json' }
  else if (params.includes('密云')) { city = '110118.json' }
  else if (params.includes('怀柔')) { city = '110116.json' }
  else if (params.includes('延庆')) { city = '110119.json' }

  else if (params.includes('天津')) { city = '120000_full.json' }
  else if (params.includes('和平')) { city = '120101.json' }
  else if (params.includes('河东')) { city = '120102.json' }
  else if (params.includes('河西')) { city = '120103.json' }
  else if (params.includes('南开')) { city = '120104.json' }
  else if (params.includes('河北')) { city = '120105.json' }
  else if (params.includes('红桥')) { city = '120106.json' }
  else if (params.includes('东丽')) { city = '120110.json' }
  else if (params.includes('西青')) { city = '120111.json' }
  else if (params.includes('津南')) { city = '120112.json' }
  else if (params.includes('北辰')) { city = '120113.json' }
  else if (params.includes('武清')) { city = '120114.json' }
  else if (params.includes('宝坻')) { city = '120115.json' }
  else if (params.includes('滨海新')) { city = '120116.json' }
  else if (params.includes('宁河')) { city = '120117.json' }
  else if (params.includes('静海')) { city = '120118.json' }
  else if (params.includes('蓟州')) { city = '120119.json' }

  else if (params.includes('河北')) { city = '130000_full.json' }
  else if (params.includes('石家庄')) { city = '130100_full.json' }
  else if (params.includes('唐山')) { city = '130200_full.json' }
  else if (params.includes('秦皇岛')) { city = '130300_full.json' }
  else if (params.includes('邯郸')) { city = '130400_full.json' }
  else if (params.includes('邢台')) { city = '130500_full.json' }
  else if (params.includes('保定')) { city = '130600_full.json' }
  else if (params.includes('张家口')) { city = '130700_full.json' }
  else if (params.includes('承德')) { city = '130800_full.json' }
  else if (params.includes('沧州')) { city = '130900_full.json' }
  else if (params.includes('廊坊')) { city = '131000_full.json' }
  else if (params.includes('衡水')) { city = '131100_full.json' }

  else if (params.includes('山西')) { city = '140000_full.json' }
  else if (params.includes('太原')) { city = '140100_full.json' }
  else if (param