当前位置: 首页 > news >正文

echarts地图立体效果,echarts地图点击事件,echarts地图自定义自定义tooltip

一.地图立体效果

方法1:两层地图叠加

实现原理:geo数组中放入两个地图对象,通过修改zlevel属性以及top,left,right,bottom形成视觉差

配置项参考如下代码:

geo: [{zlevel: 2,top: 96,map: 'map',itemStyle: {color: '#091A51ee',opacity: 1,borderWidth: 2,borderColor: '#16BAFA'},label: {show: true,position: 'top',color: '#fff',fontSize: 14,lineHeight: 16,fontWeight: 'bold',textShadowColor: '#073BDA', // 阴影颜色textShadowBlur: 10, // 阴影模糊程度textShadowOffsetX: 0, // 阴影横向偏移textShadowOffsetY: 4, // 阴影纵向偏移formatter: function({ name }) {return ` ${name}`}},emphasis: {disabled: true, //是否可以被选中label: {show: true,color: '#fff',fontSize: 18,textShadowColor: '',textShadowBlur: 0, // 阴影模糊程度textShadowOffsetX: 0, // 阴影横向偏移textShadowOffsetY: 0 // 阴影纵向偏移},itemStyle: {color: '#01A8F1'}}},{zlevel: 1,map: 'map',itemStyle: {color: '#17418B',opacity: 1,borderWidth: 2,borderColor: '#17418B'},label: {show: false},emphasis: {disabled: false, // 是否可以被选中itemStyle: {color: '#01A8F1'}}}]

方法二:通过echarts-gl实现3d效果

1.需要引入echarts-gl.js文件或者npm下载

2.此方法地图省份的点击事件不生效!!!

3.省份名称需要通过下面代码才能显示出来

formatter: function ({ name }) {

          return ` ${name}`

 }

配置项完整代码如下:

geo3D: {map: "map",roam: true,shading: "color",boxHeight: 100,regionHeight: 8,itemStyle: {color: "#163C99",opacity: 0.4,borderWidth: 1,borderColor: "#0EF6FA"},emphasis: {disabled: true, //是否可以被选中label: {//移入时的高亮文本show: true,color: "#000", //显示字体颜色变淡fontSize: 18 //显示字体变大}},label: {show: true,position: "top",color: "#fff",fontSize: 14,lineHeight: 16,formatter: function ({ name }) {return ` ${name}`}},light: {//光照阴影main: {color: "#032372", //光照颜色intensity: 0.1, //光照强度 //shadowQuality: 'high', //阴影亮度shadow: true, //是否显示阴影shadowQuality: "medium", //阴影质量 ultra //阴影亮度alpha: 80,beta: 0,ambientCubemap: 0.5},ambient: {intensity: 1,color: "#133995" //光照颜色}},viewControl: {beta: 0, //x轴旋转alpha: 75, //Y轴旋转panMouseButton: "center", //平移操作使用的鼠标按键rotateMouseButton: "left", //旋转操作使用的鼠标按键rotateSensitivity: 0, //禁止旋转地图//下面的四个参数 可以实现禁止缩放地图projection: "orthographic",orthographicSize: 110,maxOrthographicSize: 110,minOrthographicSize: 110}}//如果要选中/激活高亮某个省份
function setProvince(e) {let option = mapChartInstance.getOption()option.geo3D[0].regions = [{name: e,itemStyle: {color: "#0cf4f9",opacity: 1}}]mapChartInstance.setOption(option)}

二.地图点击事件

//this.mapChart替换成对应的echarts实例
this.mapChart.on('click', (e) => {this.setProvince(e.name)
})

三.自定义tooltip

实现原理:

tooltip和地图的div容器宽高一致,tooltip中要自定义显示的内容相对于tooltip定位,然后通过echarts提供的convertToPixel()方法计算出自定义显示内容的相对位置

html

<div class="top_content"><div class="map_chart" id="map_chart"></div><div class="map-tooltip"><div class="in u-flex-col u-row-center " :style="curMapData"><div>{{ current_province.name }}:</div><div class="u-m-t-15"><span>{{ total }}</span> 家合作企业</div></div></div>
</div>

js

const properties = mapJson.features.find(item => item.properties.name.includes(name)).properties
const cp = properties.cp || properties.center
this.curMapData = this.showTooltipAtCoords(cp)showTooltipAtCoords(cp) { // 经纬度转换position位置const lng = cp[0]const lat = cp[1]const point = this.mapChart.convertToPixel('geo', [lng, lat])const left = `${point[0]}px` // 设置位置const top = `${point[1] - 90}px` // 设置位置return `left:${left} ;top:${top}`
},

相关文章:

echarts地图立体效果,echarts地图点击事件,echarts地图自定义自定义tooltip

一.地图立体效果 方法1:两层地图叠加 实现原理:geo数组中放入两个地图对象,通过修改zlevel属性以及top,left,right,bottom形成视觉差 配置项参考如下代码: geo: [{zlevel: 2,top: 96,map: map,itemStyle: {color: #091A51ee,opacity: 1,borderWidth: 2,borderColor: #16BAFA…...

什么是 Socket?

Socket&#xff08;套接字&#xff09;是计算机网络编程中的一个重要概念&#xff0c;它用于在不同计算机之间进行通信。Socket 提供了一种机制&#xff0c;使得应用程序可以通过网络发送和接收数据。Socket 通信通常基于 TCP/IP 协议&#xff0c;但也可以使用其他协议&#xf…...

【版本控制】SVN安装到使用一条路讲解

文章目录 安装使用 Subversion (SVN) 是一款集中式版本控制系统&#xff0c;广泛应用于团队协作和代码管理中。尽管随着 Git 的兴起&#xff0c;集中式版本控制逐渐被分布式工具取代&#xff0c;但 SVN 仍在许多企业项目中发挥着重要作用。它的简单、稳定和易用特性&#xff0c…...

KVCKVO

KVC KVC意思是键值编码&#xff0c;是一种可以通过键名来访问对象属性的机制&#xff0c;也可以对属性进行赋值&#xff0c;包括私有属性&#xff0c;由于KVC的定义是对OC中的NSObject的扩展进行实现的&#xff0c;所以如果要使用KVC机制&#xff0c;那么这个类需要继承NSObje…...

PyQt设计界面优化 #qss #ui设计 #QMainWindow

思维导图 通过qss实现ui界面设计优化 Qss是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性&#xff0c;它是用来美化UI界面。实现界面和程序的分离&#xff0c;快速切换界面。 首先我们在Pytchram创建一个新目录 然后将我们所需要的图片打…...

Qt Serial Bus 前置介绍篇

文章目录 Qt Serial Bus 简介前言 什么是 Qt Serial Bus&#xff1f;Qt Serial Bus 的核心功能支持的协议1. **CAN 总线**2. **Modbus**3. **自定义协议** 应用场景优势总结 Qt Serial Bus 简介 前言 Qt Serial Bus 是 Qt 框架中的一个模块&#xff0c;用于与工业设备和嵌入式…...

12.2深度学习_项目实战

十、项目实战 鲍勃开了自己的手机公司。他想与苹果、三星等大公司展开硬仗。 他不知道如何估算自己公司生产的手机的价格。在这个竞争激烈的手机市场&#xff0c;你不能简单地假设事情。为了解决这个问题&#xff0c;他收集了各个公司的手机销售数据。 鲍勃想找出手机的特性(例…...

LeetCode 64. 最小路径和(HOT100)

第一次错误代码&#xff1a; class Solution { public:int minPathSum(vector<vector<int>>& grid) {int dp[205][205] {0};int m grid.size(),n grid[0].size();for(int i 1 ;i<m;i){for(int j 1;j<n;j){dp[i][j] min(dp[i][j-1],dp[i-1][j])gr…...

ESP8266作为TCP客户端或者服务器使用

ESP8266模块&#xff0c;STA模式&#xff08;与手机搭建TCP通讯&#xff0c;EPS8266为服务端&#xff09;_esp8266作为station-CSDN博客 ESP8266模块&#xff0c;STA模式&#xff08;与电脑搭建TCP通讯&#xff0c;ESP8266 为客户端&#xff09;_esp8266 sta 连接tcp-CSDN博客…...

C#结合.NET框架快速构建和部署AI应用

在人工智能&#xff08;AI&#xff09;的浪潮中&#xff0c;C#作为一种功能强大且类型安全的编程语言&#xff0c;为AI工程开发提供了坚实的基础。C#结合.NET框架&#xff0c;使得开发者能够快速构建和部署AI应用。本文将通过一个简单的实例&#xff0c;展示如何使用C#进行AI工…...

题外话 (火影密令)

哥们&#xff01; 玩火影不&#xff01; 村里人全部评论&#xff01; 不评论的忍战李全保底&#xff01; 哥们&#xff01; 密令领了不&#xff01; “1219村里人集合”领了吗&#xff01; 100金币&#xff01; 哥们&#xff01; 我粉丝没人能上影&#xff01; 老舅说的…...

蓝桥杯准备训练(lesson1,c++方向)

前言 报名参加了蓝桥杯&#xff08;c&#xff09;方向的宝子们&#xff0c;今天我将与大家一起努力参赛&#xff0c;后序会与大家分享我的学习情况&#xff0c;我将从最基础的内容开始学习&#xff0c;带大家打好基础&#xff0c;在每节课后都会有练习题&#xff0c;刚开始的练…...

RTDETR融合[ECCV2024]WTConvNeXt中的WTConv模块及相关改进思路

RT-DETR使用教程&#xff1a; RT-DETR使用教程 RT-DETR改进汇总贴&#xff1a;RT-DETR更新汇总贴 《Wavelet Convolutions for Large Receptive Fields》 一、 模块介绍 论文链接&#xff1a;https://arxiv.org/pdf/2407.05848 代码链接&#xff1a;https://github.com/BGU-CS…...

AD7606使用方法

AD7606是一款8通道最高16位200ksps的AD采样芯片。5V单模拟电源供电&#xff0c;真双极性模拟输入可以选择10 V&#xff0c;5 V两种量程。支持串口与并口两种读取方式。 硬件连接方式&#xff1a; 配置引脚 引脚功能 详细说明 OS2 OS1 OS2 过采样率配置 000 1倍过采样率 …...

嵌入式系统应用-LVGL的应用-平衡球游戏 part1

平衡球游戏 part1 1 平衡球游戏的界面设计2 界面设计2.1 背景设计2.2 球的设计2.3 移动球的坐标2.4 用鼠标移动这个球2.5 增加边框规则2.6 效果图2.7 游戏失败重启游戏 3 为小球增加增加动画效果3.1 增加移动效果代码3.2 具体效果图片 平衡球游戏 part2 第二部分文章在这里 1 …...

JVM(四) - JVM 内存结构

目录 一、程序计数器 1.1 作用 1.2 概述 二、虚拟机栈 2.1 概述 2.2 栈的存储单位 2.3 栈运行原理 2.4 栈帧的内部结构 2.4.1. 局部变量表 槽 Slot 2.4.2. 操作数栈 概述 栈顶缓存&#xff08;Top-of-stack-Cashing&#xff09; 2.4.3. 动态链接&#xff08;指向…...

【AI系统】CANN 算子类型

CANN 算子类型 算子是编程和数学中的重要概念&#xff0c;它们是用于执行特定操作的符号或函数&#xff0c;以便处理输入值并生成输出值。本文将会介绍 CANN 算子类型及其在 AI 编程和神经网络中的应用&#xff0c;以及华为 CANN 算子在 AI CPU 的详细架构和开发要求。 算子基…...

VUE脚手架练习

脚手架安装的问题&#xff1a; 1.安装node.js,配置环境变量,cmd输入node -v和npm -v可以看到版本号&#xff08;如果显示不是命令&#xff0c;确认环境变量是否配置成功&#xff0c;记得配置环境变量之后重新打开cmd&#xff0c;再去验证&#xff09; 2.在安装cnmp时&#xf…...

动态艺术:用Python将文字融入GIF动画

文章内容&#xff1a; 在数字媒体的多样化发展中&#xff0c;GIF动画作为一种流行的表达形式&#xff0c;常被用于广告、社交媒体和娱乐。本文通过一个具体的Python编程示例&#xff0c;展示了如何将文字以动态形式融入到GIF动画中&#xff0c;创造出具有视觉冲击力的动态艺术…...

更多开源创新 挑战OpenAI-o1的模型出现和AI个体模拟突破

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

jdbc查询mysql数据库时,出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

aardio 自动识别验证码输入

技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”&#xff0c;于是尝试整合图像识别与网页自动化技术&#xff0c;完成了这套模拟登录流程。核心思路是&#xff1a;截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...

node.js的初步学习

那什么是node.js呢&#xff1f; 和JavaScript又是什么关系呢&#xff1f; node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说&#xff0c; 需要在node.js的环境上进行当JavaScript作为前端开发语言来说&#xff0c;需要在浏览器的环境上进行 Node.js 可…...

高分辨率图像合成归一化流扩展

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 1 摘要 我们提出了STARFlow&#xff0c;一种基于归一化流的可扩展生成模型&#xff0c;它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流&#xff08;TARFlow&am…...