echart饼图标签重叠_Echarts 解决饼图文字过长重叠的问题
之前在網上查找了很多關于解決餅圖文字描述過長導致重疊的問題，找了很多一直沒有一個合適的解決方案，最后自己只能花時間研究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 解决饼图文字过长重叠的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机版ziperello_Ziperel
- 下一篇： multisim怎么设置晶体管rbe_M