解决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

相关文章

IDEA和GIT关于文件中LF和CRLF问题及解决

《IDEA和GIT关于文件中LF和CRLF问题及解决》文章总结:因IDEA默认使用CRLF换行符导致Shell脚本在Linux运行报错,需在编辑器和Git中统一为LF,通过调整Git的core.aut... 目录问题描述问题思考解决过程总结问题描述项目软件安装shell脚本上git仓库管理,但拉取后,上l

解决docker目录内存不足扩容处理方案

《解决docker目录内存不足扩容处理方案》文章介绍了Docker存储目录迁移方法:因系统盘空间不足,需将Docker数据迁移到更大磁盘(如/home/docker),通过修改daemon.json配... 目录1、查看服务器所有磁盘的使用情况2、查看docker镜像和容器存储目录的空间大小3、停止dock

idea npm install很慢问题及解决(nodejs)

《ideanpminstall很慢问题及解决(nodejs)》npm安装速度慢可通过配置国内镜像源(如淘宝)、清理缓存及切换工具解决,建议设置全局镜像(npmconfigsetregistryht... 目录idea npm install很慢(nodejs)配置国内镜像源清理缓存总结idea npm in

pycharm跑python项目易出错的问题总结

《pycharm跑python项目易出错的问题总结》:本文主要介绍pycharm跑python项目易出错问题的相关资料,当你在PyCharm中运行Python程序时遇到报错,可以按照以下步骤进行排... 1. 一定不要在pycharm终端里面创建环境安装别人的项目子模块等,有可能出现的问题就是你不报错都安装

idea突然报错Malformed \uxxxx encoding问题及解决

《idea突然报错Malformeduxxxxencoding问题及解决》Maven项目在切换Git分支时报错,提示project元素为描述符根元素,解决方法:删除Maven仓库中的resolv... 目www.chinasem.cn录问题解决方式总结问题idea 上的 maven China编程项目突然报错,是

在Ubuntu上打不开GitHub的完整解决方法

《在Ubuntu上打不开GitHub的完整解决方法》当你满心欢喜打开Ubuntu准备推送代码时,突然发现终端里的gitpush卡成狗,浏览器里的GitHub页面直接变成Whoathere!警告页面... 目录一、那些年我们遇到的"红色惊叹号"二、三大症状快速诊断症状1:浏览器直接无法访问症状2:终端操作异常

mybatis直接执行完整sql及踩坑解决

《mybatis直接执行完整sql及踩坑解决》MyBatis可通过select标签执行动态SQL,DQL用ListLinkedHashMap接收结果,DML用int处理,注意防御SQL注入,优先使用#... 目录myBATiFBNZQs直接执行完整sql及踩坑select语句采用count、insert、u

Python爬虫HTTPS使用requests,httpx,aiohttp实战中的证书异步等问题

《Python爬虫HTTPS使用requests,httpx,aiohttp实战中的证书异步等问题》在爬虫工程里,“HTTPS”是绕不开的话题,HTTPS为传输加密提供保护,同时也给爬虫带来证书校验、... 目录一、核心问题与优先级检查(先问三件事)二、基础示例:requests 与证书处理三、高并发选型:

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,:本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1:直接下载(推荐)方案 2:手动构造

MyBatis Plus大数据量查询慢原因分析及解决

《MyBatisPlus大数据量查询慢原因分析及解决》大数据量查询慢常因全表扫描、分页不当、索引缺失、内存占用高及ORM开销,优化措施包括分页查询、流式读取、SQL优化、批处理、多数据源、结果集二次... 目录大数据量查询慢的常见原因优化方案高级方案配置调优监控与诊断总结大数据量查询慢的常见原因MyBAT