有个图表是要求柱状条的右下侧显示一个白色的侧阴影,一直没找到合适的方法, 加border或者shadowColor都达不到需求的效果。
因为柱状图 中series里可以包含多组数据,有几组就代表一个系列中有几个数据。这就代表series里要写七组数据。
对于上图的需求,我们可以在series里设置两组数据,也就是一系列里有两个柱状图,缩小其距离使其重合从而显示 为主柱状条的侧阴影。主要是设置副柱状条的宽度为1,主副柱状图直接的barGap为0就可以。其data数据和主柱状条一样。颜色就是需求的渐变侧阴影的颜色。
不过这样还会影响到另一个需求,就是当鼠标移入的时候柱状条颜色变换。怎么能同时改变主副两个柱状条的高亮呢?我们知道,单个柱状图高亮显示只需要设置emphasis这个属性就可以了。
两个柱状条一起变化的话,可以使用echarts的鼠标事件来解决。
先用emphasis属性设置好高亮时的颜色,然后:
seriesName就是series属性里对应的两组数据的name。
highlight 高亮指定的数据图形。
downplay 取消高亮指定的数据图形。文章来源:https://www.toymoban.com/news/detail-824259.html
关于echarts的图表的行为事件,可以移步:echarts的dispatchAction这一篇。
文章来源地址https://www.toymoban.com/news/detail-824259.html
到了这里,关于echarts -- 柱状图之柱状条如何显示白色侧阴影且鼠标移入时高亮的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!