Ao apresentar proporções relativas ou participações percentuais de um único total estático, o Gráfico de Pizza é uma escolha familiar e intuitiva. Ao dividir um círculo em fatias proporcionais, os gráficos de pizza permitem que os espectadores compreendam rapidamente como os componentes individuais contribuem para um todo unificado, como a distribuição de participação de mercado, divisões de preferência de dispositivos ou alocações por categorias de despesas.
Os Mecanismos dos Gráficos de Pizza
Diferentemente dos gráficos cartesianos que usam eixos horizontal e vertical, os gráficos de pizza mapeiam dados categóricos diretamente para ângulos radiais em um sistema de coordenadas polares. No Apache ECharts, um gráfico de pizza é criado definindo a série type como 'pie' e fornecendo um array de objetos onde cada entrada contém um valor numérico value e descritivo name.
1. Configuração Básica
Para criar um gráfico de pizza básico, defina uma única série com type: 'pie' e passe seus dados estruturados dentro do array data array:
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Fonte de Acesso',
type: 'pie',
radius: '60%',
data: [
{ value: 1048, name: 'Motor de Busca' },
{ value: 735, name: 'Direto' },
{ value: 580, name: 'E-mail' },
{ value: 484, name: 'Anúncios em União' },
{ value: 300, name: 'Anúncios em Vídeo' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Técnicas Estruturais Avançadas
Os gráficos de pizza podem ser ajustados para layouts em formato de anel (donut) ou estilizados com raios personalizados para enfatizar os principais segmentos de dados.
1. Variante de Gráfico de Anel (Donut)
Definindo o raio propriedade como um array de dois valores (por exemplo, ['40%', '70%']) esvazia o centro para criar um gráfico de donut limpo. Isso deixa espaço no meio para rótulos personalizados de resumo:
option = {
tooltip: {
trigger: 'item'
},
legenda: {
top: '5%',
left: 'center'
},
série: [
{
name: 'Tipo de Dispositivo',
type: 'pie',
radius: ['40%', '70%'],
evitarSobreposiçãoDeRótulos: true,
estiloItem: {
borderRadius: 8,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
destaque: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: 'Desktop' },
{ value: 735, name: 'Móvel' },
{ value: 580, name: 'Tablet' },
{ value: 484, name: 'Outros' }
]
}
]
};
Ajuste fino do layout e do estilo
Controlar as linhas de chamada de rótulos e as bordas das fatias mantém os gráficos de pizza legíveis, mesmo ao lidar com valores de dados menores.
1. Separação personalizada de fatias e chamadas de rótulos
Aplicar larguras de borda de itens e configurar linhas guia externas evita sobreposição de texto em fatias adjacentes:
option = {
série: [
{
name: 'Participação de Mercado',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{ value: 40, name: 'Marca A' },
{ value: 30, name: 'Marca B' },
{ value: 15, name: 'Marca C' },
{ value: 10, name: 'Marca D' },
{ value: 5, name: 'Outros' }
],
label: {
formatter: '{b}: {d}%'
},
labelLine: {
smooth: 0.2,
length: 10,
length2: 20
},
estiloItem: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
Melhores práticas estratégicas
- Limite as fatias a 5 ou 6:Muitas fatias pequenas tornam um gráfico de pizza difícil de ler. Agrupe valores menores em uma categoria ‘Outros’ para manter o foco claro.
- Ordene as fatias pelo tamanho:Coloque o maior segmento começando às 12 horas e ordene as demais fatias sequencialmente no sentido horário para facilitar a leitura rápida.
- Mostre porcentagens diretamente em tooltips ou rótulos: Sempre inclua
{d}%nos formatadores de rótulo ou tooltip para que os espectadores vejam imediatamente as razões proporcionais sem fazer cálculos mentais.