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 系统时,理解冯诺依曼架构有助于我们更好地理解程序是如何在计算机中运行的,包括程序的存储、执行和资源管理。这对于编写高效、可靠的…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...