Cuando se presentan proporciones relativas o cuotas porcentuales de un total estático único, el Gráfico de pastel es una opción familiar e intuitiva. Al dividir un círculo en porciones proporcionales, los gráficos de pastel permiten a los espectadores comprender rápidamente cómo contribuyen los componentes individuales a un todo unificado, como la distribución de cuota de mercado, divisiones de preferencia de dispositivos o asignaciones de categorías de gastos.
La mecánica de los gráficos de pastel
A diferencia de los gráficos cartesianos que utilizan ejes horizontales y verticales, los gráficos de pastel asignan directamente los datos categóricos a ángulos radiales en un sistema de coordenadas polares. En Apache ECharts, un gráfico de pastel se crea estableciendo la serie tipo a 'pastel' y proporcionando un array de objetos donde cada entrada contiene un valor numérico valor y descriptivo nombre.
1. Configuración esencial
Para crear un gráfico de pastel básico, define una sola serie con tipo: 'pastel' y pasa tu conjunto de datos estructurado dentro del array datos array:
opción = {
tooltip: {
desencadenador: 'elemento',
formato: '{a}
{b}: {c} ({d}%)'
},
leyenda: {
orientación: 'vertical',
izquierda: 'izquierda'
},
series: [
{
nombre: 'Fuente de acceso',
tipo: 'pastel',
radio: '60%',
datos: [
{ valor: 1048, nombre: 'Motor de búsqueda' },
{ valor: 735, nombre: 'Directo' },
{ valor: 580, nombre: 'Correo electrónico' },
{ valor: 484, nombre: 'Anuncios de unión' },
{ valor: 300, nombre: 'Anuncios de video' }
],
énfasis: {
estiloElemento: {
sombraDesenfoque: 10,
desplazamientoSombraX: 0,
colorSombra: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Técnicas estructurales avanzadas
Los gráficos de pastel se pueden ajustar para adoptar diseños en forma de anillo (donut) o estilizarse con radios personalizados para resaltar los segmentos principales de datos.
1. Variante de gráfico de anillo (donut)
Configurar el radio propiedad como un arreglo de dos valores (por ejemplo, ['40%', '70%']) vacía el centro para crear un gráfico de donut limpio. Esto deja espacio en el medio para etiquetas de resumen personalizadas:
option = {
tooltip: {
trigger: 'item'
},
leyenda: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Tipo de dispositivo',
type: 'pie',
radio: ['40%', '70%'],
evitarSolapamientoEtiquetas: true,
estiloItem: {
borderRadius: 8,
borderColor: '#fff',
borderWidth: 2
},
etiqueta: {
show: false,
position: 'center'
},
énfasis: {
etiqueta: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: 'Escritorio' },
{ value: 735, name: 'Móvil' },
{ value: 580, name: 'Tableta' },
{ value: 484, name: 'Otros' }
]
}
]
};
Ajuste fino del diseño y estilo
Controlar las líneas de llamada de etiquetas y los bordes de los sectores mantiene legibles los gráficos de pastel incluso al trabajar con valores de datos más pequeños.
1. Separación personalizada de los sectores y llamadas de etiquetas
Aplicar anchos de borde de elementos y configurar líneas guía externas evita que el texto se solape en sectores adyacentes:
option = {
series: [
{
name: 'Cuota de mercado',
type: 'pie',
radio: '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: 'Otros' }
],
etiqueta: {
formatter: '{b}: {d}%'
},
líneaEtiqueta: {
smooth: 0.2,
length: 10,
length2: 20
},
estiloItem: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
Prácticas recomendadas estratégicas
- Limitar los sectores a 5 o 6:Demasiados sectores pequeños hacen que un gráfico de pastel sea difícil de leer. Agrupa los valores menores bajo una categoría de ‘Otros’ para mantener el enfoque claro.
- Ordenar los sectores por tamaño:Coloca el segmento más grande comenzando a las 12 en punto y ordena los sectores restantes secuencialmente en sentido horario para facilitar la lectura rápida.
- Mostrar porcentajes directamente en las sugerencias o etiquetas: Incluye siempre
{d}%en los formateadores de etiquetas o sugerencias para que los espectadores vean de inmediato las proporciones sin tener que hacer cálculos mentales.