之前在網上查找了很多關于解決餅圖文字描述過長導致重疊的問題，找了很多一直沒有一個合適的解決方案，最后自己只能花時間研究echarts文檔，功夫不負有心人，終于解決了文字重疊展示不全等問題。

廢話不多說，直接上圖上代碼

這是手機屏幕的展示效果

下面再來說下我的解決方案

第一步：調整文字的顯示大小，手機上文字可以更小，這里我用的是8px字號

第二步：設置最小扇區角度，minAngle(最小的扇區角度(0 ~ 360)，用于防止某個值過小導致扇區太小影響交互)

第三步：avoidLabelOverlap(是否啟用防止標簽重疊策略，默認默認開啟)

第四步：文字換行展示，echarts給我們提供了一個?formatter(標簽內容格式器，支持字符串模板和回調函數兩種形式，字符串模板與回調函數返回的字符串均支持用?\n?換行)屬性。

關鍵代碼如下：

series: [

{

type: 'pie',

clickable:false,　　　　　　 //是否開啟點擊

minAngle: 5, 　　 //最小的扇區角度(0 ~ 360)，用于防止某個值過小導致扇區太小影響交互

avoidLabelOverlap: true, //是否啟用防止標簽重疊策略

hoverAnimation:false,　　 //是否開啟 hover 在扇區上的放大動畫效果。

silent: true,　　　　　　　　//圖形是否不響應和觸發鼠標事件

radius: ['30%', '60%'],

center: ['50%', '50%'],

data: [],

label:{

align: 'left',

normal:{

formatter(v) {

let text = Math.round(v.percent)+'%' + '' + 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)}`

}

},

textStyle : {

fontSize : 8

}

}

}

}

],

處理后的展示效果

還不錯吧，希望能夠幫助到有需要的童鞋。

總結

以上是生活随笔為你收集整理的echart饼图标签重叠_Echarts 解决饼图文字过长重叠的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。