十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
对于多行标签的重叠问题,其实一直没有一个完美的解决方案。
成都创新互联服务项目包括静乐网站建设、静乐网站制作、静乐网页制作以及静乐网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,静乐网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到静乐省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
我能在网上查到的比较全面的解决方法就是这个:https://zhuanlan.zhihu.com/p/
但我的项目中某些东西是明确的:Label的行数、字体大小、数据个数(只有6个)、而且不必要做适配。
所以我就用曲线救国的方式避免了多行标签的重叠。
PS:我觉得5.0.0版本以上的labelLayout
可能是一个更好的曲线救国方式,不过我这里是4.8.0的。
我的问题:有许多小百分比的数据,导致label重叠:
ECharts饼图的label方向似乎是固定的,所以先调整一下数组元素的顺序,让label可以不仅仅放在左边(我的需求是从小到大的顺序,这里暂时改回了单行label)。
效果:
标签重叠是因为离得近,那我让它们离远点就好了。
代码:
//Chart配置文件
option: {
tooltip: {
trigger: 'item'
},
series: [
{
//一些代码
//等会这里就需要修改了
data: [
],
//一些代码
//这里就是标签,我想让它以某种样式显示两行
label: {
formatter: [
'{c|{c}}',
'{b|{b}}',
].join('\n'),
rich: {
c: {
color: "#00EDFF",
fontSize: 17,
fontFamily: 'PingFangSC-Semibold, PingFang SC',
height:18,
fontWeight: 600,
align:"right",
},
b: {
color: "#FFFFFF",
height:18,
fontSize: 14,
fontWeight: 500,
},
},
//这里可以先设置全局的长度
labelLine:{
length:10,
}
},
}
]
},
//处理下数据
//调数组顺序
let temp = arr.pop()
arr.unshift(temp)
temp = arr.pop()
arr.unshift(temp)
//改变标签线的长度(这里不一定要写死,如果有时间的话应该也可以通过一些算法算出来。我自己项目中也有更多的判断,这里删掉了。)
arr[0].labelLine = {}
arr[4].labelLine = {}
arr[5].labelLine = {}
arr[0].labelLine.length = 50,
arr[4].labelLine.length = 30,
arr[5].labelLine.length = 50,
this.option.series[0].data = res.data