Lorsque l’on présente des hiérarchies à plusieurs niveaux où les anneaux internes représentent des catégories de haut niveau et les anneaux externes décomposent les sous-catégories, le Diagram en étoile propose une alternative radiale claire aux cartes en arbre. En disposant les catégories imbriquées en anneaux concentriques, les diagrammes en étoile permettent aux utilisateurs d’explorer des proportions structurelles multi-niveaux, des relations parent-enfant et des chemins de distribution dans un espace compact — par exemple des catégories de produits mondiaux, des organigrammes ou des parcours d’abandon utilisateur à plusieurs étapes.
Le fonctionnement des diagrammes en étoile
Dans Apache ECharts, les diagrammes en étoile utilisent type : 'sunburst'. Similaire aux cartes en arbre, la série attend une structure arborescente imbriquée dans le données tableau où les objets parents contiennent enfants tableaux. Le moteur affiche le nœud racine ou les catégories de niveau supérieur dans le cercle le plus interne et étend les sous-catégories vers l’extérieur à travers les couches d’anneaux concentriques.
1. Configuration de base
Pour construire un diagramme en étoile basique, fournissez un jeu de données arborescent imbriqué et définissez type : 'sunburst' à l’intérieur de votre objet série :
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
type: 'sunburst',
data: [
{
name: 'Grandparent',
children: [
{
name: 'Parent 1',
value: 15,
children: [
{ name: 'Child 1', value: 5 },
{ name: 'Child 2', value: 10 }
]
},
{
name: 'Parent 2',
value: 10,
children: [
{ name: 'Child 3', value: 10 }
]
}
]
}
],
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
]
};
Techniques structurelles avancées
Les diagrammes en étoile peuvent être personnalisés avec des règles de style par anneau, une héritage des couleurs et des zooms interactifs par clic pour explorer en profondeur.
1. Personnalisation spécifique par niveau d’anneau et exploration en profondeur
Utilisez le niveaux tableau pour définir des rayons distincts, des comportements d’étiquettes et des styles d’éléments pour chaque couche d’anneau concentrique du centre vers l’extérieur :
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '2%',
left: 'center',
data: ['Électronique', 'Maison & Vie']
},
series: [
{
type: 'sunburst',
center: ['50%', '55%'],
radius: ['10%', '85%'],
nodeClick: 'rootToNode', // Active le déroulement en cliquant sur un nœud
levels: [
{},
{
// Anneau interne (catégories de niveau supérieur)
r0: '15%',
r: '40%',
label: { rotate: 0, fontWeight: 'bold' },
itemStyle: { borderWidth: 2 }
},
{
// Anneau central (sous-catégories)
r0: '40%',
r: '65%',
label: { rotate: 'tangential', fontSize: 11 }
},
{
// Anneau externe (produits feuilles)
r0: '65%',
r: '85%',
label: { rotate: 'radial', fontSize: 10 }
}
],
data: [
{
name: 'Électronique',
children: [
{
name: 'Audio',
children: [
{ name: 'Casques', value: 40 },
{ name: 'Haut-parleurs', value: 25 }
]
},
{
name: 'Ordinateurs',
children: [
{ name: 'Ordinateurs portables', value: 80 },
{ name: 'Postes de travail', value: 35 }
]
}
]
},
{
name: 'Maison & Vie',
children: [
{
name: 'Meubles',
children: [
{ name: 'Chaises', value: 50 },
{ name: 'Tables', value: 30 }
]
},
{
name: 'Décoration',
children: [
{ name: 'Éclairage', value: 45 },
{ name: 'Tapis', value: 20 }
]
}
]
}
]
}
]
};
Affinage du layout et de l’alignement des étiquettes
Contrôle des modes de rotation des étiquettes (radial vs tangentielle) permet de maintenir le texte lisible lorsque les secteurs se resserrent vers les anneaux externes.
1. Séparations personnalisées des secteurs et étiquettes radiales
Appliquer des bordures aux éléments et définir rotate: 'radial' pour aligner le texte le long des rayons des secteurs de manière soignée :
option = {
series: [
{
type: 'sunburst',
radius: ['20%', '90%'],
itemStyle: {
borderRadius: 4,
borderColor: '#ffffff',
borderWidth: 2
},
label: {
show: true,
rotate: 'radial',
align: 'right'
},
data: [
{
name: 'Logiciels',
itemStyle: { color: '#5470c6' },
children: [
{ name: 'SaaS', value: 120 },
{ name: 'On-Prem', value: 60 }
]
},
{
name: 'Matériel',
itemStyle: { color: '#91cc75' },
children: [
{ name: 'Serveurs', value: 90 },
{ name: 'Réseaux', value: 110 }
]
},
{
name: 'Services',
itemStyle: { color: '#fac858' },
children: [
{ name: 'Conseil', value: 70 },
{ name: 'Support', value: 50 }
]
}
]
}
]
};
Meilleures pratiques stratégiques
- Adapter la rotation des étiquettes à la profondeur de l’anneau : Utiliser horizontal (
rotate: 0) ou des étiquettes tangentes pour les anneaux internes larges, et passer àradialétiquettes pour les secteurs externes étroits. - Activer
nodeClick: 'rootToNode': Le zoom interactif permet aux utilisateurs de cliquer sur n’importe quel arc parent pour se concentrer directement sur son sous-arbre sans encombrement visuel. - Utiliser l’héritage des couleurs : Permettre aux secteurs enfants d’hériter des teintes de base de leur nœud parent avec des variations de luminosité/saturation afin de maintenir un regroupement visuel clair à travers les niveaux.