一、echarts餅圖百分比實現原理

echarts餅圖的實現原理是將數據按比例分為多個扇形，根據扇形所占比例在圓心處標出百分比數值，同時在圖例中標出具體數值及對應顏色信息，讓用戶直觀地了解數據分布情況。

option = {
    tooltip: {
        formatter: " : {c} (e9i7wpj%)"
    },
    legend: {
        data:['數據1','數據2','數據3']
    },
    series : [
        {
            name: '數據分布',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:500, name:'數據1'},
                {value:300, name:'數據2'},
                {value:200, name:'數據3'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

二、echarts餅圖

echarts餅圖是一種常用的數據可視化圖表，可以直觀地展現數據的比例關系。

在echarts餅圖中，每個扇形代表一種數據，扇形所占角度越大表示該數據所占比例越大。通過不同的顏色區分不同的數據，使得數據變得更加容易理解。

三、echarts餅圖百分比自定義

用戶可以通過echarts的API自定義餅圖百分比的樣式、顏色、標簽等信息，以滿足個性化需求。

下面是一個自定義echarts餅圖的例子：

option = {
    tooltip: {
        formatter: " : {c} (e2fwmyl%)"
    },
    legend: {
        data:['數據1','數據2','數據3']
    },
    series : [
        {
            name: '數據分布',
            type: 'pie',
            radius : ['40%', '55%'],
            center: ['50%', '60%'],
            roseType: 'radius',
            label: {
                formatter: '{b|：}{c}  {per|mgwoi74%}  ',
                rich: {
                    b: {
                        fontSize: 12,
                        lineHeight: 20
                    },
                    per: {
                        fontSize: 12,
                        lineHeight: 20
                    }
                }
            },
            data:[
                {value:500, name:'數據1'},
                {value:300, name:'數據2'},
                {value:200, name:'數據3'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

四、echarts餅圖百分比為0不顯示

在某些情況下，數據可能出現0值的情況，為了避免顯示的數據有誤，用戶可以將0值對應的扇形隱藏掉。

option = {
     series: [{
         type: 'pie',
         data: [
             {value:0, name:'數據1', itemStyle:{normal:{opacity:0}}},
             {value:300, name:'數據2'},
             {value:200, name:'數據3'}
         ]
     }]
};

五、echarts餅圖間隙

為了使餅圖更加美觀，用戶可以通過設置餅圖間隙來控制扇形之間的距離。

option = {
    series : [
        {
            type:'pie',
            radius : ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            data:[
                {value:335, name:'數據1'},
                {value:310, name:'數據2'},
                {value:234, name:'數據3'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            roseType: 'angle',
            //餅圖間隙
            //每個扇形之前的間隙大小
            //為百分比值，數值在0~1之間
            //若該值為0，則組成的就是環形圖了
            //默認值為0
            labelLine: {
                normal: {
                    length: 1,
                    length2: 25,
                    smooth: true,
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            silent: false
        }
    ]
};

六、echarts餅圖圖例間距

用戶可以通過設置echarts餅圖圖例的間距來調整圖例的位置，使得圖例更加美觀。

option = {
    tooltip: {
        trigger: 'item',
        formatter: " : {c} (hfvnf2b%)"
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        //圖例之間的距離
        itemGap: 20,
        data:['數據1','數據2','數據3']
    },
    series : [
        {
            name: '數據分布',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:500, name:'數據1'},
                {value:300, name:'數據2'},
                {value:200, name:'數據3'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

七、echarts餅圖圖例設置

用戶可以通過設置echarts餅圖的圖例信息，例如位置、字體大小、字體顏色等，來控制圖例的外觀效果。

option = {
    tooltip: {
        trigger: 'item',
        formatter: " : {c} (ng7evic%)"
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        y: 'center',
        textStyle: {
            color: '#fff',
            fontSize: 14
        },
        data:['數據1','數據2','數據3']
    },
    series : [
        {
            name: '數據分布',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:500, name:'數據1'},
                {value:300, name:'數據2'},
                {value:200, name:'數據3'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 5,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                }
            }
        }
    ]
};

八、echarts圖例加百分號

用戶可以通過自定義echarts圖例文字內容的方式在圖例上加上百分號，提高數據表現力。

option = {
    tooltip: {
        trigger: 'item',
        formatter: " : {c} (qhdtky4%)"
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        data:['數據1','數據2','數據3'].map(function(item){
            return item + ' 100%';
        })
    },
    series : [
        {
            name: '數據分布',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:500, name:'數據1'},
                {value:300, name:'數據2'},
                {value:200, name:'數據3'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};