当前位置: 代码迷 >> 综合 >> echarts bar series下的label position问题
  详细解决方案

echarts bar series下的label position问题

热度:123   发布时间:2023-10-20 03:38:07.0

今天在使用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;}if(param.dataIndex==4){return '糖\n尿\n病\n'+param.value;}if(param.dataIndex==5){return '冠\n心\n病\n'+param.value;}},textStyle:{fontSize:18}}}}
}

效果图:

 

echarts bar series下的label position问题

看到了吧,文字默认是在柱状中,但如果数据很小,文字就会击穿x轴,影响很大。

最理想的效果就是(文字以柱状的底部为基点,往上垒砌,这样就不会有击穿底部和顶部的可能了。)

理想效果图:echarts bar series下的label position问题

 

1. 为了理想,开始进击

我们首先看看echarts bar series下的label position的属性值都有哪些?

我特意在网上搜索,得知:echarts bar series下的label position问题

有这几个属性值,我尝试使用“top”代替“inside”。但依旧存在问题,文字击穿图表的顶部。

------(失败)继续搜索·······

我在Echarts官网的实例上看到这个position居然有坐标[x,y]的属性值来表示,但依旧无用,因为坐标原点是柱状的最高点,尼玛----为什么不是以柱状的底部呢?

------(失败)继续搜索........

我居然妄想,在每一个柱状中隐藏一个虚拟的高度为零的子柱状,在子柱状的top上放上文字,这样就解决了,(哈哈哈,太聪明了)----悲催,代码能够飘向宇宙,放弃这种尝试

------(失败)继续搜索........

再次在Echarts的gl实例中徘徊搜索。

 

2. 终于,我看到了这个柱状图:(曙光)

附上地址:http://gallery.echartsjs.com/editor.html?c=xHk8BJ26Ie

echarts bar series下的label position问题

 

echarts bar series下的label position竟然有这个属性值:insideRight(柱状内部靠右)

曙光在我的脑海里擦出火花,类推应该是有insideBottom(柱状内部靠下)这个属性值的。

是的,这个属性值是存在的。哈哈哈,问题迎刃而解(跳舞中)。

 

3.insideBottom(柱状内部靠下)这个属性值

position:'inside'
转为:
position:'insideBottom'
效果图:

echarts bar series下的label position问题

 
看着就是舒服。

 

4.总结

echarts bar series下的label position的属性值:

1:inside(自适应,柱状内部中央),top(柱状外的正上方),bottom(柱状外的正下方),left(柱状外的左边),right(柱状外的右边)
2:坐标[x,y](以柱状的顶部为原点)
3:insideTop(柱状内部靠顶部),insideBottom(柱状内部靠下方),insideRight(柱状内部靠右边),insideLeft(柱状内部靠左边)

 

---------------------------------------------------------------------------不关注我“象话”吗?

如有疑惑,请评论留言。

如有错误,也请评论留言。

  相关解决方案