echarts -- 柱状图之柱状条如何显示白色侧阴影且鼠标移入时高亮

news2024/11/18 3:42:48

有个图表是要求柱状条的右下侧显示一个白色的侧阴影,一直没找到合适的方法, 加border或者shadowColor都达不到需求的效果。

因为柱状图 中series里可以包含多组数据,有几组就代表一个系列中有几个数据。这就代表series里要写七组数据。

对于上图的需求,我们可以在series里设置两组数据,也就是一系列里有两个柱状图,缩小其距离使其重合从而显示 为主柱状条的侧阴影。主要是设置副柱状条的宽度为1,主副柱状图直接的barGap为0就可以。其data数据和主柱状条一样。颜色就是需求的渐变侧阴影的颜色。

不过这样还会影响到另一个需求,就是当鼠标移入的时候柱状条颜色变换。怎么能同时改变主副两个柱状条的高亮呢?我们知道,单个柱状图高亮显示只需要设置emphasis这个属性就可以了。
两个柱状条一起变化的话,可以使用echarts的鼠标事件来解决。
先用emphasis属性设置好高亮时的颜色,然后:

seriesName就是series属性里对应的两组数据的name。

highlight 高亮指定的数据图形。

downplay 取消高亮指定的数据图形。

关于echarts的图表的行为事件,可以移步:echarts的dispatchAction这一篇。

 

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

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

相关文章

git-生成证书、公钥、私钥、error setting certificate verify locations解决方法

解决方法 方法1-配置证书、公钥、私钥打开Git Bash设置名称和邮箱执行,~/.ssh执行,ssh-keygen -t rsa -C "这是你的邮箱",如图:进入文件夹可以看到用记事本之类的软件打开id_rsa.pub文件,并且复制全部内容。…

动态规划篇-04:完全平方数

279、完全平方数 状态转移方程 base case 当n 0 时,和为n的完全平方数的最少数量为0. 明确状态 “原问题或子问题中变化的变量” 在本题中,状态是 “完全平方数的最少数量”。因为当我们选择不同的完全平方数的时候,所需完全平方数的数量…

两个Mesh路由、一个5口交换机,打造智能家居无缝网络覆盖

在现代家庭中,无线网络已经成为了必需品,每个人都希望享受到无缝连接的畅快体验。然而,由于信号覆盖范围的限制和信号干扰等问题,很多家庭在组网方面遇到了一些困难。 对于有需求的家庭而言,两个Mesh路由器是一种非常…

错误处理(基于ESP-IDF)

主要参考资料 B站Up主孤独的二进制《错误处理 - 乐鑫 ESP32 物联网开发框架 ESP-IDF 开发入门》 ESP-IDF编程指南>API指南>错误消息: https://docs.espressif.com/projects/esp-idf/zh_CN/v5.1/esp32s3/api-guides/error-handling.html ESP-IDF编程指南>API指南>严…

Python - 深夜数据结构与算法之 BloomFilter

目录 一.引言 二.BloomFilter 简介 1.Hash Table 2.Bloom Filter 3.Bloom 示意图 4.Bloom 应用 三.Bloom Filter 实现 1.Python 实现 2.Python 测试 四.总结 一.引言 布隆过滤器 BloomFilter 是位运算在工业级场景应用的典范,其通过 bit 位保存元素是否存…

Linux/Traverxec

Enumeration nmap 使用nmap快速扫描目标,发现对外开放了22和80,第一个问题就是问80端口运行的是什么服务,针对这两个端口扫描对应的详细信息后就能得到答案 Nostromo 从nmap的扫描结果可以看到,目标开启了80端口,且…

MATLAB对话框与菜单设计实验

本文MATLAB源码,下载后直接打开运行即可[点击跳转下载]-附实验报告https://download.csdn.net/download/Coin_Collecter/88740733 一、实验目的 1.掌握建立控件对象的方法。 2.掌握对话框设计方法。 3.掌握菜单设计方法。 二、实验内容 建立如下图所示的菜单。菜单…

基于鸿蒙HarmonyOS 元服务开发一款公司运营应用(ArkTS API 9)

前言 最近基于Harmony OS最新版本开发了一个作品,本文来详细讲解一下,如何我是如何开发这个作品的。以及如何使用OpenHarmony,基于ArkTS,API 9来开发一个属于自己的元服务。 废话不多说,我的作品名称叫做Company Oper…

如何通过Burp Suite专业版构建CSRF PoC

Burp Suite是一款强大的渗透测试利器&#xff0c;可以利用它来高效的执行渗透攻击&#xff0c;接下来介绍如何通过Burp Suite Pro来构建CSRF PoC。 在Bupr中找到拦截的请求&#xff0c;右键选择Engagement tools > Generate CSRF PoC 利用CSRF PoC生成器自动生成HTML <h…

2.2 物理层

2.2 物理层 2.2.1 物理层的基本概念 1、物理层主要解决在各种传输媒体上传输比特0和1的问题&#xff0c;进而给数据链路层提供透明传输比特流的服务 2、由于传输媒体的种类太多&#xff08;例如同轴电缆、光纤、无线电波等&#xff09;&#xff0c;物理连接方式也有很多例如…

K8S--Ingress的作用

原文网址&#xff1a;K8S--Ingress的作用-CSDN博客 简介 本文介绍K8S的Ingress的作用。 ----------------------------------------------------------------------------------------------- 分享Java真实高频面试题&#xff0c;吊打面试官&#xff1a; Java后端真实面试题…

redis数据结构源码分析——跳表zset

文章目录 跳表的基本思想特点节点与结构跳跃表节点zskiplistNode属性 跳跃表链表属性 跳表的设计思想和优势API解析zslCreate&#xff08;创建跳跃表&#xff09;zslCreateNode&#xff08;创建节点&#xff09;zslGetRank&#xff08;查找排位&#xff09;zslDelete&#xff0…

【RPC】序列化:对象怎么在网络中传输?

今天来聊下RPC框架中的序列化。在不同的场景下合理地选择序列化方式&#xff0c;对提升RPC框架整体的稳定性和性能是至关重要的。 一、为什么需要序列化&#xff1f; 首先&#xff0c;我们得知道什么是序列化与反序列化。 网络传输的数据必须是二进制数据&#xff0c;但调用…

2019年认证杯SPSSPRO杯数学建模D题(第一阶段)5G时代引发的道路规划革命全过程文档及程序

2019年认证杯SPSSPRO杯数学建模 5G下十字路口车辆通行效率的讨论和建模 D题 5G时代引发的道路规划革命 原题再现&#xff1a; 忙着回家或上班的司机们都知道交通堵塞既浪费时间又浪费燃料&#xff0c;甚至有的时候会带来情绪上的巨大影响&#xff0c;引发一系列的交通问题。…

图像的初识

一、图像的数组表示 RGB能够构成人眼所能识别的所有颜色。 二、图像的变换 Example&#xff1a; img.shape Out[329]: (512, 768, 3) img.dtype Out[330]: dtype(uint8) #补值变换 shift_temp_img [255,255,255] - img shift_img Image.fromarray(shift_temp_img.astype(ui…

【REST2SQL】09 给Go的可执行文件exe加图标和版本信息等

【REST2SQL】01RDB关系型数据库REST初设计 【REST2SQL】02 GO连接Oracle数据库 【REST2SQL】03 GO读取JSON文件 【REST2SQL】04 REST2SQL第一版Oracle版实现 【REST2SQL】05 GO 操作 达梦 数据库 【REST2SQL】06 GO 跨包接口重构代码 【REST2SQL】07 GO 操作 Mysql 数据库 【RE…

关于2024年3月10日PMP考试的常见问题解答

2024年第一场PMP考试3月10日&#xff08;星期日&#xff09;举行&#xff0c;目前报名正在进行中。请参加了这次考试或者计划在2024年尽早取证的伙伴们抓紧报名&#xff0c;本次报名截止到1月18日。 说句题外话&#xff0c;PMP的考试安排越来越随性了&#xff0c;哈&#xff0…

MyBatis 入门指南:基本配置和使用

ORM——对象关系映射 O:对应的是java中的对象&#xff0c;一般是pojo&#xff08;实体类&#xff09; R:关系型数据库 M:映射,指java中对象映射到数据库表中对应的记录&#xff0c;或者是数据库表中对应记录映射成java中的对象 一个mybaties程序 1、添加依赖 <parent&g…

STM32存储左右互搏 SPI总线FATS读写FRAM MB85RS2M

STM32存储左右互搏 SPI总线FATS读写FRAM MB85RS2M 在中低容量存储领域&#xff0c;除了FLASH的使用&#xff0c;&#xff0c;还有铁电存储器FRAM的使用&#xff0c;相对于FLASH&#xff0c;FRAM写操作时不需要预擦除&#xff0c;所以执行写操作时可以达到更高的速度&#xff0…

大数据Doris(五十五):SQL函数之日期函数(三)

文章目录 SQL函数之日期函数(三) 一、SECOND(DATETIME date)