echarts 解决饼图指示线重叠问题

最新推荐文章于 2024-09-02 11:22:48 发布

怡宝丶加冰

最新推荐文章于 2024-09-02 11:22:48 发布

阅读量4.3k

点赞数 3

文章标签： ECharts 饼图标签重叠配置数据可视化

本文链接：https://blog.csdn.net/m0_60648668/article/details/120197982

版权

当几条数据的占比太少时,就会出现重叠状态,如图:

方法:

只需将avoidLabelOverlap属性改为true就行

 series: [{
            name: '设备状态',
            type: 'pie',
            radius: ['40%','65%'],
            center: ["30%", "45%"],
            avoidLabelOverlap: true,
            // itemStyle: {
            //   borderRadius: 10,
            //   borderColor: '#fff',
            //   borderWidth: 2
            // },
            label: {
              show: true,
              position: "outside",
              // verticalAlign: "middle",
              formatter: "{b}:{c}",
              fontSize: 8,
              color: "#FFFFFF"
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            //引线长度
            labelLine:{  
              show:true,
              normal:{  
                  length:5,
                  align:"center" 
              }  
            },

效果如图: