echart饼图之文字防重叠

步骤

1、最小角度- 防止数据量太小，只显示一条线，所有都挤在一起

minAngle: 5, 

2、开启自带的防重叠策略

avoidLabelOverlap: true, 

3、将显示的文字缩小

fontSize: '9', 

代码

let option = {        
    tooltip: {
      trigger: 'item',
      formatter: "{b}"
    },
    legend: {
      // 取消图例上的点击事件，这个看需求
      selectedMode: false,
      // 分布方式，水平：'horizontal'，垂直：'vertical'
      orient: 'horizontal',
      // 水平对齐方式，可设置为'left','center','right',number(px)
      x: 'center',
      // 垂直对齐方式，可设置为'top','center','bottom',number(px)
      y: 'top',
      // 距顶部的距离，其他同理
      top: '75%',
      // 距左边的距离，其他同理
      // left: '10%',
      // 图标大小,宽和高
      itemWidth: 12,
      itemHeight: 12,
      // 显示内容
      data: markArr.map((item) => { return item.name }),
    },                
    series: [          
      {
        name:'',
        type:'pie',
        minAngle: 5, // 1、最小角度- 防止数据量太小  
        radius: ['40%', '47%'],
        center: ['50%', '40%'],
        avoidLabelOverlap: true, // 2、开启防重叠策略
        hoverAnimation:false,          
        label: {
            normal: {
                show: true,
                formatter: '{c}  ({d}%)', //自定义显示格式(b:name, c:value, d:百分比)
                textStyle: {
                    fontSize: '9',  // 3、缩小显示文字的字号
                    color: 'black'                      
                }
            },                
        },
        labelLine:{  
          normal:{                  
            lineStyle: {
              color: "black"  // 改变标示线的颜色
            }
          },
        },                  
        data: markArr,
        color: ["#7CAFDD", "#F1975A", "#B7B7B7", "#FFCD33", "#698ED0", "#8CC168", "#5B9BD5", "#ED7D31", "#327DC2", "#D26012", "#A5A5A5", "#FFC000", "#4472C4", "#70AD47", "#797979", "#9E480E", "#636363", "#997300", "#264478", "#43682B"],
      }
    ]
}

网站导航

网站导航