Cuando se rastrea la pérdida progresiva a través de pasos secuenciales o canales de conversión, el Gráfico de embudo es la herramienta visual estándar. Al mostrar los valores como bloques trapezoidales apilados que se estrechan o ensanchan a lo largo de las etapas, los gráficos de embudo permiten a los usuarios identificar cuellos de botella de conversión, tasas de pérdida y eficiencia del proceso a simple vista, como etapas de canal de ventas, flujos de compra en comercio electrónico o embudos de generación de leads.
La mecánica de los gráficos de embudo
En Apache ECharts, los gráficos de embudo se representan utilizando type: 'funnel'. Cada objeto de datos contiene un nombre y un valor numérico valor. El motor ordena automáticamente los datos de mayor a menor (o viceversa) y escala el ancho de cada trapezoide en relación con el valor máximo en la serie.
1. Configuración esencial
Para construir un gráfico de embudo básico, proporcione etapas de categoría dentro de su matriz de datos de serie y establezca type: 'funnel':
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
data: ['Consultas', 'Propuestas', 'Cotizaciones', 'Negociaciones', 'Acuerdos']
},
series: [
{
name: 'Embudo de ventas',
type: 'funnel',
left: '10%',
top: '18%',
bottom: '10%',
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
data: [
{ value: 100, name: 'Consultas' },
{ value: 80, name: 'Propuestas' },
{ value: 60, name: 'Cotizaciones' },
{ value: 40, name: 'Negociaciones' },
{ value: 20, name: 'Acuerdos' }
]
}
]
};
Técnicas estructurales avanzadas
Los gráficos de embudo se pueden personalizar con diseños piramidales, alineaciones personalizadas de etapas o superposiciones de doble embudo para comparar diferentes canales de conversión.
1. Diseño de pirámide invertida y alineaciones personalizadas
Cambia sort: 'ascending' para crear una pirámide invertida, o ajusta funnelAlign para alinear las etapas a lo largo del borde izquierdo o derecho:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Pirámide de conversión',
type: 'funnel',
left: '15%',
top: '18%',
bottom: '10%',
width: '70%',
sort: 'ascending', // Representa la etapa más pequeña en la parte superior, la más grande en la parte inferior
funnelAlign: 'center',
label: {
show: true,
position: 'right'
},
data: [
{ value: 20, name: 'Etapa 1: Conciencia' },
{ value: 40, name: 'Etapa 2: Interés' },
{ value: 60, name: 'Etapa 3: Decisión' },
{ value: 80, name: 'Etapa 4: Acción' }
]
}
]
};
Ajuste fino del diseño y estilo de las etapas
Agregar espacios, bordes redondeados y formatos personalizados de etiquetas crea un espacio limpio entre las etapas de conversión.
1. Espaciado personalizado de etapas y etiquetas de porcentaje
Controlar espacio el espaciado entre los trapecios y usar formatos personalizados de etiquetas para resaltar el porcentaje de retención entre etapas:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} Usuarios'
},
series: [
{
name: 'Inscripción de usuarios',
type: 'funnel',
left: '10%',
top: '10%',
bottom: '10%',
width: '80%',
gap: 6, // Agrega una separación clara entre etapas
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
borderRadius: 4
},
label: {
show: true,
position: 'inside',
formatter: '{b}n{c} ({d}%)',
color: '#fff',
fontSize: 12
},
data: [
{ value: 5000, name: 'Visitas a la app' },
{ value: 3400, name: 'Inscripciones' },
{ value: 2100, name: 'Configuración de perfil' },
{ value: 1200, name: 'Primera acción' },
{ value: 800, name: 'Suscriptos' }
]
}
]
};
Mejores prácticas estratégicas
- Mantenga las etapas en secuencia:Los gráficos de embudo dependen de una lógica de flujo secuencial. Asegúrese de que los elementos de datos representen procesos paso a paso reales en lugar de categorías sin relación.
- Use
espaciopara límites visuales claros de etapas: Establecer un pequeñoespacio(por ejemplo, de 4px a 6px) entre los trapecios evita que los colores adyacentes se mezclen en un solo bloque. - Muestre los porcentajes de etapa: Combine números brutos con porcentajes por paso (por ejemplo, usando
{d}%en los formatos de etiquetas) para que los usuarios puedan evaluar instantáneamente las tasas de abandono en cada hito.