Echarts 饼图移入时 指示线消失了
1.指示线长度问题
labelLine: { // 统一设置指示线长度
normal: {
length: 15
}
},
2.在series里面设置指示线位置,防止重叠了导致另一方不显示了
series: [
{
name: '合计',
type: 'pie',
hoverAnimation: false,
// clockwise: 'true',
// startAngle: '100',
radius: '50%',
center: ['50%', '60%'],
labelLine: { // 统一设置指示线长度
normal: {
length: 15
}
},
data: this._optionsdata,
startAngle: 90,
minAngle: 5, // 设置最小角度
avoidLabelOverlap: true,
label: {
align: 'left',
normal: {
show: true, // 设置 指示线 全部显示
lineHeight: 30,
textStyle: {fontFamily: 'Microsoft Yahei'},
// tslint:disable-next-line:typedef
formatter(v) { //设置 指示线位置 这个·挺舒服
let text = 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)}`;
}
},
rich: {
color1: {
color: '#000000',
fontSize: 14,
lineHeight: 12,
fontWeight: 600
},
color2: {
color: '#848484',
fontSize: 12,
}
},
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
// shadowOffsetX: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
差不多上面 都可以实现了
如图: