Echarts solves the problem of too long and overlapping pie chart text

This article is reproduced from:

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: [],
                    align: 'left',
                        formatter(v) {
                            let text = Math.round(v.percent)+'%' + '' +
                            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:

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

Posted by jpmm76 on Wed, 11 May 2022 14:00:02 +0300