步骤
1、最小角度- 防止数据量太小,只显示一条线,所有都挤在一起
minAngle: 5,
2、开启自带的防重叠策略
avoidLabelOverlap: true,
3、将显示的文字缩小
fontSize: '9',
代码
let option = {
tooltip: {
trigger: 'item',
formatter: "{b}"
},
legend: {
// 取消图例上的点击事件,这个看需求
selectedMode: false,
// 分布方式,水平:'horizontal',垂直:'vertical'
orient: 'horizontal',
// 水平对齐方式,可设置为'left','center','right',number(px)
x: 'center',
// 垂直对齐方式,可设置为'top','center','bottom',number(px)
y: 'top',
// 距顶部的距离,其他同理
top: '75%',
// 距左边的距离,其他同理
// left: '10%',
// 图标大小,宽和高
itemWidth: 12,
itemHeight: 12,
// 显示内容
data: markArr.map((item) => { return item.name }),
},
series: [
{
name:'',
type:'pie',
minAngle: 5, // 1、最小角度- 防止数据量太小
radius: ['40%', '47%'],
center: ['50%', '40%'],
avoidLabelOverlap: true, // 2、开启防重叠策略
hoverAnimation:false,
label: {
normal: {
show: true,
formatter: '{c} ({d}%)', //自定义显示格式(b:name, c:value, d:百分比)
textStyle: {
fontSize: '9', // 3、缩小显示文字的字号
color: 'black'
}
},
},
labelLine:{
normal:{
lineStyle: {
color: "black" // 改变标示线的颜色
}
},
},
data: markArr,
color: ["#7CAFDD", "#F1975A", "#B7B7B7", "#FFCD33", "#698ED0", "#8CC168", "#5B9BD5", "#ED7D31", "#327DC2", "#D26012", "#A5A5A5", "#FFC000", "#4472C4", "#70AD47", "#797979", "#9E480E", "#636363", "#997300", "#264478", "#43682B"],
}
]
}