解决echarts地图点击下钻时出现黄色阴影的问题

2024-02-22 06:10

本文主要是介绍解决echarts地图点击下钻时出现黄色阴影的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近使用echarts使用地图时碰到了一个问题,查了很久终于解决了,直接上图上代码

一级地图效果
在这里插入图片描述
地图下钻后的错误效果
地图下钻后的错误效果
地图下钻后的想要效果
地图下钻后的想要的效果
代码

return {grid: {left: '2%',right: '0%',top: '0%',bottom: '0%',width: '95%',containLabel: true},layoutCenter: ['50%', '50%'], // 位置layoutSize: '80%',visualMap: {min: 0,max: 1000,type: 'piecewise',show: false,itemWidth: 10,itemHeight: 80,showLabel: true,seriesIndex: [0],text: ['高', '低'],// inRange: {//   color: ['#7F1000', '#BD1317', '#E64C45', '#FF8C71', '#FDD29F']// },visibility: 'off',pieces: [{max: 200,color: '#FDD29F'},{min: 200,max: 400,color: '#FF8C71'},{min: 400,max: 600,color: '#E64C45'},{min: 600,max: 800,color: '#BD1317'},{min: 800,color: '#7F1000'}],textStyle: {color: '#7b93a7'},bottom: 30,left: 'left'},geo: {map: 'shangyu',aspectScale: 1, // 长宽比zoom: 1.2,seriesIndex: 1,roam: false, // 是否可缩放label: {normal: {color: '#fff',show: true},emphasis: {show: true,color: '#fff',fontSize: 18,position: ['50%', '50%']}},itemStyle: {normal: {shadowColor: '#182f68',shadowOffsetX: 0,shadowOffsetY: 5,borderWidth: 0},emphasis: {areaColor: '#f2d5ad'}},globalCoord: false // 缺省为 false},series: [{type: 'map',// map: 'shangyu',geoIndex: 0,roam: false,selectedMode: false, // 添加这个属性完美解决问题data: this.dataList},{type: 'effectScatter', // 带有涟漪特效动画的散点图coordinateSystem: 'geo',data: this.mapData,symbol: function (value, params) {return params.data.img},// symbol: 'pin',symbolSize: [12, 12],label: {normal: {show: false}},itemStyle: {show: true,normal: {color: '#7F1000'}},showEffectOn: 'render', // 加载完毕显示特效rippleEffect: {brushType: 'stroke'},hoverAnimation: true,zlevel: 1,showAllSymbol: true}],animation: true}

解决方法:
在 series->map 里添加 selectedMode: false

附:地图不要求下钻时,移入或点击某块区域要高亮显示

不需要加selectedMode属性,在series->map 里添加

emphasis: { // 移入选中的样式itemStyle:{areaColor: '#4f7fff',borderColor: 'rgba(0,242,252,.6)',borderWidth: 2,shadowBlur: 10,shadowColor: '#00f2fc',},
},
select: { // 点击选中的样式itemStyle:{borderColor: "rgba(0,242,252,.6)",borderWidth: 2,areaColor: "#55ecbc",shadowBlur: 10,shadowColor: '#1a8d9e',shadowOffsetY: 0,shadowOffsetX: 0,},
}

这篇关于解决echarts地图点击下钻时出现黄色阴影的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/734342

相关文章

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,:本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具

C++右移运算符的一个小坑及解决

《C++右移运算符的一个小坑及解决》文章指出右移运算符处理负数时左侧补1导致死循环,与除法行为不同,强调需注意补码机制以正确统计二进制1的个数... 目录我遇到了这么一个www.chinasem.cn函数由此可以看到也很好理解总结我遇到了这么一个函数template<typename T>unsigned

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

504 Gateway Timeout网关超时的根源及完美解决方法

《504GatewayTimeout网关超时的根源及完美解决方法》在日常开发和运维过程中,504GatewayTimeout错误是常见的网络问题之一,尤其是在使用反向代理(如Nginx)或... 目录引言为什么会出现 504 错误?1. 探索 504 Gateway Timeout 错误的根源 1.1 后端

Web服务器-Nginx-高并发问题

《Web服务器-Nginx-高并发问题》Nginx通过事件驱动、I/O多路复用和异步非阻塞技术高效处理高并发,结合动静分离和限流策略,提升性能与稳定性... 目录前言一、架构1. 原生多进程架构2. 事件驱动模型3. IO多路复用4. 异步非阻塞 I/O5. Nginx高并发配置实战二、动静分离1. 职责2

解决升级JDK报错:module java.base does not“opens java.lang.reflect“to unnamed module问题

《解决升级JDK报错:modulejava.basedoesnot“opensjava.lang.reflect“tounnamedmodule问题》SpringBoot启动错误源于Jav... 目录问题描述原因分析解决方案总结问题描述启动sprintboot时报以下错误原因分析编程异js常是由Ja

深度剖析SpringBoot日志性能提升的原因与解决

《深度剖析SpringBoot日志性能提升的原因与解决》日志记录本该是辅助工具,却为何成了性能瓶颈,SpringBoot如何用代码彻底破解日志导致的高延迟问题,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言第一章:日志性能陷阱的底层原理1.1 日志级别的“双刃剑”效应1.2 同步日志的“吞吐量杀手”

MySQL 表空却 ibd 文件过大的问题及解决方法

《MySQL表空却ibd文件过大的问题及解决方法》本文给大家介绍MySQL表空却ibd文件过大的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录一、问题背景:表空却 “吃满” 磁盘的怪事二、问题复现:一步步编程还原异常场景1. 准备测试源表与数据

解决Nginx启动报错Job for nginx.service failed because the control process exited with error code问题

《解决Nginx启动报错Jobfornginx.servicefailedbecausethecontrolprocessexitedwitherrorcode问题》Nginx启... 目录一、报错如下二、解决原因三、解决方式总结一、报错如下Job for nginx.service failed bec

SysMain服务可以关吗? 解决SysMain服务导致的高CPU使用率问题

《SysMain服务可以关吗?解决SysMain服务导致的高CPU使用率问题》SysMain服务是超级预读取,该服务会记录您打开应用程序的模式,并预先将它们加载到内存中以节省时间,但它可能占用大量... 在使用电脑的过程中,CPU使用率居高不下是许多用户都遇到过的问题,其中名为SysMain的服务往往是罪魁