【eCharts】echarts饼状图数据重叠导致指示线及显示文字重叠解决

最新推荐文章于 2025-06-16 16:18:28 发布

敲个锤子

最新推荐文章于 2025-06-16 16:18:28 发布

阅读量1.8w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： eChart

本文链接：https://blog.csdn.net/liangayang/article/details/84792294

eChart 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在ECharts中实现饼图标签自动换行的方法，通过判断标签长度并进行切分，解决了标签过长导致的显示问题。核心代码在label的formatter函数中实现，根据不同长度的标签进行相应的换行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自：https://www.cnblogs.com/minjh/p/9081893.html 先看他的，再看我的，不看我的也行

1. 解决前

2.解决后

3.代码

function makePie(id, title, name, data, show) {
    if (!show) {
        show = false;
    }
    var myChart = echarts.init(document.getElementById(id));
    var option = {
        title: {
			show:false,
            text: title,
            top: 2,
            left: '20',
			textStyle: {fontSize: 14,color:'#767676',fontWeight:600,fontFamily:'Microsoft Yahei'},
			
        },
        tooltip: {
            trigger: 'item',
			textStyle: {fontSize: 12,fontFamily:'Microsoft Yahei'},
            formatter: function (params) {
                return params.data.name + ":<br/>" + fmoneyf(params.data.value, 0) + "(" + params.percent + "%)";
            }
        },
        legend: {
            // type: 'scroll',
			orient:'vertical',
			top:80,
			y:'middle',
			height:'60%',
            right: getValueFromJson(data, 'name').length > 6 ? 0 : 5,
		    textStyle: {fontSize: 12,color:'#848484'},
			icon:'circle',
            data: getValueFromJson(data, 'name')
        },
        series: [
            {
                name: name,
                x: 'left',  
                y: 'center', 
                type: 'pie',
				center:['50%', '60%'],
                //radius: getValueFromJson(data, 'name').length > 6 ?  ['40%', '84px'] :  ['46%','90px'],
				 radius: '55%',
                avoidLabelOverlap: true,
                minAngle: 5,
                label: {
                	align: 'left',
                	normal: {
                        show: show,
						lineHeight:30,
						textStyle: {fontFamily:'Microsoft Yahei'},
						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)}`
                            }
                        },
						rich: {  
							color1: {  
								color: '#000000',
								fontSize: 14,
								lineHeight:12,
								fontWeight:600
							},  
							color2: {  
								color: '#848484'  ,
								fontSize: 12,
							}  
						},  
                    }, emphasis: {
                        show: !show,
						textStyle: {fontSize: 12,color:'#000000',fontFamily:'Microsoft Yahei'},
                        formatter: function (params) {
                            return params.data.name + ": " + fmoneyf(params.data.value, 0) + "(" + params.percent + "%)";
                        }
                    }
                },
				
				labelLine:{
					length:10,
					length2:100,
					lineStyle:{
						color:'#848484',
						
					}
				},
                data: data,
                color:getValueFromJson(data, 'color'),
            }
        ]
    };
    myChart.setOption(option);
}

4.主要代码段：

series: [
            {
                name: name,
                x: 'left',  
                y: 'center', 
                type: 'pie',
				center:['50%', '60%'],
                //radius: getValueFromJson(data, 'name').length > 6 ?  ['40%', '84px'] :  ['46%','90px'],
				 radius: '55%',
                avoidLabelOverlap: true,
                minAngle: 5,
                label: {
                	align: 'left',
                	normal: {
                        show: show,
						lineHeight:30,
						textStyle: {fontFamily:'Microsoft Yahei'},
						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)}`
                            }
                        },
						rich: {  
							color1: {  
								color: '#000000',
								fontSize: 14,
								lineHeight:12,
								fontWeight:600
							},  
							color2: {  
								color: '#848484'  ,
								fontSize: 12,
							}  
						},  
                    }, emphasis: {
                        show: !show,
						textStyle: {fontSize: 12,color:'#000000',fontFamily:'Microsoft Yahei'},
                        formatter: function (params) {
                            return params.data.name + ": " + fmoneyf(params.data.value, 0) + "(" + params.percent + "%)";
                        }
                    }
                },

ps:转载的