echarts环形饼图标签字数过长被遮挡

1. 甜甜圈饼图/环形图：

标签文字过长会被容器遮挡，设置成当字数大于4小于4的时候一行展示两个字

HTML

<el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>报警来源统计</span>
    </div>
    <div id="alarm_source"></div>
    <div id="alarm_control"></div>
    <div id="online_inspection"></div>
</el-card>复制

JS

mounted: function() {
		this.alarmSourceChart()
		this.alarmControlChart()
		this.onlineInspectionChart()
	});
},
 
methods: {
   // 报警来源
	alarmSourceChart() {
		var that = this;
		this.httpPost('admin-alarm-api/alarm-source', {
			admin_user_id: admin_user_id,
			admin_user_token: admin_user_token,
		}, function(msg, data) {
			that.doughnutChart('alarm_source',data.total,'报警来源',data.res)
		})
	},
	// 动环辅控
	alarmControlChart() {
		var that = this;
		this.httpPost('admin-alarm-api/sensor-alarm', {
			admin_user_id: admin_user_id,
			admin_user_token: admin_user_token,
		}, function(msg, data) {
			that.doughnutChart('alarm_control',data.sensor,'动环辅控',data.res)
		})
	},
	// 在线检测
	onlineInspectionChart() {
		var that = this;
		this.httpPost('admin-alarm-api/detector-alarm', {
			admin_user_id: admin_user_id,
			admin_user_token: admin_user_token,
		}, function(msg, data) {
			that.doughnutChart('online_inspection',data.total,'在线检测',data.res)
		})
	},
	
	// 甜甜圈饼图模板
    doughnutChart(id,title1,title2, serialData) {
        echarts.dispose(document.getElementById(id));
        let myChart = echarts.init(document.getElementById(id));
        myChart.setOption({
            color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            title:[{
                    text: title1,
                    top: '44%',
                    textAlign: "center",
                    left: "50%",
                    textStyle: {
                        color: '#7afeff',
                        fontSize: 30,
                    }
                }, {
                    text: title2,
                    top: '52%',
                    textAlign: "center",
                    left: "50%",
                    textStyle: {
                        fontWeight: '600',
                        color: '#F0F2F5',
                        fontSize: 22,
                    }
            }],
            tooltip: {
                trigger: 'item'
            },
			grid: {
				left: '50%',
			},
            label: {
				position: 'outer',  
				alignTo: 'edge',  
				margin: 0,
				formatter: function(v) {
					let text = v.name;
					let value_format = v.value;
					if (id == "jf_probability") {
						value_format = value_format+'%';
					} else {
						value_format = value_format+'次';
					}
					
					if (text.length <= 2) {
					return `${text}\n${value_format}`;
					} else if (text.length > 2 && text.length <= 4) {
					return text = `${text.slice(0, 2)}\n${text.slice(2)}\n${value_format}`
					} else if (text.length > 4 && text.length <= 6) {
					return text = `${text.slice(0, 3)}\n${text.slice(3)}\n${value_format}`
					} else if (text.length > 6 && text.length <= 9) {
					return text = `${text.slice(0, 3)}\n${text.slice(3, 6)}\n${text.slice(6)}\n${value_format}`
					}
					
				},
				edgeDistance:'25%',
				// minMargin: 5,
				// edgeDistance: 10,
				// lineHeight: 15,
				fontSize: 15,
				color: '#7afeff',
				rich: {
					time: {
						fontSize: 15,
						color: '#7afeff'
					}
				},
			},
            series: [
                {
					type: 'pie',
					radius: ['30%', '60%'],
					itemStyle: {
						borderRadius: 10,
					},
					avoidLabelOverlap: true,//防止标签重叠
					data:serialData,
					emphasis: {
						// 鼠标经过lable变大
						// label: {
						// 	show: true,
						// 	fontSize: '40',
						// 	fontWeight: 'bold'
						// },
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
                }
            ]
        });
		// 当我们浏览器缩放的时候，图表也等比例缩放
		window.addEventListener("resize", function() {
			// 让我们的图表调用 resize这个方法
			myChart.resize();
		});
    },
}复制