Vue+Echarts 实现青岛自定义样式地图
一、效果
二、代码
<template><div class="chart-box"><chart ref="chartQingdao" style="width: 100%; height: 100%;" :options="options" autoresize></chart></div>
</template>
<script>
import Chart from "vue-echarts"
import { qingdao_bg, marker } from '../images/index.js'export default {components: {chart: Chart},data () {return {timer: null,index: -1,regionList: [{value: '370202',name: '市南区'},{value: '370203',name: '市北区'},{value: '370211',name: '黄岛区'},{value: '370212',name: '崂山区'},{value: '370213',name: '李沧区'},{value: '370214',name: '城阳区'},{value: '370215',name: '即墨区'},{value: '370281',name: '胶州市'},{value: '370283',name: '平度市'},{value: '370285',name: '莱西市'}],options: {}}},computed: {mapJson() {return require(`./370200.json`);},maxIndex () {return this.regionList.length-1;}},watch: {index (val) {if(val>-1) {this.$refs.chartQingdao.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: this.index});}}},methods: {async draw () {let image = document.createElement('img'), symbol = document.createElement('img');image.src = qingdao_bg; //主体地图星空一样的背景(若背景未覆盖主体地图全部,一、调整背景图片大小;二、调整主体地图的aspectScale、layoutSize值)symbol.src = marker; //每个地图区域的iconChart.registerMap('qingdao', this.mapJson);this.options = {tooltip: { //鼠标移至地图区域,区域详情的展示设置axisPointer: {type: 'none'},padding: 0,position: (point) => {return [point[0], point[1]];},backgroundColor: 'rgba(50, 50, 50, 0)',className: 'custom-tooltip-box',formatter: (params) => {return '<div class="custom-tooltip-box">'+ params.name+'</div>';}},geo: [{ //最上层我们看到的地图主体map: "qingdao",aspectScale: 0.75, layoutSize: '80%',layoutCenter: ['52%', '50%'],zoom: 1,roam: false},{ //主体地图的粗边框(实际我觉得并没有效果)map: "qingdao",aspectScale: 0.75, layoutSize: '80%',layoutCenter: ['52%', '50%'],zoom: 1,roam: false,silent: true,itemStyle: {borderColor: '#63E9F2',borderWidth: 5}},{ //主体地图后的地图影子map: "qingdao",aspectScale: 0.75, layoutSize: '84%',layoutCenter: ['52%', '51%'],zoom: 1,roam: false,silent: true,itemStyle: {areaColor: '#012D57',borderColor: '#areaColor',borderWidth: 1},emphasis: {itemStyle: {areaColor: '#012D57',borderColor: '#areaColor',borderWidth: 1}}}],series: [{type: 'map',mapType: 'qingdao',aspectScale: 0.75,layoutSize: '80%',layoutCenter: ['52%', '50%'],zoom: 1,roam: false, label: {normal: {show: true,formatter: (params) => {return `{marker| }\n\n{name| ${params.name}}`;},rich: {marker: {width: 24,height: 30,backgroundColor: {image: symbol}},name: {fontFamily: 'PingFangSC',fontSize: 18,fontWeight: 600,color: '#C6DFFF'}}},emphasis: {color: 'rgba(0, 0, 0, 0)'}},itemStyle: {areaColor: {image: image,repeat: 'no-repeat'},borderColor: '#63E9F2',borderWidth: 1,shadowBlur: 29,shadowColor: 'rgba(73, 150, 255, 0.5)'},emphasis: {itemStyle: {areaColor: {image: image,repeat: 'no-repeat'}}},data: this.regionList}]};this.$nextTick(() => {this.switchRegion();this.setTimer();this.$refs.chartQingdao.chart.on('mouseover', (params) => {this.$emit('switch-region', {active: String(params.value),header: `${params.name}参保征缴情况`});this.clearTimer();});this.$refs.chartQingdao.chart.on('mouseout', () => {this.setTimer();});});},switchRegion () {this.index===this.maxIndex?this.index=0:this.index++;this.$emit('switch-region', {active: this.regionList[this.index].value,header: `${this.regionList[this.index].name}参保征缴情况`});},setTimer () { //轮播地图区域,展示区域详情的定时器let _this = this;this.timer = setInterval(() => {_this.switchRegion();}, 5000);},clearTimer () {clearInterval(this.timer);this.timer = null;}},mounted () {this.draw();},destroyed() {this.clearTimer();}
}
</script>
<style scoped lang="less">
.chart-box{width: 100%;height: 630px;
}
/deep/ .custom-tooltip-box {width: 316px;height: 123px;padding-left: 110px;background-image: url('../images/tooltip_bg.png');font-family: 'PingFangSC';font-size: 20px;font-weight: 600;line-height: 148px;text-align: center;color: #B5F1FF;
}
</style>
三、代码引用资源下载地址
https://download.csdn.net/download/hrcsdn13/90325739
相关文章:

Vue+Echarts 实现青岛自定义样式地图
一、效果 二、代码 <template><div class"chart-box"><chart ref"chartQingdao" style"width: 100%; height: 100%;" :options"options" autoresize></chart></div> </template> <script> …...

Java教程练习:学生信息管理系统
文章目录 学生管理系统1、需求文档需求分析 2、新建学生实体类3、实现基本菜单和退出功能4、查询和添加4.1 查询学生信息4.2 添加学生信息 5、修改和删除5.1 删除功能实现5.2 修改功能实现 完整代码下载 学生管理系统 1、需求文档 需求 采取控制台的方式书写学生管理系统。 …...

书生大模型实战营4
文章目录 L0——入门岛玩转HF/魔搭/魔乐社区HF 平台1 注册2 InternLM模型下载3 GitHub CodeSpace的使用4 Hugging Face Spaces的使用5 模型上传 魔搭社区平台简介创建开发机环境配置 下载指定多个文件上传模型 魔乐社区平台下载internlm2_5-chat-1_8b模型上传模型 始智AI平台下…...

麒麟操作系统服务架构保姆级教程(十四)iptables防火墙四表五链和防火墙应用案例
如果你想拥有你从未拥有过的东西,那么你必须去做你从未做过的事情 防火墙在运维工作中有着不可或缺的重要性。首先,它是保障网络安全的关键防线,通过设置访问控制规则,可精准过滤非法网络流量,有效阻挡外部黑客攻击、恶…...

8. 网络编程
网络的基本概念 TCP/IP协议概述 OSI和TCP/IP模型 socket(套接字) 创建socket 字节序 字节序转换函数 通用地址结构 因特网地址结构 IPV4地址族和字符地址间的转换(点分十进制->网络字节序) 填写IPV4地址族结构案例 掌握TCP协议网络基础编程 相关函数 …...
C++并发编程指南04
文章目录 共享数据的问题3.1.1 条件竞争双链表的例子条件竞争示例恶性条件竞争的特点 3.1.2 避免恶性条件竞争1. 使用互斥量保护共享数据结构2. 无锁编程3. 软件事务内存(STM) 总结互斥量与共享数据保护3.2.1 互斥量使用互斥量保护共享数据示例代码&…...

常见的同态加密算法收集
随着对crypten与密码学的了解,我们将逐渐深入学习相关知识。今天,我们将跟随同态加密的发展历程对相关算法进行简单的收集整理 。 目录 同态加密概念 RSA算法 ElGamal算法 ELGamal签名算法 Paillier算法 BGN方案 Gentry 方案 BGV 方案 BFV 方案…...

深入探讨数据库索引类型:B-tree、Hash、GIN与GiST的对比与应用
title: 深入探讨数据库索引类型:B-tree、Hash、GIN与GiST的对比与应用 date: 2025/1/26 updated: 2025/1/26 author: cmdragon excerpt: 在现代数据库管理系统中,索引技术是提高查询性能的重要手段。当数据量不断增长时,如何快速、有效地访问这些数据成为了数据库设计的核…...

记录 | Docker的windows版安装
目录 前言一、1.1 打开“启用或关闭Windows功能”1.2 安装“WSL”方式1:命令行下载方式2:离线包下载 二、Docker Desktop更新时间 前言 参考文章:Windows Subsystem for Linux——解决WSL更新速度慢的方案 参考视频:一个视频解决D…...

AI智慧社区--生成验证码
接口文档: 从接口文档中可以得知的信息: 代码的返回格式为json格式,可以将Controlller换为RestController前端发起的请求为Get请求,使用注解GetMapping通过返回的数据类型,定义一个返回类型Result package com.qcby.…...
2501,20个窗口常用操作
窗口是屏幕上的一个矩形区域.窗口分为3种:覆盖窗口,弹窗和子窗口.每个窗口都有由系统绘画的"非客户区"和应用绘画的"客户区". 在MFC中,CWnd类为各种窗口提供了基类. 1,通过窗柄取得CWnd指针 可调用Cwnd::FromHandle函数,通过窗柄取得Cwnd指针. void CD…...
【gopher的java学习笔记】一文讲懂controller,service,mapper,entity是什么
刚开始上手Java和Spring时,就被controller,service,mapper,entity这几个词搞懵了,搞不懂这些究竟代表什么,感觉使用golang开发的时候也没太接触过这些名词啊~ 经过两三个月的开发后,逐渐搞懂了这…...

消息队列篇--通信协议篇--STOMP(STOMP特点、格式及示例,WebSocket上使用STOMP,消息队列上使用STOMP等)
STOMP(Simple Text Oriented Messaging Protocol,简单面向文本的消息传递协议)是一种轻量级、基于文本的协议,旨在为消息代理(消息队列)和客户端之间的通信(websocket)提供一种简单的…...

基于SpringBoot的租房管理系统(含论文)
基于SpringBoot的租房管理系统是一个集订单管理、房源信息管理、屋主申诉处理、用户反馈等多项功能于一体的系统。该系统通过SpringBoot框架开发,拥有完善的管理员后台、屋主管理模块、用户功能模块等,适用于房地产租赁平台或中介公司进行日常管理与运营…...

提升企业内部协作的在线知识库架构与实施策略
内容概要 在当前快速变化的商业环境中,企业对于提升内部协作效率的需求愈显迫切。在线知识库作为信息存储与共享的平台,成为了推动企业数字化转型的重要工具。本文将深入探讨如何有效打造与实施在线知识库,强调架构设计、知识资产分类管理及…...

【物联网】ARM核常用指令(详解):数据传送、计算、位运算、比较、跳转、内存访问、CPSR/SPSR、流水线及伪指令
文章目录 指令格式(重点)1. 立即数2. 寄存器位移 一、数据传送指令1. MOV指令2. MVN指令3. LDR指令 二、数据计算指令1. ADD指令1. SUB指令1. MUL指令 三、位运算指令1. AND指令2. ORR指令3. EOR指令4. BIC指令 四、比较指令五、跳转指令1. B/BL指令2. l…...
Jackson中@JsonTypeId的妙用与实例解析
在日常的Java开发中,Jackson库是处理JSON数据的常用工具。其中,JsonTypeId注解是一个非常实用的功能,它可以帮助我们更好地控制多态类型信息在序列化过程中的表现。今天,我们就来深入探讨一下JsonTypeId的用法,并通过具…...

Ubuntu 顶部状态栏 配置,gnu扩展程序
顶部状态栏 默认没有配置、隐藏的地方 安装使用Hide Top Bar 或Just Perfection等进行配置 1 安装 sudo apt install gnome-shell-extension-manager2 打开 安装的“扩展管理器” 3. 对顶部状态栏进行配置 使用Hide Top Bar 智能隐藏,或者使用Just Perfection 直…...

Java---入门基础篇(上)
前言 本片文章主要讲了刚学Java的一些基础内容,例如注释,标识符,数据类型和变量,运算符,还有逻辑控制等,记录的很详细,带你从简单的知识点再到练习题.如果学习了c语言的小伙伴会发现,这篇文章的内容和c语言大致相同. 而在下一篇文章里,我会讲解方法和数组的使用,也是Java中基础…...
Linux C++
一、引言 冯诺依曼架构是现代计算机系统的基础,它的提出为计算机的发展奠定了理论基础。在学习 C 和 Linux 系统时,理解冯诺依曼架构有助于我们更好地理解程序是如何在计算机中运行的,包括程序的存储、执行和资源管理。这对于编写高效、可靠的…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来
一、破局:PCB行业的时代之问 在数字经济蓬勃发展的浪潮中,PCB(印制电路板)作为 “电子产品之母”,其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透,PCB行业面临着前所未有的挑战与机遇。产品迭代…...

React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...

遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...

对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...