实现前台样式的时候发现饼状图文字部分重合了

前言

实现前台样式的时候发现饼状图文字部分重合了如下面所示：

找了很多方法以下是个人总结的：

1.解决方法

代码如下,添加normal这段代码下面的textstyle控制字体的大小（示例）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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
       }
    }
}]