series: [
{
type: 'pie',
radius: ['50%', '65%'],
label: {
show: true,
position: 'top',
color: '#1B233E',
formatter: function (params) {
return params.name + ' ' + params.percent + '%'
}
},
data: []
}
]
修改后
series: [
{
type: 'pie',
radius: ['50%', '65%'],
center: ['50%', '55%'],
label: {
show: true,
position: 'top',
color: '#1B233E',
formatter: function (params) {
return params.name + ' ' + params.percent + '%'
}
},
data: []
}
]
文字过长重叠的问题
解决方案
第一步:调整文字的显示大小,手机上文字可以更小,这里我用的是8px字号
第二步:设置最小扇区角度,minAngle(最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互)
第三步:avoidLabelOverlap(是否启用防止标签重叠策略,默认默认开启)
第四步:文字换行展示,echarts给我们提供了一个 formatter(标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用
\n换行)属性。
series: [
{
type: 'pie',
radius: ['50%', '65%'],
center: ['50%', '55%'],
minAngle: 2, // 最小的扇区角度(0~360),用于防止某个值过小导致扇区太小影响交互
avoidLabelOverlap: true, // 是否启用防止标签重叠策略
label: {
show: true,
position: 'top',
color: '#1B233E',
formatter: function (params) {
return params.name + ' ' + params.percent + '%'
}
},
data: []
}
]
效果