echarts 实现柱状图bar顶部圆角显示

效果展示:

关键代码

javascript 复制代码
            itemStyle: {
                normal: {
                    barBorderRadius:[5, 5 , 0, 0]
                }
            }

完整代码

javascript 复制代码
option = {
        title: {
            text: '',
            textStyle: {
                color: '#000',
                fontSize: 14
            }
        },
        tooltip: {},
        grid: {
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: true
        },
        xAxis: {
            data: ['赵','钱','孙','李'],
            axisLine: {
                lineStyle: {
                    color: '#cccccc'
                }
            },
        },
        yAxis: {
            axisLine: {
                lineStyle: {
                    color: '#cccccc'
                }
            },
        },
        series: [{
            type: 'bar',
            data: [10,30,50,29],
            barMaxWidth: 25,
            itemStyle: {
                normal: {
                    barBorderRadius:[5, 5 , 0, 0]
                }
            }
        }]
    };
相关推荐
我只会写Bug啊4 小时前
Vue文件预览终极方案:PNG/EXCEL/PDF/DOCX/OFD等10+格式一键渲染,开源即用!
前端·vue.js·pdf·excel·预览
扯蛋4385 小时前
LangChain的学习之路( 一 )
前端·langchain·mcp
Mr.Jessy5 小时前
Web APIs学习第一天:获取 DOM 对象
开发语言·前端·javascript·学习·html
午安~婉5 小时前
javaScript八股问题
开发语言·javascript·原型模式
西西学代码6 小时前
Flutter---个人信息(5)---持久化存储
java·javascript·flutter
芝麻开门-新起点6 小时前
flutter 生命周期管理:从 Widget 到 State 的完整解析
开发语言·javascript·ecmascript
ConardLi6 小时前
Easy Dataset 已经突破 11.5K Star,这次又带来多项功能更新!
前端·javascript·后端
冴羽6 小时前
10 个被严重低估的 JS 特性,直接少写 500 行代码
前端·javascript·性能优化
rising start7 小时前
四、CSS选择器(续)和三大特性
前端·css
一 乐7 小时前
高校后勤报修系统|物业管理|基于SprinBoot+vue的高校后勤报修系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·毕设