echarts bar series下的label position问题

在使用Echarts柱状图时,遇到文字位置问题,导致数据小时击穿x轴。通过探索发现,bar系列的label position除了常见的属性值外,还有'insideBottom',该属性能将文字定位在柱状内部靠下,完美解决文字击穿底部的问题。通过调整此属性,实现了理想中的视觉效果。
摘要由CSDN通过智能技术生成

今天在使用Echarts柱状图时,遇到了一个视觉优化问题。

解决前的Echarts柱状图代码片段:

{
    name:'最后一名',
    type:'bar',
    barWidth:40,
    data:[54,53,51,50,47,5],
    itemStyle:{
        normal:{
            color:'rgb(0,128,70)',
            label:{
                show:true,
                position:'inside',
                formatter:function(param){
                    if(param.dataIndex==0){
                        return '关\n节\n炎\n'+param.value;
                    }
                    if(param.dataIndex==1){
                        return '冠\n心\n病\n'+param.value;
                    }
                    if(param.dataIndex==2){
                        return '胃\n病\n'+param.value;
                    }
                    if(param.dataIndex==3){
                        return'胃\n病\n'+param.value;
                    }
        
  • 14
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 19
    评论
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

象话

打赏犹如太阳穴的枪口

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

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

打赏作者

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

抵扣说明:

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

余额充值