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

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

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

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

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

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

highlight 高亮指定的数据图形。

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

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

 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

研发型企业怎样选择安全便捷的数据摆渡解决方案?

研发型企业在市场经济发展中发挥着至关重要的作用,研发型企业是指以科技创新为核心,以研发新产品、新技术、新工艺为主要业务的企业。这类企业注重技术创新和研发,持续不断地进行技术创新和产品升级,为经济发展注入新鲜的活力。 研…

iOS 应用上架指南:资料填写及提交审核

摘要 本文提供了iOS新站上架资料填写及提交审核的详细指南,包括创建应用、资料填写-综合、资料填写-IOS App和提交审核等步骤。通过本指南,您将了解到如何填写正确的资料,并顺利通过苹果公司的审核。 引言 在开发iOS应用后,将其…

Camunda SendTask和ReceiveTask

Activiti也有ReceiveTask,作用是进入该节点将自动挂起流程实例,直到被显式的唤醒。Activiti有MailTask是专门发送邮件的。 Camunda同时有SendTask和ReceiveTask,一般成对出现,感觉是将Activiti中的ReceiveTask拆成2个步骤&#x…

一级倒立摆控制 - 非线性 MPC 控制及 MATLAB 实现

系列文章目录 前言 本示例使用非线性模型预测控制器对象和块实现对小车上倒立摆的摆动和平衡控制。 本示例需要 Optimization Toolbox™ 软件为非线性 MPC 提供默认的非线性编程求解器,以计算每个控制间隔的最优控制动作。 一、摆锤/小车装配 本例中的被控对象是…

Tomcat解压打包文件和并部署

一、文件压缩和上传解压 1.本地打包好dist.tar.gz文件 2.通过xftp拖拽上传到知道文件夹下,或者通过命令: cp dist.tar.gz /path/to/destination/folder注:将dist.tar.gz复制到 /path/to/destination/folder文件夹下,该文件夹只是举个例子怎么复制和解压! 3.进入/path/…

k8s部署mongodb-sharded7.X集群(多副本集)

#mongodb-sharded 7.X版本CHART NAME: mongodb-sharded CHART VERSION: 7.0.5 APP VERSION: 7.0.2helm repo add bitnami https://charts.bitnami.com/bitnami helm pull bitnami/bitnami/mongodb-sharded --untar默认副本数较多。我修改为33 搜索关键字replicaCount 修改 最后…

数组和函数实践:扫雷游戏玩法和棋盘初始化(1)

各位少年,大家好,我是博主那一脸阳光,我们学会了数组,exturn声明外部文件,static修饰静态变量,那么很显然,我们需要用到我们学习这些,实现一个扫雷游戏。 扫雷游戏介绍以及玩法 在地…

【Github-Action】GithubAction 环境下,如何将临时生成的文件推送至指定分支。

通过这篇文章你可以掌握如何将github action 环境下临时生成的文件推送至指定分支,并且可以打开利用github开放的api做各种强大或有趣的事情的视野和思路。 如果你对github-action感兴趣,还可以看这篇文章, 这篇文章教会你如何开发Github Act…

【JaveWeb教程】(18) MySQL数据库开发之 MySQL数据库设计-DDL 如何查询、创建、使用、删除数据库数据表 详细代码示例讲解

目录 2. 数据库设计-DDL2.1 项目开发流程2.2 数据库操作2.2.1 查询数据库2.2.2 创建数据库2.2.3 使用数据库2.2.4 删除数据库 2.3 图形化工具2.3.1 介绍2.3.2 安装2.3.3 使用2.2.3.1 连接数据库2.2.3.2 操作数据库 2.3 表操作2.3.1 创建2.3.1.1 语法2.3.1.2 约束2.3.1.3 数据类…

064:vue中一维数组的全选、全不选、反选(图文示例)

第061个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使…

Type-C PD充电器受电端sink诱骗取电汇总:小家电应用5V9V12V15V20V28V

小家电产品、美容产品、电动产品等升级采用Type-C接口,在Type-C接口上使用Type-C取电芯片,即可使用快速充电器的5V、9V、12V、15V、20V供电,无需再配充电器,各类品牌的充电器都可以支持。目前充电器常见的USB-PD功率为&#xff1a…

k8s的存储卷、数据卷

容器内的目录和宿主机目录进行挂载。 容器在系统上的生命周期是短暂的。 k8s用控制器创建的pod。delete相当于重启。容器的状态也会恢复到初始状态。一旦恢复到初始状态,所有的后天编辑的文件都会消失 容器和节点之间创建一个可以持久化保存容器内文件的存储卷。…