This article is reproduced from: https://www.cnblogs.com/yingsu/p/10608014.html

I have searched a lot on the Internet before to solve the problem of overlapping pie chart text descriptions that are too long. I have found a lot and have not found a suitable solution. In the end, I can only spend time studying the echarts document. Incomplete display, etc.

Don't talk nonsense, just put the code on the picture

This is the display effect of the mobile phone screen

Here's my solution

The first step: adjust the display size of the text, the text on the mobile phone can be smaller, here I use the 8px font size

Step 2: Set the minimum sector angle, minAngle (minimum sector angle (0 ~ 360), used to prevent a certain value from being too small and causing the sector to be too small to affect interaction)

The third step: avoidLabelOverlap (whether to enable the label overlap prevention strategy, the default is enabled by default)

Step 4: Text wrapping display, echarts provides us with a formatter (tag content formatter, supports two forms of string template and callback function, string template and the string returned by the callback function support the use of \n newline) attribute .

The key code is as follows:

series: [
            {
                type: 'pie',
                clickable:false,　　　　　　 //Whether to enable click
                minAngle: 5,           　　 //The minimum sector angle (0 ~ 360), which is used to prevent a certain value from being too small to cause too small a sector to affect interaction
                avoidLabelOverlap: true,   //Whether to enable the prevent label overlap policy
                hoverAnimation:false,　　  //Whether to enable the zoom-in animation effect of hover on sectors.
                silent: true,　　　　　　　　//Does the graph not respond and fire mouse events
                radius: ['30%', '60%'],
                center: ['50%', '50%'],
                data: [],
                label:{
                    align: 'left',
                    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 : 8
                        }
                    }
                }
            }

],

The processed display effect

Several solutions for Echarts x-axis text content too long

refer to: https://blog.csdn.net/zm_miner/article/details/78321254

Not bad, I hope it can help children in need.