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

文章介绍了如何使用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

可选参数:

  1. barBorderRadius:1   ,四个角的圆角半径为1px
  2. barBorderRadius:[ 1 ]   ,四个角的圆角半径为1px
  3. barBorderRadius:[ 2 , 3 ]   ,上下为2px,左右为3px
  4. barBorderRadius:[ 2 , 3 ,4 ,5 ]   ,与css的书写习惯一样,为上右下左顺序即
    坐上为2px,右上为3px,左下为4px,右下为5px
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ashindn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值