Echarts中的饼图的某块由于数据太小导致占比太小,图形上几乎看不见问题的解决方案...

数据过多,且几个比较小的数据在一块扎堆

 解决方案  在series中的一个对象中  添加属性  minAngle

源码1,元数据部分:

#其中的两个红色加粗的为数值非常小的,在饼图中根据数据占比会非常小,用肉眼几乎看不出来。
let echartData = {
    inner: [
        {
            value: 300,
            unit: '件',
            name: '第一检查部'
        },
        {
            value: 100,
            unit: '件',
            name: '第二检查部'
        },
        {
            value: 10,
            unit: '件',
            name: '第三检查部'
        },
        {
            value: 160,
            unit: '件',
            name: '第四检查部'
        },
        {
            value: 1,
            unit: '件',
            name: '第五检查部'
        }
    ],
    outer: [
        {
            value: 100,
            unit: '件',
            name: '第一检查部'
        },
        {
            value: 300,
            unit: '件',
            name: '第二检查部'
        },
        {
            value: 400,
            unit: '件',
            name: '第三检查部'
        },
        {
            value: 400,
            unit: '件',
            name: '第四检查部'
        },
        {
            value: 3,
            unit: '件',
            name: '第五检查部'
        }
    ]
}





 源码2:echart中的series部分

 series: [
         //最外层圆环
        
      
        {
            name: '外环',
            type: 'pie',
            minAngle: 10,  //设置扇形的最小占比
            radius: ['50%', '75%'],
            center: ["40%", "50%"],
            startAngle: '240',
            data: echartData.outer,
            labelLine: {
                normal: {
                    length: 20,
                    length2: 140,
                    lineStyle: {
                        color: '#e6e6e6'
                    }
                }
            },
            itemStyle: { // 此配置
                normal: {
                    borderWidth: 2,
                    borderColor: '#fff',
                },
                emphasis: {
                    borderWidth: 0,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    position: 'inner',
                    formatter: params => {
                        return (
                            params.value + '件'
                        );
                    },
                    fontSize: 22,
                    color: '#000',
                    // padding: [0, -130, 25, -130],
                }
            },
        },
        
        {
            name: '内环',
            type: 'pie',
             minAngle: 10,
            radius: ['25%', '50%'],
            center: ["40%", "50%"],
            itemStyle: { // 此配置
               normal: {
                    borderWidth: 2,
                    borderColor: '#fff',
                },
                emphasis: {
                    borderWidth: 0,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    position: 'inner',
                    formatter: params => {
                        return (
                            params.value + '件'
                        );
                    },
                    fontSize: 22,
                    color: '#000',
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            startAngle: '230',
            data: echartData.inner
        }
    ]

设置前

图中的箭头为所指向的两个占比,内环占比和外环占比

设置后

 所以说通过  

 minAngle   属性  设置度数,就可以直接设置一个最小的占比度数,可以防止扇形过小的问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

执键行天涯

码你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值