zoukankan      html  css  js  c++  java
  • 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   属性  设置度数,就可以直接设置一个最小的占比度数,可以防止扇形过小的问题
    
    
  • 相关阅读:
    JAVA 冒泡排序代码
    随机数生成机制
    C#学习成果 兔子计算
    C#学习成果 质数判断
    3.24学习成果
    制作登录界面,登录成功后把用户名放在session里,在第3个页面读取session显示用户名
    编写一个简易的留言薄,实现添加留言和显示留言内容等功能
    编写一个jsp程序,实现用户登录,当用户输入的用户或密码错误时,将页面重定向到错误提示页,并在该页面显示30秒后 自动回到用户登录界面
    jsp输出当前时间
    jsp输出九九乘法表
  • 原文地址:https://www.cnblogs.com/isme-zjh/p/14011585.html
Copyright © 2011-2022 走看看