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

发布时间：2024年01月10日

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

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

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

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

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

highlight 高亮指定的数据图形。

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

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

?

文章来源:https://blog.csdn.net/m0_52545254/article/details/135494699
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章