echarts饼图百分比详解

一、echarts饼图百分比实现原理

echarts饼图的实现原理是将数据按比例分为多个扇形，根据扇形所占比例在圆心处标出百分比数值，同时在图例中标出具体数值及对应颜色信息，让用户直观地了解数据分布情况。

option = {
    tooltip: {
        formatter: "{b} : {c} ({d}%)"
    },
    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: "{b} : {c} ({d}%)"
    },
    legend: {
        data:['数据1','数据2','数据3']
    },
    series : [
        {
            name: '数据分布',
            type: 'pie',
            radius : ['40%', '55%'],
            center: ['50%', '60%'],
            roseType: 'radius',
            label: {
                formatter: '{b|{b}：}{c}  {per|{d}%}  ',
                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: "{b} : {c} ({d}%)"
    },
    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: "{b} : {c} ({d}%)"
    },
    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: "{b} : {c} ({d}%)"
    },
    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)'
                }
            }
        }
    ]
};