Ao mapear redes interconectadas, hierarquias estruturais ou relacionamentos complexos entre entidades, o Gráfico de Rede (ou Gráfico de Rede) é o framework visual ideal. Ao exibir itens como nós e conexões como links direcionados ou não direcionados, os gráficos de rede permitem que os usuários explorem clusters, árvores de dependência e fluxos relacionais que os gráficos tabulares padrão não conseguem transmitir — como arquiteturas de microserviços, interações em redes sociais ou grafos de conhecimento.
Os Mecanismos dos Gráficos de Rede
No Apache ECharts, os gráficos de rede usam type: 'graph'. Em vez de mapear valores numéricos diretamente para coordenadas horizontais e verticais, um gráfico de rede utiliza uma coleção explícita de nós (ou data) e links (ou arestas). O ECharts então organiza esses nós usando posições de coordenadas fixas, layouts circulares ou um motor físico dinâmico baseado em força direcionada.
1. Configuração Básica
Para criar um gráfico de rede básico usando física direcionada por força, declare seus nós dentro de data, mapeie as conexões dentro de links, e defina layout: 'force':
option = {
tooltip: {},
legend: {
data: ['Serviços', 'Bancos de Dados']
},
series: [
{
name: 'Rede do Sistema',
type: 'graph',
layout: 'force',
roam: true, // Permite zoom e rolagem
label: {
show: true,
position: 'right'
},
force: {
repulsion: 100,
edgeLength: 80
},
data: [
{ id: '0', name: 'API Gateway', symbolSize: 30, category: 0 },
{ id: '1', name: 'Serviço de Autenticação', symbolSize: 20, category: 0 },
{ id: '2', name: 'Serviço de Pedidos', symbolSize: 20, category: 0 },
{ id: '3', name: 'Banco de Dados de Usuários', symbolSize: 25, category: 1 },
{ id: '4', name: 'Banco de Dados de Pedidos', symbolSize: 25, category: 1 }
],
links: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '1', target: '3' },
{ source: '2', target: '4' }
],
categories: [
{ name: 'Serviços' },
{ name: 'Bancos de Dados' }
]
}
]
};
Técnicas Estruturais Avançadas
Gráficos de rede suportam motores de layout alternativos, como alinhamento em anel circular ou setas direcionais, para mostrar dependências de dados de forma clara.
1. Layout Circular com Setas de Ligação Direcionadas
Defina layout: 'circular' para organizar os nós em uma estrutura circular limpa e habilitar setas nas arestas para mostrar relações direcionais entre os componentes:
option = {
tooltip: {},
series: [
{
type: 'graph',
layout: 'circular',
roam: true,
label: {
show: true,
position: 'outside'
},
edgeSymbol: ['none', 'arrow'], // Desenhar setas nos pontos finais das ligações
edgeSymbolSize: [0, 8],
data: [
{ id: 'A', name: 'Nó A', symbolSize: 24 },
{ id: 'B', name: 'Nó B', symbolSize: 24 },
{ id: 'C', name: 'Nó C', symbolSize: 24 },
{ id: 'D', name: 'Nó D', symbolSize: 24 },
{ id: 'E', name: 'Nó E', symbolSize: 24 }
],
links: [
{ source: 'A', target: 'B' },
{ source: 'B', target: 'C' },
{ source: 'C', target: 'D' },
{ source: 'D', target: 'E' },
{ source: 'E', target: 'A' },
{ source: 'A', target: 'C' }
],
lineStyle: {
color: '#5470c6',
width: 2,
curveness: 0.2 // Curvar as linhas de conexão para evitar sobreposição
}
}
]
};
Ajuste Fino do Layout e Estilo dos Nós
Ajustar a curvatura das arestas, sombras na borda dos nós e opções de interação mantém os agrupamentos densos de rede legíveis em páginas web interativas.
1. Cores Personalizadas por Categoria de Nós e Física de Força
Ajuste os valores de repulsão e os estilos de linha para criar agrupamentos estruturados e visualmente separados:
option = {
legend: {
top: '5%',
left: 'center'
},
series: [
{
type: 'graph',
layout: 'force',
roam: true,
draggable: true,
force: {
repulsion: 250,
gravity: 0.1,
edgeLength: [50, 100]
},
categories: [
{ name: 'Frontend', itemStyle: { color: '#5470c6' } },
{ name: 'Backend', itemStyle: { color: '#91cc75' } },
{ name: 'Infraestrutura', itemStyle: { color: '#fac858' } }
],
data: [
{ name: 'Aplicativo Web', category: 0, symbolSize: 32 },
{ name: 'Aplicativo Móvel', category: 0, symbolSize: 28 },
{ name: 'Gateway de API', category: 1, symbolSize: 26 },
{ name: 'Microserviço A', category: 1, symbolSize: 22 },
{ name: 'Microserviço B', category: 1, symbolSize: 22 },
{ name: 'Cache Redis', category: 2, symbolSize: 20 },
{ name: 'PostgreSQL', category: 2, symbolSize: 24 }
],
links: [
{ source: 'Aplicativo Web', target: 'Gateway de API' },
{ source: 'Aplicativo Móvel', target: 'Gateway de API' },
{ source: 'Gateway de API', target: 'Microserviço A' },
{ source: 'Gateway de API', target: 'Microserviço B' },
{ source: 'Microserviço A', target: 'Cache Redis' },
{ source: 'Microserviço B', target: 'PostgreSQL' }
],
lineStyle: {
color: 'source', // Cor da aresta com base na cor do nó de origem
width: 2,
curveness: 0.1
}
}
]
};
Melhores Práticas Estratégicas
- Habilite
roam: truepara navegação:Redes interativas crescem rapidamente. Habilitar a navegação com zoom e deslocamento permite que os usuários se concentrem em agrupamentos específicos sem se sentirem sobrecarregados. - Aplique
curvaturaàs arestas:Definir uma leve curvatura (por exemplo,lineStyle.curveness: 0.1a0.2) evita que links bidirecionais entre dois nós idênticos se sobreponham em uma única linha. - Repulsão da Física da Força de Equilíbrio: Ajuste
force.repulsioncom cuidado. Valores muito baixos farão com que os nós se sobreponham formando um agrupamento denso, enquanto valores muito altos empurrarão os nós completamente fora da área visível.