今天在使用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}}}}
}
效果图:
看到了吧,文字默认是在柱状中,但如果数据很小,文字就会击穿x轴,影响很大。
最理想的效果就是(文字以柱状的底部为基点,往上垒砌,这样就不会有击穿底部和顶部的可能了。)
理想效果图:
1. 为了理想,开始进击:
我们首先看看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竟然有这个属性值:insideRight(柱状内部靠右)
曙光在我的脑海里擦出火花,类推应该是有insideBottom(柱状内部靠下)这个属性值的。
是的,这个属性值是存在的。哈哈哈,问题迎刃而解(跳舞中)。
3.insideBottom(柱状内部靠下)这个属性值
position:'inside'
转为:
position:'insideBottom'
效果图:
看着就是舒服。
4.总结
echarts bar series下的label position的属性值:
1:inside(自适应,柱状内部中央),top(柱状外的正上方),bottom(柱状外的正下方),left(柱状外的左边),right(柱状外的右边)
2:坐标[x,y](以柱状的顶部为原点)
3:insideTop(柱状内部靠顶部),insideBottom(柱状内部靠下方),insideRight(柱状内部靠右边),insideLeft(柱状内部靠左边)
---------------------------------------------------------------------------不关注我“象话”吗?
如有疑惑,请评论留言。
如有错误,也请评论留言。