Lors de la présentation de métriques catégorielles qui bénéficient d’une association visuelle immédiate, le Graphique à barres pictoriel propose une alternative créative et engageante aux barres rectangulaires standard. En remplaçant les blocs de couleur solide par des icônes vectorielles personnalisées, des chemins SVG ou des motifs de symboles répétés, les graphiques à barres pictoriales transforment les synthèses de données ordinaires en infographies visuellement descriptives—par exemple des icônes humaines pour les statistiques de population, des formes de véhicules pour les métriques de circulation, ou des symboles de fruits pour les comptages de récoltes.
Le fonctionnement des graphiques à barres pictoriales
Dans Apache ECharts, les graphiques à barres pictoriales utilisent type : 'pictorialBar'. Ils fonctionnent sur des axes de catégorie et de valeur standard, tout comme les graphiques à barres réguliers, mais remplacent les barres rectangulaires par des graphiques personnalisables définis par la propriété symbole (telles que des formes standard, des URL d’images ou des chaînes de chemins SVG).
1. Configuration essentielle
Pour construire un graphique à barres pictoriales à plusieurs séries, configurez des axes catégoriels et numériques, définissez type : 'pictorialBar' sur les séries, et personnalisez les symboles individuels directement dans le tableau data :
option = {
title: {
text: "Récolte du marché des agriculteurs",
left: 'center'
},
legend: {
data: ['Printemps', 'Été'],
top: '8%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
containLabel: true,
top: '18%',
left: 20
},
yAxis: {
data: ['Pommes', 'Oranges', 'Bananes', 'Raisins', 'Fraises'],
inverse: true,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
margin: 30,
fontSize: 14
}
},
xAxis: {
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
axisLine: { show: false }
},
series: [
{
name: 'Printemps',
type: 'pictorialBar',
symbolRepeat: true,
symbolSize: ['80%', '60%'],
barCategoryGap: '40%',
data: [
{ value: 320, symbol: 'circle' },
{ value: 180, symbol: 'rect' },
{ value: 410, symbol: 'diamond' },
{ value: 95, symbol: 'triangle' },
{ value: 240, symbol: 'roundRect' }
]
},
{
name: 'Été',
type: 'pictorialBar',
barGap: '10%',
symbolRepeat: true,
symbolSize: ['80%', '60%'],
data: [
{ value: 290, symbol: 'circle' },
{ value: 210, symbol: 'rect' },
{ value: 520, symbol: 'diamond' },
{ value: 130, symbol: 'triangle' },
{ value: 310, symbol: 'roundRect' }
]
}
]
};
Techniques structurelles avancées
Les graphiques à barres pictoriales peuvent répéter les icônes de manière séquentielle pour construire des comptages d’infographies basés sur des unités, ou utiliser des chemins de découpage pour créer des visualisations de niveau de remplissage.
1. Modèles de comptage d’unités à une seule série
Activez symbolRepeat : true sur un axe de valeur unique pour afficher des empilements horizontaux de symboles basés sur des unités :
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'value',
max: 10,
splitLine: { show: false }
},
yAxis: {
type: 'category',
data: ['Équipe Alpha', 'Équipe Bêta', 'Équipe Gamma'],
axisLine: { show: false },
axisTick: { show: false }
},
series: [
{
type: 'pictorialBar',
symbol: 'roundRect',
symbolRepeat: true,
symbolSize: [12, 30],
symbolMargin: 4,
data: [8, 5, 9],
itemStyle: {
color: '#91cc75'
}
}
]
};
Affinage du layout et formes SVG personnalisées
Utiliser des chaînes de chemin SVG vectorielles personnalisées vous permet de rendre des icônes sur mesure directement à l’intérieur de vos séries de graphiques.
1. Chemin vectoriel personnalisé et superposition de fond
Fournissez une chaîne de chemin SVG personnalisée à symbole et superposez un graphique de fond à pleine échelle en dessous pour créer des jauges de progression :
const pathBattery = 'path://M16 4h-2V2a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z';
option = {
title: {
text: 'Niveaux de batterie des appareils',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'none' }
},
grid: {
top: '20%',
bottom: '15%',
left: '10%',
right: '10%'
},
xAxis: {
type: 'category',
data: ['Nœud A', 'Nœud B', 'Nœud C', 'Nœud D'],
axisLine: { show: false },
axisTick: { show: false }
},
yAxis: {
type: 'value',
max: 100,
show: false
},
series: [
{
name: 'Coque de la batterie',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: false,
itemStyle: {
color: '#e2e8f0' // Coque de fond vide
},
data: [100, 100, 100, 100],
z: 1
},
{
name: 'Niveau de charge',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: true, // Remplit proportionnellement par rapport à la valeur
label: {
show: true,
position: 'top',
formatter: '{c}%',
fontSize: 14,
fontWeight: 'bold',
color: '#333'
},
itemStyle: {
color: '#22c55e' // Remplissage vert actif de la charge
},
data: [85, 45, 92, 20],
z: 2
}
]
};
Meilleures pratiques stratégiques
- Attribuez des symboles par élément pour des catégories distinctes : Passez des
symboledéfinis dans les objets de données (par exemple,{ value: 320, symbol: 'cercle' }) pour distinguer visuellement les lignes sans vous fier uniquement aux couleurs. - Gardez les métaphores d’icônes intuitives :Choisissez des symboles qui correspondent directement au sujet des données (par exemple, des silhouettes d’utilisateurs pour des données démographiques ou des icônes de batterie pour des métriques d’énergie) afin que le visuel soit immédiatement lisible.
- Utilisez
symbolClip : truepour les indicateurs de remplissage : Lorsque vous affichez des métriques en pourcentage par rapport à un fond complet, définissezsymbolClip : truesur la série active afin que la forme vectorielle personnalisée se remplisse proportionnellement.