首页 前端知识 Echarts中饼状图label标签文本重叠

Echarts中饼状图label标签文本重叠

2024-05-10 22:05:50 前端知识 前端哥 95 543 我要收藏

解决方式:

1. 未使用formatter,不使用formatter的情况下label重叠主要是没有设置
第一步:调整fontSize文字的显示大小,字越小就越不会重叠;

第二步:设置最小扇区角度,minAngle(最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互);

第三步:avoidLabelOverlap(是否启用防止标签重叠策略,默认默认开启,默认是true ,可以不设置,但是不能设置成false);
 

2. 使用了formatter,使用了formatter的情况下重叠的情况主要是没有设置

第一步:设置padding为0,或者不设置padding(默认是0)
第二部:不设置padding会出现边框和字体的重叠需要补充“\n”

解决办法就是在formatter的文本开始和结束前后各加一个\n 用换行来代替padding,换行的宽度是会被echarts计算在内的

label: {
   formatter: function (e) {
     let {
        data: {vale, name}
     } = e;
     return `\n{a|${name}}{b|${value}%}\n`
   }
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7985.html
标签
评论
发布的文章

HTML5(H5)中的Web Workers

2024-05-19 09:05:52

HTML5

2024-02-27 11:02:15

HTML5 <option> 标签

2024-05-19 09:05:51

@JsonProperty 注解详解

2024-05-19 09:05:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!