Ao rastrear transferências contínuas, distribuições de recursos ou jornadas de usuário em múltiplos estágios, o Gráfico Sankey é a ferramenta de visualização principal. Ao desenhar faixas de fluxo proporcionais entre nós de estágios sequenciais, os gráficos Sankey ilustram como quantidades totais se dividem, combinam e transitam por sistemas complexos—como funis de conversão de usuários em sites, redes de distribuição de energia ou alocações orçamentárias organizacionais.
Os Mecanismos dos Gráficos Sankey
No Apache ECharts, os gráficos Sankey usam type: 'sankey'. Semelhante aos gráficos de rede, um gráfico Sankey é definido por uma lista de nós (ou dados) e ligações (ou arestas). Cada ligação contém um nome de fonte de nó, um nome de destino de nó e um valor numérico valor que determina a largura visual da linha de fluxo conectada.
1. Configuração Básica
Para construir um gráfico Sankey básico, declare seus itens de nó dentro de dados e defina volumes de fluxo direcionado em ligações:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: [
{ name: 'Receita Total' },
{ name: 'Vendas de Produtos' },
{ name: 'Serviços' },
{ name: 'Marketing' },
{ name: 'P&D' },
{ name: 'Lucro' }
],
links: [
{ source: 'Receita Total', target: 'Vendas de Produtos', value: 70 },
{ source: 'Receita Total', target: 'Serviços', value: 30 },
{ source: 'Vendas de Produtos', target: 'Marketing', value: 30 },
{ source: 'Vendas de Produtos', target: 'P&D', value: 25 },
{ source: 'Vendas de Produtos', target: 'Lucro', value: 15 },
{ source: 'Serviços', target: 'Lucro', value: 30 }
],
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradiente',
curvatura: 0.5
}
}
]
};
Técnicas Estruturais Avançadas
Os gráficos Sankey podem ser personalizados com orientações de fluxo vertical, cores de nós em múltiplos níveis e realce dinâmico de links para rastrear caminhos individuais em redes complexas.
1. Orientação de Fluxo Vertical
Defina orient: 'vertical'para transformar os fluxos horizontais de estágios em uma visualização vertical tipo cascata de cima para baixo:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
orient: 'vertical',
larguraNó: 20,
espaçoNó: 16,
data: [
{ name: 'Visitas ao Site' },
{ name: 'Página do Produto' },
{ name: 'Saída Direta' },
{ name: 'Carrinho' },
{ name: 'Finalização' }
],
links: [
{ source: 'Visitas ao Site', target: 'Página do Produto', value: 1000 },
{ source: 'Visitas ao Site', target: 'Saída Direta', value: 400 },
{ source: 'Página do Produto', target: 'Carrinho', value: 600 },
{ source: 'Carrinho', target: 'Finalização', value: 450 }
],
lineStyle: {
color: 'fonte',
curvatura: 0.5
}
}
]
};
Ajuste Fino do Layout e Estilo de Links
Ajustar o espaçamento dos nós, a curvatura das linhas e o comportamento de realce ao passar o mouse mantém fluxos complexos de múltiplos estágios limpos e legíveis.
1. Controles de Espaçamento entre Nós e Fluxos Gradientes de Fonte para Alvo
Personalizando espaçoNó e definindo lineStyle.cor: 'gradiente'cria transições suaves de cor entre os estágios:
option = {
series: [
{
type: 'sankey',
esquerda: '5%',
direita: '15%',
larguraNó: 24,
espaçoNó: 18,
arrastável: true,
label: {
posição: 'direita',
cor: '#333',
tamanhoFonte: 12
},
data: [
{ name: 'Fonte A', itemStyle: { cor: '#5470c6' } },
{ name: 'Fonte B', itemStyle: { cor: '#91cc75' } },
{ name: 'Estágio 1', itemStyle: { cor: '#fac858' } },
{ name: 'Estágio 2', itemStyle: { cor: '#ee6666' } },
{ name: 'Saída Final', itemStyle: { cor: '#73c0de' } }
],
links: [
{ source: 'Fonte A', target: 'Estágio 1', value: 50 },
{ source: 'Fonte B', target: 'Estágio 1', value: 30 },
{ source: 'Estágio 1', target: 'Estágio 2', value: 60 },
{ source: 'Estágio 1', target: 'Saída Final', value: 20 },
{ source: 'Estágio 2', target: 'Saída Final', value: 60 }
],
lineStyle: {
color: 'gradiente',
curvatura: 0.6,
opacidade: 0.4
}
}
]
};
Melhores Práticas Estratégicas
- Mantenha a Conservação de Fluxo: Certifique-se de que a soma dos valores que entram em um nó seja igual ou logicamente explique os valores que saem, para evitar lacunas visuais enganosas.
- Habilite
emphasis.focus: 'adjacência': Ao lidar com fluxos de múltiplas etapas, focar nos links adjacentes ao passar o mouse permite aos usuários isolar caminhos específicos sem ruído visual. - Use Links com Gradiente: Definindo
lineStyle.color: 'gradiente'mistura suavemente a cor do nó de origem com a cor do nó de destino, tornando as transições de múltiplas etapas visualmente intuitivas.