echarts地图map点击某一区域设置选中颜色/select选中文字颜色设置无效

news2024/9/25 13:23:03

在这里插入图片描述
选中区域为红色,字体为白色

1.selectedMode: ‘single’,设置单选,多选,不选中

2.series/map/select属性

 series: [
                    {
                        type: 'map',
                        map: 'area',
                        //单选
                        selectedMode: 'single',
                        aspectScale: 0.73,
                        layoutCenter: ['50%', '51%'], 
                        //地图位置
                        layoutSize: '100%',
                        itemStyle: {
                            normal: {
                                // borderColor: 'rgba(12, 222, 255, 1)',
                                // borderWidth: 0.8,
                                areaColor: {
                                    type: 'linear-gradient',
                                    x: 0,
                                    y: 300,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(0,0,0, 0)', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(0,0,0, 0)',
                                        },
                                    ],
                                    global: true, // 缺省为 false
                                },
                            },
                            // 鼠标移入样式
                            emphasis: {
                                shadowColor: 'rgba(0, 0, 0, 1)',
                                shadowBlur: 10,
                                shadowOffsetX: 5,
                                shadowOffsetY: 5,
                                borderColor: "#0CDEFF",
                                borderWidth: 3,
                                areaColor: {
                                    type: 'linear-gradient',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(243, 174, 48, 0)', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(243, 174, 48, 0)',
                                        },
                                    ],
                                },
                            },
                        },
                        // 选中样式
                        select: {
                            label: { 
                                // 选中区域的label(文字)样式
                                color: '#fff'
                            },
                            
                            itemStyle: {
                                color: '#fff',
                                // 选中区域红色
                                areaColor: "rgba(255, 88, 78, .5)",
                                // 选中区域边框
                                borderColor: "#0CDEFF",
                                borderWidth: 3,
                            },

                        },
                        // 地图默认label样式
                        label: {
                            normal: {
                                show: true,
                                fontFamily: 'SourceHanSansCN',
                                fontSize: '18',
                                color: '#FEFEFE',
                            },
                            emphasis: {
                                show: true,
                                fontFamily: 'SourceHanSansCN',
                                fontSize: '18',
                                color: '#FEFEFE',
                            },
                        },
                        zlevel: 1,
                        data: outdata,
                    },
                ],

注意select设置在series外面区域选中也是有效果

但是文字选中没效果,要设置在series/map属性里面,选中有效

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1324198.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CEC2013(python):五种算法(OOA、WOA、GWO、DBO、HHO)求解CEC2013(python代码)

一、五种算法简介 1、鱼鹰优化算法OOA 2、鲸鱼优化算法WOA 3、灰狼优化算法GWO 4、蜣螂优化算法DBO 5、哈里斯鹰优化算法HHO 二、5种算法求解CEC2013 (1)CEC2013简介 参考文献: [1] Liang J J , Qu B Y , Suganthan P N , et al. Pro…

量子登月计划!Infleqtion与日本JST研发中性原子量子计算机

​(图片来源:网络) 美国量子信息公司Infleqtion,已被日本科学技术振兴机构(JST)选定为“量子登月计划”唯一的外国量子计算合作伙伴。该计划旨在增强日本的量子技术能力,预计将在2050年之前对日…

WinDbg调试异常(!!! second chance !!!)

以前使用windbg调试样本时不时会遇到异常并提示(!!! second chance !!!),之前也尝试查找过原因但是并没有找到,一直十分郁闷。这次又出现了异常,有时间查找原因并发现了问题所在,于是记录下分析过程。 起因 在调试一个样本,每次用windbg调试都会出现: 但是使用x64dbg调…

java-sec-code中jwt

java-sec-code中jwt jwt漏洞首先需要爆破出密钥,然后在进行伪造,由于这里是白盒,不做爆破演示,直接利用 创建jwt属性值 http://127.0.0.1:8080/jwt/createToken从jwt属性值中解密获取user值 http://127.0.0.1:8080/jwt/getName…

docker安装sonar后集成本地代码进行质量分析

背景 在完成代码后,想做一个较低层级的代码自检,来完善自己代码的质量 技术选型 在结合现有项目情况下,结合Jenkins走CI CD过程,选择了sonarqube 安装 下载地址:自己搜 安装教程我来出,首先sonarqube完整的过程分了两部分&…

网络时代的新宠

当今社会,随着科技的不断进步和互联网的普及,手机已经成为了人们生活中不可或缺的一部分。它不仅仅是一个通信工具,更是娱乐、学习和获取信息的利器。而其中,手机无人直播更是近年来备受关注的热门话题。 直播,一种实…

程序员必知!开放封闭原则的实战应用与案例分析

开放封闭原则是面向对象设计中的重要原则之一,它要求软件实体(类、模块、函数等)应该对扩展开放,但对修改关闭。这意味着当需要添加新功能时,不应该修改现有的代码,而是应该通过扩展来实现。这可以通过使用…

图片编辑文字用什么软件?带你了解这5个

图片编辑文字用什么软件?在当今数字化的时代,图片编辑已经成为我们日常生活中不可或缺的一部分。有时候,我们需要在图片上添加文字,以增强图片的视觉效果或传达特定的信息。那么,有哪些可以在图片上编辑文字的软件呢&a…

使用postman时,报错SSL Error: Unable to verify the first certificate

开发中使用postman调用接口,出现以下问题,在确认路径、参数、请求方式均为正确的情况下 解决方法 File - Settings -> SSL certification verification 关闭 找到图中配置,这里默认是打开状态,把它关闭即可:ON …

mysql:查询服务器当前打开的连接数量

使用命令show global status like Threads_connected;可以查询mysql服务器当前打开的连接数量。 例如,查询如下: 启动应用,连接数据库,占用了1个连接,再查询如下: 由输出可以看出,打开的连接…

02 ModBus TCP

目录 一、ModBus TCP 一帧数据格式 二、0x01 读线圈状态 三、0x03读保持寄存器 四、0x05写单个线圈 五、0x06 写单个寄存器 六、0x0f写多个线圈 七、0x10:写多个保持寄存器 八、通信过程 九、不同modbus通信模式的应用场景 一、ModBus TCP 一帧数据格式 其…

JNI逆向

IDA:JNI类型转换 1.IDA高版本(IDA 高版本内置了定义的JNI结构体; 如果没有的话,在Views->Open subviews -> Type Libraries 中添加Android ARM的lib即可) 解决方法: 只需要对JNIEnv 指针(JNIEnv * &#xff09…

jQuery实现轮播图代码

简述 一个简单的jQuery轮播图代码,首先,定义了一个slideshow-container的div容器,其中包含了所有轮播图幻灯片。每个幻灯片都包含一个mySlides的类名,并且使用CSS将其隐藏。然后,使用JavaScript代码来控制幻灯片的显示和隐藏。在showSlides()函数中,遍历所有幻灯片并将它…

DDD领域驱动设计(二)

软件系统复杂性的应对 解决复杂和大规模软件的武器可以粗略的归位三种:抽象 分治和知识 抽象: 使用抽象能够精简问题空间,而且问题越小越容易理解。比如你去一个地方 一开始的时候并不需要确定用什么方式到达。分治: 类似算法里面的dp用的就是分治的想法。分割后的…

构建陪诊预约系统:技术实战指南

在医疗科技的飞速发展中,陪诊预约系统的应用为患者和陪诊人员提供了更为便捷和贴心的服务。本文将带领您通过技术实现,构建一个简单而实用的陪诊预约系统,以提升医疗服务的效率和用户体验。 技术栈选择 在开始之前,我们需要选择…

Halcon求三点中心,三角形重心、三角形外接圆外心和内切圆内心

本文涉及几何问题,求角平分线,垂直平分线以及中线,不止可以应用于点和三角形,其他需求可选择性提取。 求角平分线:http://t.csdnimg.cn/QYZOK 求垂直平分线:http://t.csdnimg.cn/A4wWD 三角形的重心&…

JDK bug:ciObjectFactory::create_new_metadata:原因完全解析

文章目录 1、问题2.详细日志2.关键日志3.结论4.JDK:bug最终bug链接: 京东遇到过类似bug各位大佬如果有更详细的解答可以留言。 1、问题 服务不通,接口404,查看日志有一下截图,还有一个更详细的日志 2.详细日志 # #…

如何在公网环境下使用Potplayer访问本地群晖webdav中的影视资源

文章目录 本教程解决的问题是:按照本教程方法操作后,达到的效果是:1 使用环境要求:2 配置webdav3 测试局域网使用potplayer访问webdav3 内网穿透,映射至公网4 使用固定地址在potplayer访问webdav ​ 国内流媒体平台的内…

青少年CTF-qsnctf-Web-Queen

题目环境: 题目难度:★★ 题目描述:Q的系统会不会有漏洞? 看到了登录窗口,使用burp suite工具进行抓包 burp suite抓包 admin 1 Repeater重放Send放包 Your IP is not the administrator’s IP address! 您的IP不是管理…

张驰咨询:程序员如何利用六西格玛培训优化代码质量和工作效率?

在当今这个以数据驱动决策和追求极致效率为标杆的商业世界中,“六西格玛”(Six Sigma)不再仅是精益管理的术语,它已经成为提升个人和组织竞争力的重要法宝。让我们一起揭开六西格玛在职场培训中的神秘面纱,探索如何用它来精进自己的工作和生活…