The series in the pie chart has an avoidLabelOverlap property.
avoidLabelOverlap: if or not enable label overlap prevention policy, default is on, in case of crowded and overlapped labels, it will move the position of each label to prevent overlap between labels.
When avoidLabelOverlap is set to false the following occurs
Change it to true and it won't overlap
The code is as follows
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
//orient: "vertical",
x: "0%",
//y: "25%",
//y: "5%",
itemWidth: 14,
itemHeight: 14,
align: "left",
data: xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "Hazardous source status",
type: "pie",
radius: ["25%", "45%"],
center: ["50%", "60%"],
avoidLabelOverlap: true,//Yeah, it's here avoidLabelOverlap
label: {
normal: {
show: true,
position: "center"
},
emphasis: {
show: true,
textStyle: {
fontSize: "12",
fontWeight: "bold"
}
}
},
labelLine: {
normal: {
show: true
}
},
data: pieData
}
]
};
Additional knowledge:echarts bar chart easy to realize the y-axis with two different units respectively
echarts bar charts are easily implemented with two separate y-axes in two different units:
Secret book:
coding
// Initialize the echarts instance based on the prepared dom
var colors = ['#0089FF','#B865DF',/*'#5ADF63','#FFDD00',*/'#224666', '#675bba'];
// Specify the configuration items and data for the chart
option = {
/*grid:{
y:'25%'},*/
color: colors,
/* title: {
text: 'Comparison of Indicators by Hospital',
left: 16,
textStyle: {
fontSize: 18,
color:'#0089FF'
}
},*/
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data:['Number of groups','CMI'],
x:'80%'
},
xAxis: [
{
type: 'category',
data: arr,
axisPointer: {
type: 'shadow'
},
axisLine: {
show: true,
/* lineStyle: {
color: '#05edfc'
}*/
},
axisLabel: {
show: true,
/* color: '#fff',*/
fontSize: 12,
interval: 0,
formatter:function(value)
{
return value;
}
//fontWeight: 'bold'
}
},
],
yAxis: [
{
type: 'value',
name: 'Overall indicators for the group',
position: 'left',
splitLine:{show: true},
axisLine: {
show: false,
/* lineStyle: {
color: '#E7E7E7'
}*/
},
axisLabel: {
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: '{value}'
},
},
{
type: 'value',
name: 'CMI',
position: 'right',
splitLine:{show: true},
axisLine: {
show: false,
/* lineStyle: {
color: '#E7E7E7'
}*/
},
axisLabel: {
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: '{value}'
},
},
],
series: [
{
name:'Number of groups',
type:'bar',
barWidth : 20,
data:arr2,
yAxisIndex: 0,
/* markPoint : {
data : [
{type : 'max', name: 'max'}, {type : 'min', name: 'min'}, {type : 'max', name: 'min'}
{type : 'min', name: 'min'}
]
}*/
},
{
name:'CMI',
type:'bar',
barWidth : 20,
data:arr3,
yAxisIndex: 1,
/* markPoint : {
data : [
{type : 'max', name: 'max'}, {type : 'min', name: 'min'}, {type : 'max', name: 'min'}
{type : 'min', name: 'min'}
]
}*/
}
]
};
The above article to solve the problem of overlapping pie chart labels in echarts is all I have to share with you, I hope it will give you a reference, and I hope you will support me more.