Lors de l’évaluation de profils de performance complexes sur plusieurs métriques qualitatives ou quantitatives simultanément, le Graphique radar (ou graphique en toile d’araignée) est un outil de visualisation idéal. En plaçant plusieurs échelles de caractéristiques le long d’axes radiaux partant d’un point central, les graphiques radar affichent des comparaisons multidimensionnelles sous forme de formes polygonales distinctes. Cela les rend particulièrement adaptés aux évaluations de compétences, aux tableaux de bord d’évaluation des fournisseurs, aux références de fonctionnalités de produits ou aux profils de performance des joueurs.
Le fonctionnement des graphiques radar
Dans Apache ECharts, les graphiques radar reposent sur un bloc de configuration dédié radar qui définit les axes radiaux, appelés indicateur clés. L’objet série définit type : 'radar' et associe des valeurs de tableau numériques correspondant à chaque échelle d’indicateur déclarée.
1. Configuration de base
Pour créer un graphique radar de base, définissez vos seuils de dimension à l’intérieur de radar.indicateur et transmettez des tableaux numériques dans vos données de série :
option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['Budget alloué', 'Dépenses réelles']
},
radar: {
indicator: [
{ name: 'Ventes', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Technologie de l'information', max: 30000 },
{ name: 'Support client', max: 38000 },
{ name: 'Développement', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Budget vs Dépenses',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Budget alloué'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Dépenses réelles'
}
]
}
]
};
Techniques structurelles avancées
Les graphiques radar peuvent être stylisés à l’aide de polygones remplis, de formes de grille circulaires ou de thèmes de couleur distincts pour faciliter la lecture des superpositions de profils.
1. Remplissage de zone polygonale avec des formes de grille personnalisées
Passer de la grille de fond polygonale à circulaire et appliquer des remplissages de zone transparents met en évidence l’empreinte globale de chaque profil de métrique :
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
data: ['Modèle A', 'Modèle B']
},
radar: {
shape: 'circle', // Grille de fond circulaire
indicator: [
{ name: 'Autonomie de la batterie', max: 100 },
{ name: 'Puissance de traitement', max: 100 },
{ name: 'Qualité de construction', max: 100 },
{ name: 'Qualité de l'affichage', max: 100 },
{ name: 'Appareil photo', max: 100 },
{ name: 'Valeur', max: 100 }
]
},
series: [
{
type: 'radar',
data: [
{
value: [80, 90, 70, 85, 95, 60],
name: 'Modèle A',
areaStyle: {
color: 'rgba(84, 112, 198, 0.4)'
}
},
{
value: [95, 70, 85, 90, 75, 90],
name: 'Modèle B',
areaStyle: {
color: 'rgba(145, 204, 117, 0.4)'
}
}
]
}
]
};
Affinage du layout et du style
Ajuster les couleurs du texte des indicateurs, les lignes de séparation et les tailles des symboles empêche les lignes web à plusieurs axes de submerger les données.
1. Formatage personnalisé de la grille web et des étiquettes
Stylez les lignes d’axe, les zones de séparation et les étiquettes externes pour maintenir un contraste visuel clair sur les interfaces sombres ou claires :
option = {
radar: {
indicateur: [
{ nom: 'Utilisabilité', max: 10 },
{ nom: 'Performance', max: 10 },
{ nom: 'Sécurité', max: 10 },
{ nom: 'Évolutivité', max: 10 },
{ nom: 'Efficacité coûts', max: 10 }
],
nomAxe: {
couleur: '#333',
taillePolice: 13,
graissePolice: 'gras'
},
zoneSeparation: {
styleZone: {
couleur: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.1)']
}
},
ligneSeparation: {
styleLigne: {
couleur: '#ccc'
}
}
},
series: [
{
type: 'radar',
tailleSymbole: 8,
styleLigne: {
largeur: 3
},
donnees: [
{
valeur: [8.5, 9.0, 7.5, 8.0, 9.5],
nom: 'Note plateforme',
styleElement: {
couleur: '#5470c6'
},
styleZone: {
couleur: 'rgba(84, 112, 198, 0.3)'
}
}
]
}
]
};
Meilleures pratiques stratégiques
- Standardisez les échelles des axes :Assurez-vous que tous les indicateurs utilisent des plages d’échelle normalisées (par exemple, de 0 à 100 ou de 1 à 10) chaque fois que possible, afin que les zones polygonales externes reflètent des comparaisons équilibrées.
- Maintenez les superpositions de séries faibles :Limitez les formes de comparaison radar à 2 ou 3 par graphique. Le chevauchement de 4 ou plus de polygones remplis rend les contours des formes individuelles difficiles à isoler.
- Utilisez des remplissages de zone à faible opacité :Appliquez toujours des remplissages transparents (une opacité d’environ 0,2 à 0,4) afin que les lignes de grille sous-jacentes et les profils intersectants restent visibles sous les couches supérieures.