zoukankan      html  css  js  c++  java
  • echarts的饼图label标签重叠解决办法

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

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

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

    2. 使用了formatter
      使用了formatter的情况下重叠的情况有
      在这里插入图片描述
      这种情况一般是因为在series中的label中设置了padding的值,echarts不会考虑padding是label的内容,所以不会计算padding在内,导致了重叠
      解决办法:
      第一步:设置padding为0,或者不设置padding(默认是0)
      第二部:不设置padding会出现边框和字体的重叠 如下
      在这里插入图片描述
      解决办法就是在formatter的文本开始和结束前后各加一个 用换行来代替padding,换行的宽度是会被echarts计算在内的,如图
      在这里插入图片描述

    formatter: '
     事件等级:{b} 
     事件数量:{c}起 
     事件占比:{d}% 
    ',
    
    • 1

    结果就是这样了:

    既美观也不会重叠!


  • 相关阅读:
    练习课(二)
    html5,实例开发代码
    html,移动端代码
    html5,导航
    html5,表格与框架综合布局
    html5,表格
    HTML5,添加图片
    HTML5,超级链接
    access链接最原始代码,两种
    显示刚刚添加的最后一条数据,access,选择语句,select
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/14339996.html
Copyright © 2011-2022 走看看