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

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

原始效果图:

 目标样式:

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

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

javascript">    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
转载请说明出处内容投诉
CSS教程_站长资源网 » ECharts 使用series.itemStyle.barBorderRadius设置柱状图圆角

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买