国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > echarts餅圖百分比詳解

echarts餅圖百分比詳解

來源:千鋒教育
發(fā)布人:xqq
時間: 2023-11-23 17:20:03 1700731203

一、echarts餅圖百分比實現(xiàn)原理

echarts餅圖的實現(xiàn)原理是將數(shù)據(jù)按比例分為多個扇形,根據(jù)扇形所占比例在圓心處標(biāo)出百分比數(shù)值,同時在圖例中標(biāo)出具體數(shù)值及對應(yīng)顏色信息,讓用戶直觀地了解數(shù)據(jù)分布情況。


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

二、echarts餅圖

echarts餅圖是一種常用的數(shù)據(jù)可視化圖表,可以直觀地展現(xiàn)數(shù)據(jù)的比例關(guān)系。

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

三、echarts餅圖百分比自定義

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

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


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

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

在某些情況下,數(shù)據(jù)可能出現(xiàn)0值的情況,為了避免顯示的數(shù)據(jù)有誤,用戶可以將0值對應(yīng)的扇形隱藏掉。


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

五、echarts餅圖間隙

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


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

六、echarts餅圖圖例間距

用戶可以通過設(shè)置echarts餅圖圖例的間距來調(diào)整圖例的位置,使得圖例更加美觀。


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

七、echarts餅圖圖例設(shè)置

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


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

八、echarts圖例加百分號

用戶可以通過自定義echarts圖例文字內(nèi)容的方式在圖例上加上百分號,提高數(shù)據(jù)表現(xiàn)力。


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

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT