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

绝地灬酷狼 2023-10-05 11:01 42阅读 0赞

#### 1 使用详解 ####

**series.itemStyle.barBorderRadius**

说明：圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。

默认值：0。

参数类型：number，Array。

可选参数：

（1）1，统一设置四个角的圆角半径为1px。

（2）\[1\]，统一设置四个角的圆角半径为1px。

（3）\[2,3\]，左上和右下圆角半径为2px，右上和左下圆角半径为3px。

（4）\[2,3,4,5\]，左上圆角半径为2px，右上圆角半径为3px，右下圆角半径为4px，左下圆角半径为5px。

#### 2 原始效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

#### 3 实现代码（设置圆角） ####

<body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
     
            // 指定图表的配置项和数据
            var option = {
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {
    				splitLine:{show:false}
    			},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
    				itemStyle:{barBorderRadius: [20]}//设置圆角
                }]
            };
     
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>

#### 4 最终效果图（设置圆角） ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201001173815894.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201001174125331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70