如何在饼图中显示百分比和文字

一、为什么要在饼图中显示百分比和文字

饼图是一种常用的图表类型，用于显示数据的相对大小。在饼图中，每一块扇形的大小代表了数据的相对大小，而百分比则提供了更准确的度量方法。同时，如果我们能在饼图中添加文字，可以更加直观地显示数据信息，使得读者更容易理解和记忆。

二、如何在饼图中显示百分比

在饼图中显示百分比，可以使用pieChart对象的tooltip属性。该属性定义了鼠标悬停在饼图上时显示的提示框内容，我们可以在该属性中插入百分比文本。

// HTML参数
<div id="chart"></div>

// JavaScript代码
let chart = echarts.init(document.getElementById('chart'))

let option = {
    series: [{
        type: 'pie',
        data: [
            {
                value: 335,
                name: 'A'
            },
            {
                value: 310,
                name: 'B'
            },
            {
                value: 234,
                name: 'C'
            },
            {
                value: 155,
                name: 'D'
            },
            {
                value: 130,
                name: 'E'
            }
        ]
    }],
    tooltip: {
        formatter: '{b}: {c} ({d}%)'
    }
}

chart.setOption(option)

在上述代码中，我们首先定义了一个id为chart的div元素，用于显示饼图。然后使用echarts.init函数初始化图表对象，并在option对象中设置series属性和tooltip属性。在tooltip属性的formatter属性中，使用{b}表示扇形名称，{c}表示数值，{d}%表示百分比，并使用括号分隔它们。最后使用setOption方法将option中的设置应用到图表中。

三、如何在饼图中显示文字

在饼图中显示文字，可以使用pieChart对象的label属性。该属性定义了饼图上各个扇形内的标签文本，我们可以在该属性中设置标签文本。

// HTML参数
<div id="chart"></div>

// JavaScript代码
let chart = echarts.init(document.getElementById('chart'))

let option = {
    series: [{
        type: 'pie',
        data: [
            {
                value: 335,
                name: 'A',
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{b}:\n{d}%'
                }
            },
            {
                value: 310,
                name: 'B',
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b}'
                }
            },
            {
                value: 234,
                name: 'C',
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b}'
                }
            },
            {
                value: 155,
                name: 'D',
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b}'
                }
            },
            {
                value: 130,
                name: 'E',
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b}'
                }
            }
        ]
    }]
}

chart.setOption(option)

在上述代码中，我们仍然先定义了一个id为chart的div元素和一个图表对象chart。然后在option对象中设置series属性。在series中每一项数据中，我们加入了label属性，并在其中设置了show属性显示标签，position属性以inside或outside控制标签的位置，以及formatter属性控制标签内容。通过对不同扇形设置label属性，我们可以更加丰富地显示数据信息。

四、其他相关设置

除了上述两种方式外，我们还可以通过其他设置进行饼图的优化。例如，如果我们需要强调某一个扇形的大小，我们可以通过设置饼图的半径和圆心偏移量实现。

// HTML参数
<div id="chart"></div>

// JavaScript代码
let chart = echarts.init(document.getElementById('chart'))

let option = {
    series: [{
        type: 'pie',
        data: [
            {
                value: 335,
                name: 'A'
            },
            {
                value: 310,
                name: 'B',
                emphasis: {
                    scale: true
                }
            },
            {
                value: 234,
                name: 'C'
            },
            {
                value: 155,
                name: 'D'
            },
            {
                value: 130,
                name: 'E'
            }
        ],
        radius: ['50%', '70%'], // 控制半径
        center: ['50%', '50%'], // 控制圆心偏移
    }],
    label: {
        fontSize: 14
    }
}

chart.setOption(option)

在上述代码中，我们在series中的B数据项中添加了emphasis属性，其中设置了scale属性为true。该属性可以使得鼠标悬停在扇形上时可以将该扇形放大，以实现突出显示的效果。同时，我们还设置了饼图的半径及圆心偏移，以使得饼图更加美观。最后，我们通过设置label的fontSize属性，控制了标签的字体大小。

五、总结

在本文中，我们从多个方面对饼图怎么显示百分比和文字进行了详细的阐述。通过使用tooltip和label属性，我们可以在饼图中显示百分比和文字，并通过其他相关设置进行优化。以上方法既可以使得饼图更加直观易懂，也能够让数据信息得到更好的展示。