echarts map地图动态下钻,自定义标注,自定义tooltip弹窗【完整demo版本】

最新推荐文章于 2025-07-10 11:25:25 发布

Q_Q 忙里偷闲

最新推荐文章于 2025-07-10 11:25:25 发布

阅读量1.6k

点赞数 29

CC 4.0 BY-SA版权

分类专栏： # echarts 专栏 # vue2&vue3 常用示例专栏文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_36410795/article/details/142320745

在数据可视化中，地图是很重要的一个环节，很多时候需要展现的不仅是国家地图，还需要能从国家进入到省市。这个逐级进入的过程就是我们今天说的地图下钻。
地图下钻看起来很屌、很高大上，但是仔细琢磨一下，技术实现上真的很简单。

1. 本章主要功能介绍

自定义标注样式&自定义tooltip弹窗样式（上章内容） echarts 自定义标注样式&自定义tooltip弹窗样式
自定义地图贴图样式（上章内容）echarts 实现中国geo地图自定义贴图实例
下拉菜单选择切换地图省份（本章核心）
点击地图切换地图省份（本章核心）
进入全屏/退出全屏（其他）

1. 地图下钻实现思路（本章核心）

mounted 里面首先初始化一个中国地图的数据，provinceCode默认为100000
创建echarts实例，获取中国地图的 geoJSON 数据
拿到geoJSON 数据调用initEcharts函数区创建echarts
geoJSON 数据对echarts进行渲染上图
上图完成后，通过 this.myChart.on("click",()=>{}) 事件活动点击的对象，params.name 可以拿到点击的省份名称，修改 provinceCode 值为点击的省份
监听 provinceCode 改变，重新执行第一递归循环即可

2. 下钻代码实现（本章核心）

在这里插入图片描述

3. 完整代码

3.1 vue部分

<template>
  <div class="map">
    <div class="navProvince">
      <select
        v-model="provinceCode"
        @change="changeProvince($event.target.value)"
      >
        <option
          :value="item.code"
          v-for="(item, index) in provinceData()"
          :key="index"
        >
          {
  
  { item.name }}
        </option>
      </select>
      <img src="@/assets/img/dataView/down.webp" alt="" srcset="" />
    </div>
    <div class="navBase" v-if="baseId">
      <select v-model="baseId" @change="changeBaseId($event.target.value)">
        <option
          :value="item.baseId"
          v-for="(item, index) in baseData"
          :key="index"
        >
          {
  
  { item.name }}
        </option>
      </select>
      <img src="@/assets/img/dataView/down.webp" alt="" srcset="" />
    </div>
    <div
      class="screen"
      @click="toggleFullScreen"
      :title="isFullscreen ? '退出全屏' : '进入全屏'"
    >
      <img src="@/assets/img/dataView/screen.webp" alt="" srcset="" />
      <span>{
  
  { isFullscreen ? "退出全屏" : "进入全屏" }}</span>
    </div>
    <div ref="myEchart" id="personnel"></div>
  </div>
</template>

<script>
import "echarts-gl"; //3D地图插件
import screenfull from "screenfull";
import axios from "axios";
import {
     
     
  provinceObj,
  provinceData,
  getCodeByName,
  formatHtml,
} from "./js/mapData";
import {
     
      API_listBase } from "@/api/dataView";
import {
     
      mapGetters } from "vuex";
export default {
     
     
  data() {
     
     
    return {
     
     
      provinceData,
      isFullscreen: false,
      publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
      chinaGeoJson: [],
      myChart: null,
      mapImg: null, //地图底色
      mapActiveImg: null, //地图悬浮移入后的底色
      baseData: [], //基地数据
      provinceCode: 100000,
      baseId: "",
    };
  },
  computed: {
     
     
    ...mapGetters({
     
     
      getProvinceCode: "dataView/getProvinceCode",
      getBaseId: "dataView/getBaseId",
    }),
  },
  watch: {
     
     
    provinceCode(_newData, _oldData) {
     
     
      this.provinceCode = _newData;
      this.$store.commit(
        "dataView/SET_PROVINCECODE",
        provinceObj[_newData] == "全国" ? "" : _newData
      );
      this.getList();
    },
  },
  methods: {
     
     
    // 请求三方地图数据接口
    async getGeoJson(jsonName, province) {
     
     
      let res = await axios.get(`${ 
       this.publicUrl}${ 
       jsonName}`);
      if (res && res.status === 200) {
     
     
        this.initEcharts(res.data, province);
      }
    },
    // 加载地图数据
    initEcharts(geoJson, name) {
     
     
      this.$echarts.registerMap(name, geoJson);
      let option =