【vue3 + Echarts 】中国地图省市区下钻，并返回上级

英子的搬砖日志

于 2024-05-31 14:59:50 发布

阅读量3k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： vue web前端文章标签： echarts 前端 javascript 地图绘制前端地图 vue3+echarts 地图省市区级联

本文链接：https://blog.csdn.net/ganyingxie123456/article/details/139352596

实现效果如果：
请添加图片描述
echarts版本：
在这里插入图片描述

地图数据来源：阿里云数据可视化平台
在这里插入图片描述

代码

<template>
  <div class="mapWrapper">
    <a-button type="primary" @click="goBack">返回上级</a-button>
    <div ref="mapChartRef" style="height: 100%; width: 100%"></div>
  </div>
</template>

<script setup>
import axios from "axios";
import {
   
    ref, onMounted } from "vue";
import * as echarts from "echarts";

const mapChartRef = ref();
const initChinaMap = ref();
const initAdCode = ref(100000); // 默认中国地图的编码
const currentMapName = ref("中国"); // 默认地图的名称
const mapList = ref([]); // 当前展示的省市区所有数据
const historyInfo = ref([]); // 记录历史点击的省市区，用于返回查询<