Quando rastreia a queda progressiva em etapas sequenciais ou pipelines de conversão, o Gráfico de Funil é a ferramenta visual padrão. Ao exibir valores como blocos trapezoidais empilhados que se estreitam ou alargam ao longo das etapas, os gráficos de funil permitem que os usuários identifiquem blocos de conversão, taxas de queda e eficiência do processo de primeira vista—como etapas do pipeline de vendas, fluxos de checkout de e-commerce ou funis de geração de leads.
Os Mecanismos dos Gráficos de Funil
No Apache ECharts, os gráficos de funil são renderizados usando type: 'funnel'. Cada objeto de dados contém um nome e um valor numérico valor. O motor classifica automaticamente os dados do maior para o menor (ou vice-versa) e escala a largura de cada trapezoide em relação ao valor máximo na série.
1. Configuração Básica
Para construir um gráfico de funil básico, forneça as etapas da categoria dentro do array de dados da série e defina type: 'funnel':
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
data: ['Consultas', 'Propostas', 'Orçamentos', 'Negociações', 'Acordos']
},
series: [
{
name: 'Funil de Vendas',
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: 'Propostas' },
{ value: 60, name: 'Orçamentos' },
{ value: 40, name: 'Negociações' },
{ value: 20, name: 'Acordos' }
]
}
]
};
Técnicas Estruturais Avançadas
Os gráficos de funil podem ser personalizados com layouts em pirâmide, alinhamentos personalizados de etapas ou sobreposições duplas de funis para comparar canais de conversão diferentes.
1. Layout de Pirâmide Invertida e Alinhamentos Personalizados
Altere sort: 'ascending' para criar uma pirâmide invertida, ou ajuste funnelAlign para alinhar as etapas na borda esquerda ou direita:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Pirâmide de Conversão',
type: 'funil',
left: '15%',
top: '18%',
bottom: '10%',
width: '70%',
sort: 'ascending', // Renderiza a etapa menor no topo, a maior na parte inferior
funnelAlign: 'center',
label: {
show: true,
position: 'right'
},
data: [
{ value: 20, name: 'Etapa 1: Consciência' },
{ value: 40, name: 'Etapa 2: Interesse' },
{ value: 60, name: 'Etapa 3: Decisão' },
{ value: 80, name: 'Etapa 4: Ação' }
]
}
]
};
Afinando o Layout e o Estilo das Etapas
Adicionar espaçamentos, bordas arredondadas e formatadores personalizados de rótulos cria espaçamento limpo entre as etapas de conversão.
1. Espaçamento Personalizado das Etapas e Rótulos de Porcentagem
Controle espaçamento o espaçamento entre os trapézios e use formatadores personalizados de rótulos para destacar a retenção percentual entre as etapas:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} Usuários'
},
series: [
{
name: 'Onboarding de Usuários',
type: 'funil',
left: '10%',
top: '10%',
bottom: '10%',
width: '80%',
gap: 6, // Adiciona separação clara entre as 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 ao App' },
{ value: 3400, name: 'Cadastros' },
{ value: 2100, name: 'Configuração de Perfil' },
{ value: 1200, name: 'Primeira Ação' },
{ value: 800, name: 'Assinados' }
]
}
]
};
Melhores Práticas Estratégicas
- Mantenha as Etapas em Sequência: Os gráficos de funil dependem da lógica de fluxo sequencial. Certifique-se de que os itens de dados representem processos passo a passo reais, e não categorias desconexas.
- Use
espaçamentopara limites visuais claros das etapas: Definir um pequenoespaçamento(por exemplo, 4px a 6px) entre os trapézios evita que cores adjacentes se fundam em um único bloco. - Exiba as Porcentagens das Etapas: Combine números brutos com porcentagens por etapa (por exemplo, usando
{d}%nos formatadores de rótulos) para que os usuários possam avaliar instantaneamente as taxas de rejeição em cada marco.