echarts pie chart problem adjustment

1. Why is the pie chart label displayed incompletely in echarts?

Too many labels: When the pie chart has a large number of sectors, in order to ensure the clarity of the graphics, ECharts may not display all labels, but choose to display some labels or not display labels.
The label is too long: If the text of the label is too long, it may not be fully displayed in the pie chart. In this case, the label may need to be truncated or wrapped.
Insufficient graph size: If the size of the pie chart is not set large enough, the label may not be fully displayed. You can check if you gave enough size when setting up the ECharts container.
Label position setting: You can check whether the label position is set, such as the labelPosition attribute. If the position setting is unreasonable, it may also cause the label to not display properly.
Other settings: There are some other attribute settings, such as the show attribute in label, which determines whether to display the label. If the label is not displayed, it will naturally not be fully displayed.

Solution to incomplete display of pie chart labels

1. No pre-effect is set

The problem I encountered is that the labels overlap
Insert image description here
You can see that there are ten labels, but only 5 are displayed

2. Set up overlay display

Add attributesinseries:label

series: [{
    
    
	labelLayout: {
    
    
		hideOverlap: false // 是否隐藏重叠标签
	},
}]

3. Set the after-effects

Insert image description here
You can see that the overlapping labels are also displayed, but the effect is not very good.

4. Set the angle

Add the following code below labelLayout

series: [{
    
    
	minAngle: 15, //最小角度
	startAngle: 270, //起始角度
}]

5. Final effect

Insert image description here
Finish

2. The pie chart label and the pie chart are too close together

Adjustment

1. Adjust using`center` elements

Add elements in The center (center) coordinates of the pie chart, the first item of the array is the abscissa, and the second item is the ordinate. seriescenter

Supports setting to percentage. When set to percentage, the first item is relative to the width of the container, and the second item is relative to the height of the container.

Usage example:

// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']

series: [{
    
    
	center:['50%', '20%'],
}]

2. No pre-effects are set

Insert image description here

3. Set the after-effects and final effect

ExistenceseriesAdditional centerElement

series: [{
    
    
	center:['50%', '20%'],
}]

Insert image description here
Finish