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   屬性  設置度數，就可以直接設置一個最小的占比度數，可以防止扇形過小的問題