一、为什么要在饼图中显示百分比和文字
饼图是一种常用的图表类型，用于显示数据的相对大小。在饼图中，每一块扇形的大小代表了数据的相对大小，而百分比则提供了更准确的度量方法。同时，如果我们能在饼图中添加文字，可以更加直观地显示数据信息，使得读者更容易理解和记忆。
二、如何在饼图中显示百分比
在饼图中显示百分比，可以使用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属性，我们可以在饼图中显示百分比和文字，并通过其他相关设置进行优化。以上方法既可以使得饼图更加直观易懂，也能够让数据信息得到更好的展示。
