echars饼图,解决文字重叠

本文介绍了如何解决Echarts饼图中文字重叠的问题,包括调整文字大小、设置最小扇区角度minAngle、启用avoidLabelOverlap选项以及使用formatter属性进行文字换行展示,从而优化饼图的视觉效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

echars饼图,解决文字重叠

如图:
文字重叠

下面再来说下我的解决方案:

第一步:调整文字的显示大小,手机上文字可以更小,这里我用的是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
                    }
                }
            }
        }
    ], 

处理后的展示效果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值