Lors de la cartographie de réseaux interconnectés, de hiérarchies structurelles ou de relations complexes entre entités, le Graphique (ou graphique de réseau) est le cadre visuel idéal. En affichant les éléments comme des nœuds et les connexions comme des liens orientés ou non orientés, les graphiques permettent aux utilisateurs d’explorer des clusters, des arbres de dépendances et des flux relationnels que les tableaux standards ne peuvent pas transmettre—par exemple les architectures de microservices, les interactions dans les réseaux sociaux ou les graphes de connaissances.
Le fonctionnement des graphiques
Dans Apache ECharts, les graphiques utilisent type : 'graph'. Au lieu de mapper directement des valeurs numériques aux coordonnées horizontales et verticales, un graphique prend une collection explicite de nœuds (ou data) et links (ou arêtes). ECharts organise ensuite ces nœuds à l’aide de positions de coordonnées fixes, de mises en page circulaires ou d’un moteur physique dynamique à force dirigée.
1. Configuration essentielle
Pour créer un graphique réseau de base en utilisant la physique à force dirigée, déclarez vos nœuds à l’intérieur de data, mappez les connexions à l’intérieur de links, et définissez layout : 'force':
option = {
tooltip: {},
legend: {
data: ['Services', 'Bases de données']
},
series: [
{
name: 'Réseau du système',
type: 'graph',
layout: 'force',
roam: true, // Permet le zoom et le déplacement
label: {
show: true,
position: 'right'
},
force: {
repulsion: 100,
edgeLength: 80
},
data: [
{ id: '0', name: 'Passerelle API', symbolSize: 30, category: 0 },
{ id: '1', name: 'Service d'authentification', symbolSize: 20, category: 0 },
{ id: '2', name: 'Service de commande', symbolSize: 20, category: 0 },
{ id: '3', name: 'Base de données Utilisateurs', symbolSize: 25, category: 1 },
{ id: '4', name: 'Base de données Commandes', symbolSize: 25, category: 1 }
],
links: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '1', target: '3' },
{ source: '2', target: '4' }
],
categories: [
{ name: 'Services' },
{ name: 'Bases de données' }
]
}
]
};
Techniques structurelles avancées
Les graphiques en diagramme prennent en charge des moteurs de disposition alternatifs tels que l’alignement en anneau circulaire ou des flèches orientées pour montrer clairement les dépendances des données.
1. Disposition circulaire avec flèches de lien orientées
Définir layout: 'circular' pour organiser les nœuds dans une structure d’anneau propre, et activer les flèches d’arêtes pour montrer les relations directionnelles entre les composants :
option = {
tooltip: {},
series: [
{
type: 'graph',
layout: 'circular',
roam: true,
label: {
show: true,
position: 'outside'
},
edgeSymbol: ['none', 'arrow'], // Dessiner des flèches aux extrémités des liens
edgeSymbolSize: [0, 8],
data: [
{ id: 'A', name: 'Nœud A', symbolSize: 24 },
{ id: 'B', name: 'Nœud B', symbolSize: 24 },
{ id: 'C', name: 'Nœud C', symbolSize: 24 },
{ id: 'D', name: 'Nœud D', symbolSize: 24 },
{ id: 'E', name: 'Nœud 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 // Courber les lignes de connexion pour éviter les chevauchements
}
}
]
};
Affinage de la disposition et du style des nœuds
Ajuster la courbure des arêtes, les ombres des bordures des nœuds et les options d’interaction permet de maintenir lisibles les groupes denses de réseaux sur les pages web interactives.
1. Couleurs personnalisées des catégories de nœuds et physique de force
Ajuster les valeurs de répulsion et les styles de ligne pour créer des groupes structurés et visuellement séparés :
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: 'Infrastructure', itemStyle: { color: '#fac858' } }
],
data: [
{ name: 'Application Web', category: 0, symbolSize: 32 },
{ name: 'Application Mobile', category: 0, symbolSize: 28 },
{ name: 'Passerelle API', category: 1, symbolSize: 26 },
{ name: 'Microservice A', category: 1, symbolSize: 22 },
{ name: 'Microservice B', category: 1, symbolSize: 22 },
{ name: 'Cache Redis', category: 2, symbolSize: 20 },
{ name: 'PostgreSQL', category: 2, symbolSize: 24 }
],
links: [
{ source: 'Application Web', target: 'Passerelle API' },
{ source: 'Application Mobile', target: 'Passerelle API' },
{ source: 'Passerelle API', target: 'Microservice A' },
{ source: 'Passerelle API', target: 'Microservice B' },
{ source: 'Microservice A', target: 'Cache Redis' },
{ source: 'Microservice B', target: 'PostgreSQL' }
],
lineStyle: {
color: 'source', // Colorer l'arête en fonction de la couleur du nœud source
width: 2,
curveness: 0.1
}
}
]
};
Meilleures pratiques stratégiques
- Activer
roam: truepour la navigation :Les réseaux interactifs grandissent rapidement. Activer la navigation avec zoom et défilement permet aux utilisateurs de se concentrer sur des groupes spécifiques sans se sentir étouffés. - Appliquer
courbureaux arêtes :Définir une légère courbure (par exemple,lineStyle.curveness: 0.1à0.2) empêche les liens bidirectionnels entre deux nœuds identiques de se superposer en une seule ligne. - Répulsion de la force physique d’équilibre : Ajuster
force.repulsionavec soin. Les valeurs trop faibles feront que les nœuds se superposeront en un groupe dense, tandis que les valeurs trop élevées pousseront les nœuds complètement hors du canevas visible.