Echarts 饼图内环装饰示例 - 使用 Graphic 绘制 - 常规

Echarts 饼图内环装饰示例 - 使用 Graphic 绘制

本示例展示了如何使用 Echarts 的 Graphic 属性在饼图中绘制内环装饰，并使用文本图形添加内环标题。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Echarts 内环装饰饼图示例</title>
    <script src='https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js'></script>
</head>
<body>
    <div id='chart' style='width: 600px; height: 400px;'></div>
    <script>
        // 初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 配置项数据
        var option = {
            title: {
                text: '内环装饰饼图示例',
                left: 'center',
                top: 20
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['A', 'B', 'C', 'D', 'E']
            },
            series: [
                {
                    name: '数据',
                    type: 'pie',
                    radius: ['50%', '70%'], // 设置内外半径
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 335, name: 'A'},
                        {value: 310, name: 'B'},
                        {value: 234, name: 'C'},
                        {value: 135, name: 'D'},
                        {value: 1548, name: 'E'}
                    ]
                }
            ],
            graphic: [
                {
                    type: 'circle',
                    shape: {
                        cx: myChart.getWidth() / 2,
                        cy: myChart.getHeight() / 2,
                        r: 80
                    },
                    style: {
                        fill: '#fff',
                        stroke: '#999',
                        lineWidth: 2
                    }
                },
                {
                    type: 'text',
                    z: 100,
                    left: 'center',
                    top: 'center',
                    style: {
                        fill: '#999',
                        text: [
                            '内环标题',
                            '副标题',
                            '可支持多行',
                            '居中对齐'
                        ].join('\n'),
                        font: '14px Microsoft YaHei'
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

在上面的代码中，graphic 属性用于绘制图形元素。我们在其中定义了一个圆形和一个文本图形，分别用于绘制内环和内环标题。其中，圆形的半径为 80，文本图形的位置居中对齐，并且设置了多行文本。注意，graphic 属性中的图形元素会默认覆盖在饼图上方，因此可以用于实现各种装饰效果。

运行代码后，我们可以看到一个带有内环装饰的饼图，内环上方显示了一个居中对齐的标题。

内环装饰饼图示例