echarts地图详解
获取地图坐标json数据
<template><div id="china-map" style="width:500px;height:500px"></div>
</template>
<script>import * as echarts from 'echarts';// 坐标jsonimport chinaJson from "@/assets/china.json"
export default {name: 'ChinaMap',data() {return {mapData:[{ name: '北京', value: 120, value2: 1230, warn: 10, problem: 12 },{ name: '天津', value: 1230, value2: 10, warn: 10, problem: 12 },{ name: '河北', value: 1230, value2: 10, warn: 10, problem: 12 },{ name: '山西', value: 11140, value2: 10, warn: 10, problem: 12 },{ name: '内蒙古', value: 11120, value2: 20 },{ name: '辽宁', value: 1110, value2: 320 },{ name: '吉林', value: 1110, value2: 420 },{ name: '黑龙江', value: 1230, value2: 230 },{ name: '上海', value: 5312, value2: 0 },{ name: '江苏', value: 1230, value2: 0 },{ name: '浙江', value: 9440, value2: 1230 },{ name: '安徽', value: 8550, value2: 0 },{ name: '福建', value: 1660, value2: 0 },{ name: '江西', value: 33770, value2: 0 },{ name: '山东', value: 8880, value2: 0 },{ name: '河南', value: 4480, value2: 340 },{ name: '湖北', value: 21190, value2: 0 },{ name: '湖南', value: 12800, value2: 340 },{ name: '广东', value: 87110, value2: 10 },{ name: '广西', value: 17220, value2:20 },{ name: '海南', value: 87330, value2: 0 },{ name: '重庆', value: 66440, value2: 220 },{ name: '四川', value: 45550, value2: 220 },{ name: '贵州', value: 33660, value2: 330 },{ name: '云南', value: 98770, value2: 440 },{ name: '西藏', value: 6880, value2: 440 },{ name: '陕西', value: 33990, value2: 550 },{ name: '甘肃', value: 31310, value2: 550 },{ name: '青海', value: 44410, value2: 440 },{ name: '宁夏', value: 44120, value2: 6660 },{ name: '新疆', value: 55320, value2: 660 },{ name: '台湾', value: 44430, value2: 4430 },{ name: '香港', value: 3540, value2: 3330 },{ name: '澳门', value: 2640, value2: 4440 },{ name: '南海诸岛', value: 1750, value2: 5550 },],distributionColor:[{gte: 50000,color: "#103076",},{gte: 40000,lt: 50000,color: "#133782",},{gte: 30000,lt: 40000,color: "#124D99",},{gte: 20000,lt: 30000,color: "#1067B3",},{gte: 10000,lt: 20000,color: "#0C86CC",},{gte: 5000,lt: 10000,color: "#07AAE6",},{gte: 0,lt: 5000,color: "#05D4FF",},]}},mounted() {this.init()})},methods: {init(){let that = thisvar chartDom = document.getElementById('china-map');var myChart = echarts.init(chartDom);echarts.registerMap('china', chinaJson );let option = {tooltip: {backgroundColor: 'rgba(51,11,131,0.76)',formatter(params, ticket, callback) {let value = params.value;let datas = option.series.data;if (Array.isArray(value)) {// 鼠标移到涟漪点上不显示浮层return "";}if (value === undefined) {// 鼠标移到路线上不显示浮层return "";}if (isNaN(value)) {value = 0;}// htmlStr 是鼠标经过时显示的弹窗内容和样式 let htmlStr = `<div style='display: flex;align-items: center;justify-content: space-between;'><div><span style='font-weight: 500;font-size: 12px;color: #FFFFFF;margin-right:20px;'>设备数量</span></div><span style='font-weight: 400;font-size: 14px;color: #FFDA4C;font-family: OptimizedTitleBlack;'>${value + params["data"].value2}</span></div><div style='display: flex;align-items: center;justify-content: space-between;'><span style='font-weight: 500;font-size: 12px;color: #FFFFFF;margin-right:20px;'>运行中设备数量</span><span style='font-weight: 400;font-size: 14px;color: #3BF243;font-family: OptimizedTitleBlack;'>${value}</span></div><div style='display: flex;align-items: center;justify-content: space-between;'><span style='font-weight: 500;font-size: 12px;color: #FFFFFF;margin-right:20px;'>即将到期设备数量</span><span style='font-weight: 400;font-size: 14px;color: #FF858F;font-family: OptimizedTitleBlack;'>${ params["data"].value2}</span></div>`;return htmlStr;}},visualMap: {show: false,left: 20,bottom: 40,showLabel: true,pieces: that.distributionColor,},// geo 区域的颜色也可以被 map series 所控制geo: {show: true, //是否显示最外层边框map: 'china',label: {show: false},roam: false,//是否开启鼠标缩放,会出现两个地图zoom: 1.7, // 地图初始化缩放等级center: [104.05, 35.22], //当前视角的中心点itemStyle: {normal: {shadowColor: "rgba(0,160,233,0.5)",shadowBlur: 2,shadowOffsetY: 1,shadowOffsetX: 1,focus: "none",label: {show: true,},borderWidth: 2, //地图最外层边框borderborderColor:'rgba(0,160,233)',//地图最外层边框border颜色},emphasis: {show: false,// areaColor: '#01215c'}}},series: [{name: '中国地图分布',type: 'map',roam: false,selectedMode: false, // 禁止点击事件zoom: 1.7,center: [104.05, 35.22],map: 'china',emphasis: {label: {color: 'rgba(255, 255, 255, .8)'},itemStyle: {areaColor: null, // 或者其他你想要的黄色,如 #FFFF00borderWidth: 2,borderColor: '#FFC806',}},// 点击事件处理器events: {'click': function (params) {console.log('地图被点击', params);// 在这里处理点击事件,例如弹出窗口或更新数据等}},itemStyle: {normal: {borderColor: "#444",borderWidth: 0.5,}},// select:{ //选中状态的颜色的更改// label: {// color: '#fff'// },// itemStyle:{// areaColor:"#05D4FF",// borderWidth: 2,// borderColor: '#FFC806',// },// },label: {show: true,color: 'rgba(255, 255, 255, .8)',},data: this.mapData,// 自定义名称映射nameMap: {'北京市': '北京','天津市': '天津','河北省': '河北','山西省': '山西','内蒙古自治区': '内蒙古','辽宁省': '辽宁','吉林省': '吉林','黑龙江省': '黑龙江','上海市': '上海','江苏省': '江苏','浙江省': '浙江','安徽省': '安徽','福建省': '福建','江西省': '江西','山东省': '山东','河南省': '河南','湖北省': '湖北','湖南省': '湖南','广东省': '广东','广西壮族自治区': '广西','海南省': '海南','重庆市': '重庆','四川省': '四川','贵州省': '贵州','云南省': '云南','西藏自治区': '西藏','陕西省': '陕西','甘肃省': '甘肃','青海省': '青海','宁夏回族自治区': '宁夏','新疆维吾尔自治区': '新疆','台湾省': '台湾','香港特别行政区': '香港','澳门特别行政区': '澳门','南海诸岛': '南海诸岛'}}]};myChart.setOption(option);myChart.resize()myChart.on('click', function (params) {if (params.componentType === 'series' && params.seriesType === 'map') {console.log('地图被点击', params);}});}}
}
</script>
相关文章:
echarts地图详解
获取地图坐标json数据 <template><div id"china-map" style"width:500px;height:500px"></div> </template> <script>import * as echarts from echarts;// 坐标jsonimport chinaJson from "/assets/china.json" …...
Redis 哨兵模式:告别手动故障转移!
目录 前言一、 Redis哨兵模式是啥?🤔二、 为什么需要哨兵模式?🤷♀️三、 哨兵模式的原理是什么?🤝1. 监控(Monitoring)2. 信息共享与客观下线判断3. 哨兵领导者选举4. 故障转移5.…...
地理数据输出
为了便于数据共享和交换,可以将地理数据库中的要素数据输出为Shapefiles或者Coverage,将相应的属性表输出为Info或者dBase格式的数据文件。 1.输出为 Shapefile (1)在AreCatalog目录树或者内容栏中,右键点击需要输出的地理要素类,…...
springboot + security + redis + jwt 实现验证登录上
前言: 通过实践而发现真理,又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识,又从理性认识而能动地指导革命实践,改造主观世界和客观世界。实践、认识、再实践、再认识,这种形式,循环往…...
SomeIP通讯机制
在SOME/IP协议中,通讯方式主要围绕服务的交互模式进行的设计,核心机制包括Event(时间)、Method(方法)以及其变种Fire-and-Forget(FF)。以下是SOME/IP中所有通信方式的总结࿱…...
线代第三课:n阶行列式
引言 行标取自然排列 不同行不同列的3个元素相乘 列标取排列的所有可能 列标排列的逆序数的奇偶性决定符号,- n阶行列式 第一种:按行展开 (1) 行标取自然排列 (2) 列标取排列的所有可能 (PS:可以理解为随意取) (3) 从…...
人工智能在高中教育中的应用现状剖析与挑战应对
第一章:绪论 1.1 研究背景与意义 随着全球化的加速和科技的飞速发展,高中教育在培养未来社会所需人才方面的重要性日益凸显。高中阶段是学生知识体系构建和思维能力发展的关键时期,然而,当前高中教育面临着诸多挑战,…...
如何在powerbi使用自定义SQL
我们在刚使用到powerbi的时候发现当直接连接到数据库的时候我们只能使用数据库中已存在的表,我们没有办法使用自定义SQL来准备数据,这给我们的开发造成很大的困扰;我目前使用的是vertica数据库,首先我们需要在本地有vertica的驱动…...
边缘计算盒子是什么?
边缘计算盒子是一种小型的硬件设备,通常集成了处理器、存储器和网络接口等关键组件,具备一定的计算能力和存储资源,并能够连接到网络。它与传统的云计算不同,数据处理和分析直接在设备本地完成,而不是上传到云端&#…...
【C++面向对象】封装(上):探寻构造函数的幽微之境
每文一诗 💪🏼 我本将心向明月,奈何明月照沟渠 —— 元/高明《琵琶记》 译文:我本是以真诚的心来对待你,就像明月一样纯洁无瑕;然而,你却像沟渠里的污水一样,对这份心意无动于衷&a…...
物联网|无人自助台球厅源码|哪些框架支持多设备连接?
在无人自助台球厅的智能化管理中,物联网(IoT)技术是核心支撑。如何实现不同设备(如智能门锁、环境传感器、支付终端、灯光控制系统等)的高效连接与协同工作,是系统开发的关键挑战。本文将带大家探讨支持多设…...
单旋翼无人机(直升机)和四旋翼无人机优势对比
以下是无人机直升机(单旋翼无人机)与四旋翼无人机的优势对比分析,分场景阐述两者的核心差异: 一、无人机直升机(单旋翼无人机)的优势 1. 高能量效率,长续航 动力设计:单…...
微服务之间调用外键“翻译”的方法概述
写在前面的话:减少strean流操作,减少多层嵌套for循环。使用普通for循环和map的方式进行转换, 第一步查询数据 List<Student> findList studentDao.findList(findMap); 第二步准备遍历和赋值 if(CollectionUtil.isNotEmpty(findLis…...
Java学习——day25(多线程基础与线程创建方式)
文章目录 1. 多线程基础1.1 线程的概念1.2 线程的生命周期 2. 创建线程的方式2.1 继承 Thread 类2.2 实现 Runnable 接口 3. 实践:编写简单多线程程序4. 总结与思考 1. 多线程基础 1.1 线程的概念 线程 (Thread): 程序执行的最小单元,一个进…...
2025前端面试题
Vue 3 比 Vue 2 更快的原因 Vue 3 使用 JavaScript 的 Proxy 替代了 Vue 2 中的 Object.defineProperty 来实现响应式系统。Proxy 可以拦截对象的所有操作,无需像 Object.defineProperty 那样单独定义每个属性的 getter 和 setterVue 3 还引入了静态树提升…...
2025-04-09 吴恩达机器学习6——神经网络(1):介绍
文章目录 1 神经网络介绍1.1 起源与发展1.2 生物神经元 vs. 人工神经元1.3 学习建议 2 案例:T 恤预测2.1 基础概念2.2 需求预测示例2.3 多隐藏层神经网络2.4 神经网络的优势 3 案例:图像感知3.1 计算机视觉任务3.2 神经网络架构 1 神经网络介绍 1.1 起源…...
Win11新功能更新:中文语音控制、游戏体验提升、锁屏更多广告
近日,微软在Windows 11发布预览版(Insider Release Preview Channel)中公布了即将正式推送的一系列新功能。这些更新体现了微软“持续创新”策略——不再依赖传统大型版本更新,而是以更高频率为用户带来功能改进。这一波新功能覆盖…...
Cursor编程-从入门到精通__0409
早期的Github Copilot 最近更新了,支持Agent编程,字节跳动Trae使用(免费),但成熟程度不如Cursor,Cursor前50次免费 Copilot VS Cursor*** 1,Cursor VSCode 二次开发,IDE级别 2&…...
【Leetcode-Hot100】移动零
题目 解答 首先,使用的解题思路是:使用两个指针,分别指向数组的第一个0元素位置,以该元素位置1为起始点寻找接下来第一个非0元素位置。二者确定后,对其进行交换。随后继续寻找下一个0元素位置。重复上述操作。 但第一…...
【力扣hot100题】(079)划分字母区间
感觉智商又回来了(松气)。 方法大概是先建立哈希表遍历数组记录每一个字母位置的跨度,然后再遍历数组,每次遇到跨度大于目前长度的字母,就将目前长度延申跨度的长度,然后继续遍历,知道位置已经…...
更改CMD背景图片
1.下载microsoft powershell 总之,电脑里面要有microsoft powershell这个应用 如下所示 进入界面后, 依次点击命令提示符和外观。 进入后,修改背景图片 2. 查看最终效果 最终我们打开CMD界面, 然后查看。 最终结果大功告成...
如何利用AI工具进行抠图
软件介绍 AIArty Image Matting是一款AI抠图软件,为了方便大家使用,我已经将软件所需的模型下载好。 首先要进行软件安装并运行,之后将“model”压缩包解压,把解压后的文件复制粘贴到“C:\ProgramData\Aiarty\ImageMatting”文件…...
一个很好用的vue2在线签名组件
在前端开发的日常工作中,我们常常会遇到需要用户进行在线签名的需求,比如电子合同签署、表单确认等场景。最近,我在项目里使用了一款极为好用的 Vue2 在线签名组件,今天就来和大家分享一下使用心得。 效果图 上代码 在 views 下…...
软考高级-系统架构设计师 案例题-软件架构设计
文章目录 软件架构设计质量属性效用树,质量属性判断必背概念架构风格对比MVC架构J2EE四层结构面向服务架构SOA企业服务总线ESB历年真题【问题1】 (12分)【问题2】(13分) 参考答案历年真题【问题1】(12分)【…...
计算机网络笔记-分组交换网中的时延
一、分组交换网络中的四种时延类型 1. 排队时延 在队列中,当分组在链路上等着被传输时的时延为排队时延,一个分组的排队时延长度取决于该分组前方等待传输的分组数量,如果排队队列为空,且没有正在传输的分组那么该分组的排队时延…...
数据结构与算法-图论-复习2(差分约束,强连通分量,二分图,LCA,拓扑排序,欧拉路径和欧拉回路)
7. 差分约束 原理 差分约束系统是一种特殊的不等式组,形如 xi−xj≤c。可以将其转化为图论中的最短路或最长路问题。 最短路求最大值:当我们要找出满足所有不等式的最大解时,使用最短路算法。对于不等式 xi−xj≤c,可以…...
git强制更新本地分支
你的需求是希望 自动拉取所有远程分支,并且在分支间存在冲突时 自动覆盖本地内容(不保留差异)。以下是优化后的解决方案: 最终解决方案(全自动强制覆盖) git fetch --all && for branch in $(git …...
PH热榜 | 2025-04-09
1. EZsite AI 标语:构建能够秒级产生收入的人工智能应用。 介绍:EZsite AI 让任何人都能轻松创建专业的网站和应用,不需要编写代码。它自动保存您的数据库信息,内置的 AI 聊天机器人能帮助您捕获潜在客户,并且通过 A…...
进度管理__制订进度计划_资源平衡和资源平滑
本文讲解的资源平衡与资源平滑,是制订进度计划的工具与技术的第3项: 资源优化。 1. 资源平衡 资源平衡是为了在资源需求与资源供给之间取得平等, 根据资源制约因素对开始日期和完成日期进行调整的一种技术。 如果共享资源或关键资源只在特定…...
【力扣hot100题】(080)爬楼梯
让我们掌声恭迎动态规划的始祖—— 最基础的动态规划,原始方法是维护一个数组,每次记录到该阶梯的方案数量,每次的数量是到上一个阶梯的方案数量加上到上上一阶梯的方案数量,因为只有两种走法。 进阶可以优化空间复杂度…...
redis_exporter服务安装并启动
redis_exporter服务安装并启动 1、介绍2、下载redis_exporter3、解压缩文件4、启动redis_exporter服务 1、介绍 Redis Exporter 是 Prometheus 官方推荐的 Redis 监控数据导出工具,用于将 Redis 实例的性能指标暴露为 Prometheus 可抓取的格式。 2、下载redis_exp…...
Spring Security 的核心配置项详解,涵盖认证、授权、过滤器链、HTTP安全设置等关键配置,结合 Spring Boot 3.x 版本最佳实践
以下是 Spring Security 的核心配置项详解,涵盖认证、授权、过滤器链、HTTP安全设置等关键配置,结合 Spring Boot 3.x 版本最佳实践: 1. 核心注解与配置类 (1) 启动安全配置 // 启动Web安全配置(推荐方式) Configura…...
Spring Boot 3.x 下 Spring Security 的执行流程、核心类和原理详解,结合用户描述的关键点展开说明,并以表格总结
以下是 Spring Boot 3.x 下 Spring Security 的执行流程、核心类和原理详解,结合用户描述的关键点展开说明,并以表格总结: 1. Spring Security 核心原理 Spring Security 通过 Filter 链 实现安全控制,其核心流程如下:…...
[leetcode]判断质数
一.判断质数 1.1 什么是质数 质数(素数)就是只可以被自己和1整除的数叫做素数/质数 1.2判断方法 #include<bits/stdc.h> using namespace std; bool isPrime(int num) { if(num < 1) { return false;//a number less of …...
【结肠息肉AI论文集】Cross-level Feature Aggregation Network for Polyp Segmentation
标注:同样是一期结肠息肉论文写作评鉴 摘要 从结肠镜图像中准确分割息肉在结直肠癌的诊断和治疗中起着关键作用。尽管在息肉分割领域已经取得了一定的成效,但仍存在诸多挑战。息肉通常具有多种大小和形状,并且息肉与其周围区域之间没有明显…...
Redis缓存之预热、击穿、穿透、雪崩
面试切入点 缓存预热 什么是预热? mysql假如新增100条记录,一般默认以mysql为准作为底单数据,如何同步到redis(布隆过滤器),这100条合法数据?? 为什么需要预热? mysql有100条新记录࿰…...
C++字符串复习
C字符串复习 前言 为了保证复习高效,以下不包括很简单的内容,例如cin。 C类型字符、字符串 输入方法 **char c getchar()**输入单个字符 string类型字符串 输入方法 getline(cin, str) 整行输入 常用方法 s.substr(pos, len):截取字…...
centos7安装mysql5.7.44
一、下载 下载地址:https://downloads.mysql.com/archives/community/ 二、安装 1、解压 tar -zxvf mysql-5.7.44-linux-glibc2.12-x86_64.tar.gz 2、创建mysql用户组和用户 # 创建mysql用户组 groupadd mysql# 创建用户并添加到mysql用户组中 useradd -r -g m…...
内存分配中的堆(Memory Heap)详解
在计算机科学中,"堆"这个术语确实容易让人混淆,因为它同时用于描述两种完全不同的概念:数据结构中的堆和内存管理中的堆。上次我们讨论了数据结构中的堆,今天我将详细解释内存分配中的堆(Memory Heap&#x…...
【大模型理论篇】关于生成式模型中联合分布概率学习必要性以及GPT是生成式模型的讨论
1. 背景 之前我们在《生成式模型与判别式模型对比(涉及VAE、CRF的数学原理详述)》以及《生成式模型算法原理深入浅出(涉及Stable Diffusion、生成对抗网络、高斯混合模型、隐马尔可夫模型、朴素贝叶斯等算法原理分析及生成式模型解释)》中,我…...
LeetCode738☞单调递增的数字
关联LeetCode题号738 本题特点 贪心,贪心在如果非单调递增,则想要保证数字整体最大,那低数位一定为9(所有数字中最大的) 本题思路 从后向前遍历,如果递增则 什么都不做如果非递增,增非递增位…...
本节课课堂总结
课堂总结: Spark运行架构: 运行架构: Spark 框架的核心是一个计算引擎,整体来说,它采用了标准 master-slave 的结构。 如下图所示,它展示了一个 Spark 执行时的基本结构。图形中的 Driver 表示 master&…...
MyBatis中特殊符号处理总结
前言 MyBatis 是一款流行的Java持久层框架,广泛应用于各种类型的项目中。因为我们在日常代码 MyBatis 动态拼接语句时,会经常使用到 大于(>,>)、小于(<,<)、不等于(<>、!)操作符号。由于此符号包含了尖括号,而 MyBatis 使用…...
【零基础实战】Ubuntu搭建DVWA漏洞靶场全流程详解(附渗透测试示例)
【零基础实战】Ubuntu搭建DVWA漏洞靶场全流程详解(附渗透测试示例) 一、DVWA靶场简介 DVWA(Damn Vulnerable Web Application)是专为网络安全学习者设计的漏洞演练平台,包含SQL注入、XSS、文件包含等10大Web漏洞模块&…...
若依前后端分离版本从mysql切换到postgresql数据库
一、修改依赖: 修改admin模块pom.xml中的依赖,屏蔽或删除mysql依赖,增加postgresql依赖。 <!-- Mysql驱动包 --> <!--<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId> &l…...
【补题】Codeforces Round 974 (Div. 3) E. Rendez-vous de Marian et Robin
题意:给个图,两个人分别从点1和点n出发,问最早在哪个点可以相遇,其中某些点有马,骑上去之后可以在接下来剩余的时间内都可以将路程所需时间缩短一半。 关于题目数据见原题,这里说明太累了想偷懒Problem - 2…...
MySQL集群技术
当有数据时添加slave2 #从master节点备份数据 mysqldump -uroot -ptiminglee 1 > timinglee.sql 生产环境中备份时需要锁表,保证备份前后的数据一致 mysql> FLUSH TABLES WITH READ LOCK; 备份后再解锁 mysql> UNLOCK TABLES; mysqldump命令备份的数…...
Java 中的字节码
🔍 什么是 Java 字节码(Bytecode)? 字节码是 Java 源码(.java 文件)被编译后生成的中间代码(.class 文件),它不是机器码,而是一种 面向 JVM 的指令集。 可以…...
json 转 txt 用于 yolo 训练(可适用多边形标注框_python)
json 转 txt 用于 yolo 训练(可适用多边形标注框_python) import json import os import argparse from tqdm import tqdmdef convert_label_json(json_dir, save_dir, classes):json_paths os.listdir(json_dir)classes classes.split(,)for json_pa…...
SQL注入(SQL Injection)
目录 SQL注入(SQL Injection)是什么SQL注入的危害SQL注入的常见方式1. 经典注入(Error-Based Injection)2. 联合查询注入(Union-Based Injection)3. 时间盲注(Time-Based Blind Injection)4. 布尔盲注(Boolean-Based Blind Injection)5. 堆叠注入(Stacked Queries I…...