千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > echarts饼图百分比详解

echarts饼图百分比详解

来源:千锋教育
发布人:xqq
时间: 2023-11-23 17:20:03 1700731203

一、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)'
                }
            }
        }
    ]
};

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT