使用echarts 打印饼图，在pc没问题，但一到移动端问题就来了，由于屏幕过小，导致label部分被遮挡
还好echarts 提供了formatter方法
series: [
{
name: seriesName || '数据来源',
type: 'pie',
clickable: false, //是否开启点击
minAngle: 15, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
avoidLabelOverlap: true, //是否启用防止标签重叠策略
hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
silent: true, //图形是否不响应和触发鼠标事件
center: ['50%', '55%'],
radius: ['20%', '45%'],
labelLine: { // 设置指示线的长度
normal: {
length: 12,
length2: 8
}
},
label: {
normal: {
formatter: '{b|{b}}\n{c}\n{per|{d}%} ',
rich: {
b: {
fontSize: 12,
height: 60,
lineHeight: 20,
align: 'center' // 设置文字居中
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2,
align: 'center',
}
}
}
},
data: dataArray || [
{ value: 0, name: '存量导入数据' },
{ value: 0, name: '异构导入数据' },
{ value: 0, name: '互联网导入数据' },
]
}
]
label: {
normal: {
formatter(v) {
let text = v.name;
let value_format = v.value;
let percent_format = Math.round(v.percent) + '%';
if (text.length <= 20) {
return `${text}\n${value_format}\n${percent_format}`;
} else if (text.length > 20 && text.length <= 40) {
console.log(`${text.slice(0, 20)}`)
return text = `${text.slice(0, 20)}\n${text.slice(20)}\n${value_format}\n${percent_format}`
} else if (text.length > 40 && text.length <= 60) {
return text = `${text.slice(0,20)}\n${text.slice(20, 40)}\n${text.slice(40)}\n${value_format}\n${percent_format}`
} else if (text.length > 60 && text.length <=80) {
return text = `${text.slice(0, 20)}\n${text.slice(20, 40)}\n${text.slice(40, 60)}\n${text.slice(60)}\n${value_format}\n${percent_format}`
} else if (text.length >80 && text.length <= 100) {
return text = `${text.slice(0, 20)}\n${text.slice(20, 40)}\n${text.slice(40, 60)}\n${text.slice(60, 80)}\n${text.slice(80)}\n${value_format}\n${percent_format}`
} else if (text.length > 100) {
return text = `${text.slice(0, 20)}\n${text.slice(20, 40)}\n${text.slice(40, 60)}\n${text.slice(60, 80)}\n${text.slice(80, 100)}\n${text.slice(100)}\n${value_format}\n${percent_format}`
}
},
textStyle: {
fontSize: 14
}
}
}