Lorsque l’on présente des jeux de données hiérarchiques à plusieurs niveaux ou des visualisations complexes où l’espace est limité, le Graphique en cartographie offre une solution visuelle efficace. En agencant des rectangles imbriqués dans une zone délimitée unique, les cartographies codent les valeurs numériques par la taille de la surface du rectangle, permettant aux utilisateurs d’évaluer les proportions relatives au sein de structures imbriquées complexes—par exemple l’utilisation de l’espace disque, le chiffre d’affaires du catalogue de produits ou les affectations budgétaires entre départements parent et enfants.
Le fonctionnement des graphiques en cartographie
Dans Apache ECharts, les cartographies utilisent type : 'treemap'. La série attend un tableau structuré en arbre où chaque objet contient un data tableau où chaque objet contient un nom, une valeur quantitative value, et un tableau facultatif children pour des niveaux imbriqués plus profonds.
1. Configuration de base
Pour construire une cartographie de base, définissez un tableau de données hiérarchiques avec des éléments imbriqués children et définissez type : 'treemap' dans la configuration de votre série :
option = {
tooltip: {
formatter: '{b} : ${c}'
},
series: [
{
type: 'treemap',
data: [
{
name: 'Électronique',
value: 400,
children: [
{ name: 'Téléphones', value: 240 },
{ name: 'Ordinateurs portables', value: 160 }
]
},
{
name: 'Vêtements',
value: 300,
children: [
{ name: 'Chemises', value: 180 },
{ name: 'Chaussures', value: 120 }
]
}
]
}
]
};
Techniques structurelles avancées
Les cartographies peuvent être configurées avec des règles de style à plusieurs niveaux, des mappages de dégradés de couleurs et des contrôles interactifs de zoom pour des arbres de données profonds.
1. Navigation par fil d’Ariane à plusieurs niveaux
Activez les légendes supérieures et la navigation par fil d’Ariane pour permettre aux utilisateurs d’identifier les catégories de niveau supérieur et de naviguer facilement vers les sous-répertoires imbriqués :
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} Go'
},
legend: {
top: '5%',
left: 'center',
data: ['Disque système (C:)', 'Disque de données (D:)']
},
series: [
{
type: 'treemap',
top: '18%',
bottom: '12%',
leafDepth: 1, // Affiche un niveau à la fois avec un clic pour descendre
breadcrumb: {
show: true,
left: 'center',
bottom: '2%'
},
levels: [
{
itemStyle: {
borderColor: '#555',
borderWidth: 2,
gapWidth: 2
}
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderWidth: 1,
gapWidth: 1,
borderColorSaturation: 0.7
}
}
],
data: [
{
name: 'Disque système (C:)',
value: 500,
children: [
{ name: 'Windows', value: 120 },
{ name: 'Fichiers programmes', value: 230 },
{ name: 'Utilisateurs', value: 150 }
]
},
{
name: 'Disque de données (D:)',
value: 800,
children: [
{ name: 'Médias', value: 450 },
{ name: 'Sauvegardes', value: 250 },
{ name: 'Projets', value: 100 }
]
}
]
}
]
};
Affinage du layout et du style
Appliquer des largeurs d’écart, des bordures nettes et des couleurs distinctes pour chaque niveau maintient les rectangles imbriqués bien organisés et facilement lisibles visuellement.
1. Bordures personnalisées des cellules et alignement des étiquettes
Ajustez gapWidth et label les configurations pour maintenir des frontières distinctes entre les conteneurs parents et les segments enfants :
option = {
series: [
{
type: 'treemap',
roam: false, // Désactive le zoom et le déplacement manuels
label: {
show: true,
formatter: '{b}n{c}'
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
gapWidth: 2
},
data: [
{
name: 'Amérique du Nord',
value: 520,
itemStyle: { color: '#5470c6' }
},
{
name: 'Europe',
value: 380,
itemStyle: { color: '#91cc75' }
},
{
name: 'Asie-Pacifique',
value: 450,
itemStyle: { color: '#fac858' }
},
{
name: 'Amérique latine',
value: 190,
itemStyle: { color: '#ee6666' }
}
]
}
]
};
Meilleures pratiques stratégiques
- Utilisez
gapWidthpour la visibilité de l’imbrication : Ajouter un petitgapWidth(par exemple, 2px à 4px) entre les rectangles imbriqués crée un espacement clair entre les catégories parentes et les sous-éléments enfants. - Activez les fil d’Ariane pour les hiérarchies profondes : Lorsqu’on affiche 3 niveaux ou plus d’imbrication, activez `breadcrumb: { show: true }` afin que les utilisateurs puissent facilement retrouver leur position et remonter rapidement.
- Gardez les étiquettes concises : Le texte peut facilement déborder des petites rectangles feuilles. Combine des noms courts avec des infobulles ou utilisez
leafDepthpour masquer les petites sous-rectangles jusqu’à ce que vous zoomiez.