Lors de la présentation de données structurées avec des relations claires entre parents et enfants — telles que les organigrammes, les répertoires du système de fichiers, les arbres de décision ou les classifications taxonomiques — le Diagramme en arbre fournit un cadre visuel intuitif. En disposant les nœuds de données le long de chemins ramifiés, les diagrammes en arbre permettent aux utilisateurs d’explorer des hiérarchies imbriquées et de suivre les connexions depuis un nœud racine central jusqu’aux sous-branchements.
Le fonctionnement des diagrammes en arbre
Dans Apache ECharts, les diagrammes en arbre utilisent type : 'arbre'. Contrairement aux graphiques standards dotés d’axes X et Y explicites, les diagrammes en arbre construisent automatiquement les positions d’agencement à partir d’un objet JavaScript imbriqué contenant un nom et un tableau facultatif enfants .
1. Configuration essentielle
Pour construire un diagramme en arbre basique, définissez votre structure de données imbriquées et définissez type : 'arbre' à l’intérieur du tableau series :
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [{
name: 'PDG',
children: [
{
name: 'Directeur produit',
children: [
{ name: 'Responsable produit' },
{ name: 'Designer UX' }
]
},
{
name: 'Directeur ingénierie',
children: [
{ name: 'Chef technique' },
{ name: 'Ingénieur DevOps' }
]
}
]
}],
top: '5%',
left: '15%',
bottom: '5%',
right: '20%',
symbolSize: 10,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 12
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
expandAndCollapse: true,
animationDurationUpdate: 750
}
]
};
Orientations avancées de disposition
Les diagrammes en arbre peuvent s’adapter à différentes contraintes d’espace et à des exigences de conception en modifiant leur direction de disposition ou en passant à une visualisation radiale.
1. Disposition arborescente radiale
Définissez layout : 'radial' pour projeter les branches vers l’extérieur à partir d’un point central, idéal pour les hiérarchies larges comportant de nombreux nœuds feuilles :
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
layout: 'radial',
data: [{
name: 'Racine',
children: [
{
name: 'Branche A',
children: [
{ name: 'A1' },
{ name: 'A2' },
{ name: 'A3' }
]
},
{
name: 'Branche B',
children: [
{ name: 'B1' },
{ name: 'B2' }
]
},
{
name: 'Branche C',
children: [
{ name: 'C1' },
{ name: 'C2' },
{ name: 'C3' },
{ name: 'C4' }
]
}
]
}],
top: '18%',
bottom: '14%',
right: '18%',
left: '18%',
symbolSize: 12,
initialTreeDepth: 2,
animationDurationUpdate: 750
}
]
};
Affiner le layout et le style
Personnaliser les symboles de nœuds, les courbes des lignes et le formatage spécifique aux niveaux aide à mettre en évidence les niveaux structurels clés dans de grands diagrammes.
1. Connecteurs courbés et style de nœuds basé sur les niveaux
Utilisez lineStyle.curveness pour lisser les lignes de connexion, et définissez niveaux des configurations de tableau pour styliser les nœuds en fonction de leur profondeur dans la hiérarchie :
option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'tree',
orient: 'TB', // Orientation du haut vers le bas
data: [{
name: 'Racine du projet',
children: [
{
name: 'Frontend',
children: [
{ name: 'React' },
{ name: 'Vue' }
]
},
{
name: 'Backend',
children: [
{ name: 'Node.js' },
{ name: 'Python' }
]
}
]
}],
top: '10%',
left: '10%',
bottom: '10%',
right: '10%',
symbol: 'emptyCircle',
symbolSize: 14,
edgeShape: 'polyline', // Utilise des connexions rectangulaires nettes au lieu de courbes
initialTreeDepth: 2,
lineStyle: {
width: 2,
color: '#ccc'
},
label: {
position: 'top',
fontSize: 12
},
leaves: {
label: {
position: 'bottom'
}
}
}
]
};
Meilleures pratiques stratégiques
- Contrôler la profondeur initiale de pliage : Définissez
initialTreeDepth(par exemple,1ou2) sur de grands jeux de données pour garder le graphique propre au chargement initial tout en permettant aux utilisateurs de cliquer sur les nœuds pour développer les détails. - Choisir la bonne orientation : Utilisez des dispositions horizontales (`LR`) ou radiales (`radial`) pour les structures profondément imbriquées avec des étiquettes longues, et des dispositions verticales (`TB`) pour les structures organisationnelles peu profondes et larges.
- Différencier les nœuds feuilles : Utilisez la propriété
leavespour styliser les nœuds terminaux différemment des nœuds parents conteneurs, afin que les utilisateurs puissent facilement distinguer les branches des extrémités.