付费节点推荐
免费节点
节点使用教程
之前在网上查找了很多关于解决饼图文字描述过长导致重叠的问题,找了很多一直没有一个合适的解决方案,最后自己只能花时间研究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 } } } } ],
处理后的展示效果
还不错吧,希望能够帮助到有需要的童鞋。
未经允许不得转载:Bcoder资源网 » Echarts 解决饼图文字过长重叠的问题
评论前必须登录!
登陆 注册