实现前台样式的时候发现饼状图文字部分重合了
前言
实现前台样式的时候发现饼状图文字部分重合了如下面所示:
找了很多方法以下是个人总结的:
1.解决方法
代码如下,添加normal这段代码下面的textstyle控制字体的大小(示例):
series: [{
name: '类型',
minAngle: 5,//这个属性可以控制扇形区域的最小值,防止出现区域为0.01%之类的很小的山顶点不到的情况
//这里还有其余的部分
normal:{
formatter(v) {
let text = Math.round(v.percent)+'%' + '' + v.name
if(text.length <= 8)
{
return text;
}else if(text.length > 8 && text.length <= 16){
return text = `${text.slice(0,8)}\n${text.slice(8)}`
}else if(text.length > 16 && text.length <= 24){
return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`
}else if(text.length > 24 && text.length <= 30){
return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`
}else if(text.length > 30){
return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`
}
},
//宪强加的防止标签覆盖
textStyle:{
//字体大小
fontSize: 12
}
}
}]