Echarts饼图配置、样式详解二、图形中间文字、图形旁边文字上下显示等

最新推荐文章于 2025-06-16 16:18:28 发布

原创最新推荐文章于 2025-06-16 16:18:28 发布 · 4.6w 阅读

37 ·

CC 4.0 BY-SA版权

EChart 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何使用ECharts配置复杂的饼图和环形图，包括图形中间和两边的文字显示、颜色设置、饼图大小调整、文字样式等，通过具体代码示例展示如何实现美观且信息丰富的图表。

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

在这里插入图片描述

效果图：

在这里插入图片描述

图形中间文字详细配置： https://www.echartsjs.com/option.html#graphic.elements-text

图形两边文字详细配置：https://www.echartsjs.com/option.html#series-pie.label.rich

代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background: #30313F;
        }
    </style>
    <script src="js/echarts.min.js"></script>
</head>
<body>


<div style="height:500px;">
    <div id="ec2" style="height: 98%;padding: 15px;"></div>
</div>


<script>
    var dom2 = document.getElementById("ec2");
    var myChart2 = echarts.init(dom2);
    option2 = null;

    option2 = {
        tooltip: {
            trigger: 'item',
            formatter: " {b}：{c} "
        },
        color:['#D06052','#E29F39','#4C9BC7'],   //环形颜色
        graphic:{       //图形中间文字
            type:"text",
            left:"center",
            top:"center",
            style:{
                text:"66",
                textAlign:"center",
                fill:"#fff",
                fontSize:60
            }
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['30%', '50%'],       //饼图大小
                labelLine: {    //图形外文字线
                    normal: {
                        length: 35,
                        length2:80
                    }

                },
                label: {
                    normal: {
                        formatter: ' {c|{c}%}  \n  {b|{b}}  \n\n',       //图形外文字上下显示
                        borderWidth: 20,
                        borderRadius: 4,
                        padding: [0, -80],          //文字和图的边距
                        rich: {
                            a: {
                                color: '#333',
                                fontSize: 33,
                                lineHeight: 20
                            },
                            b: {                        //name 文字样式
                                fontSize: 20,
                                lineHeight: 20,
                                color: '#CDCDD0'
                            },
                            c: {                   //value 文字样式
                                fontSize: 25,
                                lineHeight: 20,
                                color: '#63BF6A',
                                align:"center"
                            }
                        }
                    }
                },
                data: [
                    {value: 5, name: '数据1'},
                    {value: 9, name: '数据2'},
                    {value: 16, name: '数据3'}
                ]
            }
        ]
    };
    if (option2 && typeof option2 === "object") {
        myChart2.setOption(option2, true);
    }
</script>
</body>
</html>