echart饼图标签重叠_Echarts 解决饼图文字过长重叠的问题
之前在網(wǎng)上查找了很多關(guān)于解決餅圖文字描述過(guò)長(zhǎng)導(dǎo)致重疊的問(wèn)題，找了很多一直沒(méi)有一個(gè)合適的解決方案，最后自己只能花時(shí)間研究echarts文檔，功夫不負(fù)有心人，終于解決了文字重疊展示不全等問(wèn)題。
廢話不多說(shuō)，直接上圖上代碼
這是手機(jī)屏幕的展示效果
下面再來(lái)說(shuō)下我的解決方案
第一步：調(diào)整文字的顯示大小，手機(jī)上文字可以更小，這里我用的是8px字號(hào)
第二步：設(shè)置最小扇區(qū)角度，minAngle(最小的扇區(qū)角度(0 ~ 360)，用于防止某個(gè)值過(guò)小導(dǎo)致扇區(qū)太小影響交互)
第三步：avoidLabelOverlap(是否啟用防止標(biāo)簽重疊策略，默認(rèn)默認(rèn)開(kāi)啟)
第四步：文字換行展示，echarts給我們提供了一個(gè)?formatter(標(biāo)簽內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式，字符串模板與回調(diào)函數(shù)返回的字符串均支持用?\n?換行)屬性。
關(guān)鍵代碼如下：
series: [
{
type: 'pie',
clickable:false, //是否開(kāi)啟點(diǎn)擊
minAngle: 5, //最小的扇區(qū)角度(0 ~ 360)，用于防止某個(gè)值過(guò)小導(dǎo)致扇區(qū)太小影響交互
avoidLabelOverlap: true, //是否啟用防止標(biāo)簽重疊策略
hoverAnimation:false, //是否開(kāi)啟 hover 在扇區(qū)上的放大動(dòng)畫(huà)效果。
silent: true, //圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件
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
}
}
}
}
],
處理后的展示效果
還不錯(cuò)吧，希望能夠幫助到有需要的童鞋。
總結(jié)
以上是生活随笔為你收集整理的echart饼图标签重叠_Echarts 解决饼图文字过长重叠的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 手机版ziperello_Ziperel
- 下一篇： multisim怎么设置晶体管rbe_M