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

实现效果如果:
请添加图片描述
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([]); // 记录历史点击的省市区,用于返回查询// 获取地图数据
const getMapData = async (code) => {const data = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json`).then((res) => {mapList.value = [];if (res.status === 200) {// 获取当前选中的省市区的所有名称和编码res.data.features.forEach((item) => {mapList.value.push(item.properties);});renderChart(currentMapName.value, res.data);}}).catch(() => {});return data;
};// 渲染地图
const renderChart = (mapName, mapData) => {// 注册: registerMap('地图名称', 地图数据), 地图名称须和option里面的map一致echarts.registerMap(mapName, mapData);// 地图配置项const option = {// 提示浮窗样式tooltip: {show: true,trigger: "item",alwaysShowContent: false,backgroundColor: "#0C121C",borderColor: "rgba(0, 0, 0, 0.16);",hideDelay: 100,triggerOn: "mousemove",enterable: true,textStyle: {color: "#DADADA",},showDelay: 100,formatter: (params) => {return params.name;},},series: [{type: "map",map: mapName, // 地图名称data: [],zoom: "1.1", // 当前视角的缩放比例label: {show: true, // 是否显示省份名字},roam: false, // 是否开启缩放和平移itemStyle: {borderColor: "#F59A23", // 边界线颜色borderType: "dashed", // 边界线类型},// 设置鼠标移上去高亮的样式emphasis: {itemStyle: {borderColor: "#34AEAE",areaColor: "#CCEBEB",borderType: "solid",},},},],};// 渲染initChinaMap.value.setOption(option);// 防止多次触发click事件,重要!!!initChinaMap.value.off("click");// 下钻initChinaMap.value.on("click", (params) => {const activeItem = mapList.value.find((item) => item.name == params.name);// 判断有子级的时候才可以下钻if (activeItem && activeItem.adcode && activeItem.childrenNum) {historyInfo.value.push(activeItem);currentMapName.value = params.name;getMapData(activeItem.adcode);}});
};onMounted(() => {initChinaMap.value = echarts.init(mapChartRef.value);getMapData(initAdCode.value);
});// 返回上一级
const goBack = () => {const lastItem = historyInfo.value.pop();if (lastItem && lastItem.parent && lastItem.parent.adcode) {getMapData(lastItem.parent.adcode);}
};
</script><style scoped>
.mapWrapper {width: 700px;height: 600px;padding: 10px;border: 1px dashed orange;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/20704.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一步步实现知乎热榜采集:Scala与Sttp库的应用

背景 在大数据时代&#xff0c;网络爬虫技术发挥着不可或缺的作用。它不仅能够帮助我们快速地获取互联网上的信息&#xff0c;还能处理和分析这些数据&#xff0c;为我们提供深刻的洞察。知乎&#xff0c;作为中国领先的问答社区&#xff0c;汇聚了各行各业的专家和广大用户的…

深入解析力扣172题:阶乘后的零(计算因子5的方法详解及模拟面试问答)

在本篇文章中&#xff0c;我们将详细解读力扣第172题“阶乘后的零”。通过学习本篇文章&#xff0c;读者将掌握如何使用多种方法来解决这一问题&#xff0c;并了解相关的复杂度分析和模拟面试问答。每种方法都将配以详细的解释和ASCII图解&#xff0c;以便于理解。 问题描述 …

【LeetCode刷题】二分查找:寻找旋转排序数组中的最小值、点名

【LeetCode刷题】Day 14 题目1&#xff1a;153.寻找旋转排序数组中的最小值思路分析&#xff1a;思路1&#xff1a;二分查找&#xff1a;以A为参照思路2&#xff1a;二分查找&#xff0c;以D为参照 题目2&#xff1a;LCR 173.点名思路分析&#xff1a;思路1&#xff1a;遍历查找…

(2024,Flag-DiT,文本引导的多模态生成,SR,统一的标记化,RoPE、RMSNorm 和流匹配)Lumina-T2X

Lumina-T2X: Transforming Text into Any Modality, Resolution, and Duration via Flow-based Large Diffusion Transformers 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 …

使用Streamlit和MistralAI创建AI聊天机器人应用

大家好&#xff0c;创建交互式和用户友好型的应用程序通常需要复杂的框架和耗时的开发过程。Streamlit是一个Python库&#xff0c;它简化了以数据为重点的网络应用程序的创建过程&#xff0c;使开发人员和数据科学家能够快速将他们的想法转化为交互式仪表盘和原型。本文将介绍使…

『 Linux 』文件系统

文章目录 磁盘构造磁盘抽象化 磁盘的寻址方式磁盘控制器磁盘数据传输文件系统Inode数据块(Data Blocks)超级块(SuperBlock)块组描述符(Group Descriptor) 磁盘构造 磁盘内部构造由磁头臂,磁头,主轴,盘片,盘面,磁道,柱面,扇区构成; 磁头臂&#xff1a;控制磁头的移动,可以精确地…

100道面试必会算法-28-排序链表

100道面试必会算法-28-排序链表 链表排序是一个常见的算法问题&#xff0c;通常要求将一个无序的链表按照升序排列。针对这个问题&#xff0c;我们可以使用归并排序算法&#xff0c;因为归并排序在链表结构中表现出色&#xff0c;具有O(n log n)的时间复杂度&#xff0c;并且能…

人工智能(AI)的发展:从过去到未来的演进

人工智能&#xff08;AI&#xff09;作为当今科技领域的热门话题&#xff0c;其发展历程、当前应用以及未来趋势都备受关注。从最初的简单计算到如今的深度学习、自然语言处理&#xff0c;AI技术已经取得了巨大的进步&#xff0c;并正在逐渐改变我们的世界。本文将回顾AI的发展…

vs2019 QT UI 添加新成员或者控件代码不提示问题解决方法

右键点击头文件&#xff0c;添加ui的头文件 添加现有项 找到uic目录的头文件 打开ui,QtWidgetsApplication2.ui,进行测试 修改一个名字&#xff1a; 重点&#xff1a; 设置一个布局&#xff1a; 点击生成解决方案&#xff1a; 以后每次添加控件后&#xff0c;记得点击保存 这样…

flink 作业报日志类冲突的解决方案

文章目录 背景思考初步解决方案深入思考下终极解决方案总结 背景 实时作业在页面提交任务后&#xff0c;报NoSuchMethodException 方法&#xff0c;看了下是关于log4j的&#xff0c;首先是作业升级了很多依赖的版本&#xff0c;其次flink 也升级 到了1.19版本 思考 打的Jar有…

C#实现winform中渲染图的展示

在WinForms中实现图形的渲染展示&#xff0c;可以使用GDI绘图技术。下面是一个简单的示例&#xff0c;演示如何在WinForms中展示一个圆形图形&#xff0c;并根据用户输入的半径动态改变圆的大小&#xff1a; 请在Visual Studio中创建一个WinForms应用程序&#xff0c;并将以下…

c# 笔记 多个checkbox 点击其一个设置为选择状态 其他则为非选择状态 c# WndProc方法 base.WndProc(ref m);

多个checkbox 点击其一个设置为选择状态 其他则为非选择状态 在一个 CheckBox 被选中时将其他 CheckBox 设置为未选中状态。这可以通过循环遍历 CheckBox 控件并根据当前选中的 CheckBox 来设置其状态来实现。 下面是一个示例代码&#xff0c;展示了如何实现这个功能&#xf…

Java 基础面试300题 (171- 200)

Java 基础面试300题 &#xff08;171- 200&#xff09; 171.什么是同步&#xff1f; 当多个线程试图同时访问共享资源时&#xff0c;那么他们需要以某种方式让资源一次只能由一个线程访问。实现这一目标的过程被称为同步。Java提供了一个名为synchronized的关键字实现这一目标…

CSS选择器的常见用法

大家好&#xff0c;本期博客整理了前端语言 CSS 中选择器的入门级常见用法&#xff0c;希望能对大家有所帮助 CSS 选择器的主要功能就是选中⻚⾯指定的标签元素&#xff0c;选中了元素&#xff0c;才可以设置元素的属性。 那么&#xff0c;css选择器有哪几种呢&#xff1f; 以…

全面理解渗透测试

揭秘网络安全的秘密武器&#xff1a;全面理解渗透测试 在数字化时代&#xff0c;网络安全已成为人们关注的焦点。网络攻击和数据泄露事件频发&#xff0c;给个人、企业和国家带来了巨大的损失。为了应对这一挑战&#xff0c;渗透测试作为一种重要的网络安全评估手段&#xff0…

Docker-----emqx部署

emqx通过Docker容器化部署流程 1.创建持久化挂载目录 mkdir -p /home/emqx/etc ------挂载emqx的配置文件目录 mkdir -p /home/emqx/data ------挂载emqx的存储目录 mkdir -p /home/emqx/log ------挂载emqx的日志目录 [root home]# mkdir -p /home/emqx/etc [root home]# mkd…

【Redis】 使用Java操作Redis的客户端

文章目录 &#x1f343;前言&#x1f334;项目的创建&#x1f38b;引入依赖&#x1f333;配置端⼝转发&#x1f332;更改 Redis 配置文件&#x1f384;连接 Redis Server⭕总结 &#x1f343;前言 我们使用 Java 操作 Redis 客户端时我们需要进行以下操作。 注意&#xff1a;J…

Wormhole勒索病毒的最新威胁:如何恢复您的数据?

导言 随着互联网的飞速发展&#xff0c;网络安全问题愈发凸显其重要性。近年来&#xff0c;勒索病毒成为了网络安全领域的一大威胁&#xff0c;其中.Wormhole勒索病毒因其独特的传播方式和强大的破坏性&#xff0c;引起了全球范围内的广泛关注。本文91数据恢复旨在深入探讨.Wo…

Linux上部署和安装MinIO

&#x1f341; 作者&#xff1a;知识浅谈&#xff0c;CSDN签约讲师&#xff0c;CSDN博客专家&#xff0c;华为云云享专家&#xff0c;阿里云专家博主 &#x1f4cc; 擅长领域&#xff1a;全栈工程师、爬虫、ACM算法&#xff0c;大数据&#xff0c;深度学习 &#x1f492; 公众号…

架构师如何以打游戏的心态做开发?

为什么打游戏可以很好玩&#xff0c;能够自发学习&#xff0c;从青铜到黄金很简单。换个角度思考&#x1f914;&#xff0c;以打游戏的心态如何进行架构开发&#xff0c;可以采用以下策略&#xff1a; 设定目标和里程碑&#xff1a; 就像游戏中的任务和关卡一样&#xff0c;为…