ECharts 使用series.itemStyle.barBorderRadius设置柱状图圆角

原创已于 2023-05-06 14:13:22 修改 · 4.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2023-05-06 14:07:21 首次发布

文章介绍了如何使用Echarts的配置项`borderRadius`来实现柱状图柱子的圆角效果，特别是通过设置`barBorderRadius`数组来控制特定边角的圆润程度，例如`[4,4,0,0]`可以让顶部和底部的柱子边角为圆形，而左右边保持直角。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原始效果图：

目标样式：

首先我们可以在echars官网查看任意柱状图的配置项，如下图

在 series 含有一个属性为 borderRadius ，字面意思就是盒子边框的角度，所以我们在options中配置series即可

    series: [
          {
            name: '1',
            barWidth: this.barWidth, // y轴柱宽
            type: 'bar',
            stack: 'Ad',
            itemStyle: {
                barBorderRadius: 4//柱子的圆角
            },
        
          },
        ]

但是会出现如下情况：

四个边都是圆角,所以依照我们给盒子设置边角的习惯给其置换为一个四元素的数组即可，代码如下：

   barBorderRadius: [4, 4, 0, 0]

即可得到我们所需的效果😊

补充：series.itemStyle.barBorderRadius 相关参数

默认值：0

参数类型：Number，Array

可选参数：

barBorderRadius：1 ，四个角的圆角半径为1px
barBorderRadius：[ 1 ] ，四个角的圆角半径为1px
barBorderRadius：[ 2 , 3 ] ，上下为2px，左右为3px
barBorderRadius：[ 2 , 3 ，4 ，5 ] ，与css的书写习惯一样，为上右下左顺序即
坐上为2px，右上为3px，左下为4px，右下为5px