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

这篇具有很好参考价值的文章主要介绍了ECharts 使用series.itemStyle.barBorderRadius设置柱状图圆角。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

原始效果图：

ECharts 使用series.itemStyle.barBorderRadius设置柱状图圆角,echarts,前端,javascript

目标样式：

ECharts 使用series.itemStyle.barBorderRadius设置柱状图圆角,echarts,前端,javascript

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

ECharts 使用series.itemStyle.barBorderRadius设置柱状图圆角,echarts,前端,javascript

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

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

但是会出现如下情况：

ECharts 使用series.itemStyle.barBorderRadius设置柱状图圆角,echarts,前端,javascript

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

   barBorderRadius: [4, 4, 0, 0]

ECharts 使用series.itemStyle.barBorderRadius设置柱状图圆角,echarts,前端,javascript

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

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

默认值：0

参数类型：Number，Array

可选参数：文章来源地址https://www.toymoban.com/news/detail-735731.html

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

到了这里，关于ECharts 使用series.itemStyle.barBorderRadius设置柱状图圆角的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！