Echarts饼图显示数值和百分比

最新推荐文章于 2025-04-17 14:18:46 发布

玉米豆豆儿

最新推荐文章于 2025-04-17 14:18:46 发布

阅读量5w

点赞数 26

分类专栏： echarts 文章标签：前端

本文链接：https://blog.youkuaiyun.com/yayayu_/article/details/105657717

版权

echarts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Echarts库在饼图中同时显示数据的数值和对应的百分比，通过实例演示实现这一功能的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts 饼图显示名称，数值和百分比
在这里插入图片描述
核心：

series : [ {
　　name:'',
　　type : 'pie',
　　radius : '65%',
　　center : [ '50%', '50%' ],
　　//重点
　　label : {
　　　　normal : {
　　　　　　formatter: '{b}:{c}: ({d}%)',
　　　　　　textStyle : {
　　　　　　　　fontWeight : 'normal',
　　　　　　　　fontSize : 15
　　　　　　}
　　　　}
　　},
　　data:[],
　　itemStyle : {
　　　　emphasis : {
　　　　　　shadowBlur : 10,
　　　　　　shadowOffsetX : 0,
　　　　　　shadowColor : 'rgba(0, 0, 0, 0.5)'
　　　　}
　　}
} ]

实例：

 var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top:'20%',
                data: []
            },
            series : [
                {
                    name: '案件数量',
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '50%'],
                    data:[],
                    label : {
                        normal : {
                            formatter: '{b}:{c}: ({d}%)',
                            textStyle : {
                                fontWeight : 'normal',
                                fontSize : 15
                            }
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        function getChart(title){
            myChart.showLoading(); //loading动画
            $.ajax({
                type : "post",
                async : true,
                url : "chart",
                data:{"mtime":$("#mtime").val(),"come":$("#come").val(),"show":$("#show").val()},
                dataType:"json",
                success:function(res) {
                    if(res.success){
                        console.log(res.data);
                        myChart.hideLoading();
                        myChart.setOption({        //加载数据图表
                            series: [{
                                // 根据名字对应到相应的系列
                                data: res.data.data
                            }],
                            legend: {
                                data: res.data.name
                            },
                        });
                    }
                    else{
                        layer.msg(res.message);
                    }
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    myChart.hideLoading();
                }
            });
            myChart.setOption(option, true);
        }