Dans le domaine de la visualisation des données et des rapports, le Graphique en colonnes (un graphique à barres verticales) est l’outil principal pour comparer des catégories discrètes sur une ou plusieurs métriques. Contrairement aux graphiques à barres horizontales, qui conviennent bien aux étiquettes longues, les graphiques en colonnes verticales utilisent les différences de hauteur pour communiquer instantanément le volume, la croissance et la variance. Que vous affichiez des chiffres de ventes trimestriels, des pics d’utilisation du CPU serveur ou le trafic web par canal, les graphiques en colonnes offrent une norme visuelle claire pour les métriques basées sur des catégories.
Le fonctionnement des colonnes verticales
Dans Apache ECharts, tant les graphiques à barres horizontales que les graphiques en colonnes verticales reposent sur le type de série 'bar' série. Le facteur clé qui crée un graphique en colonnes consiste à placer les étiquettes de catégorie sur l’axe horizontal (xAxis) tout en définissant l’axe vertical (yAxis) aux valeurs numériques. Le moteur de graphique lit le tableau de données et ajuste dynamiquement la hauteur de chaque colonne verticale par rapport à l’échelle numérique.
1. Configuration de base
Pour créer un graphique en colonnes de base, définissez un axe X basé sur des catégories et mappez votre jeu de données vers un objet série avec type: 'bar':
option = {
xAxis: {
type: 'category',
data: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130]
}
]
};
Techniques structurelles avancées
Lors de la création de tableaux de bord, les graphiques simples à une seule série sont souvent insuffisants. ECharts propose des options de syntaxe claires pour gérer les comparaisons multi-séries, les dimensions personnalisées et les espacements de disposition.
Comparaison multi-séries
Pour comparer plusieurs jeux de données côte à côte (par exemple, les revenus année après année), ajoutez plusieurs objets dans le tableau series array. Le moteur de disposition regroupera les colonnes associées par catégorie le long de l’axe X :
option = {
xAxis: {
type: 'category',
data: ['T1', 'T2', 'T3', 'T4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Chiffre d'affaires 2025',
type: 'bar',
data: [320, 332, 301, 334]
},
{
name: 'Chiffre d'affaires 2026',
type: 'bar',
data: [220, 182, 191, 234]
}
]
};
Styles personnalisés des colonnes et mise en évidence individuelle
Vous pouvez appliquer des styles globaux à une série entière ou cibler directement des points de données spécifiques. Cela est particulièrement utile pour mettre en évidence des événements clés, des valeurs aberrantes ou des objectifs spécifiques.
couleur: Définit la couleur de remplissage (code hexadécimal, RGB ou dégradés linéaires).rayonBorder: Ajoute des coins arrondis aux colonnes (par exemple,[5, 5, 0, 0]pour les coins supérieurs).opacité: Ajuste la transparence des colonnes.ombrageFlou&couleurOmbre: Ajoute une élévation et des ombres portées aux colonnes.
option = {
xAxis: {
type: 'category',
data: ['Direct', 'Email', 'Réseaux publicitaires', 'Publicités vidéo', 'Recherche']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [
320,
332,
{
value: 401,
// Mettre en évidence une colonne de pic unique
itemStyle: {
color: '#ee6666',
borderRadius: [6, 6, 0, 0]
}
},
334,
390
],
itemStyle: {
color: '#5470c6',
borderRadius: [4, 4, 0, 0]
}
}
]
};
Affinage du layout et des dimensions
Les dimensions des colonnes et l’espacement ont un impact significatif sur la lisibilité, notamment lors de l’affichage de graphiques sur des écrans réactifs ou des tableaux de bord denses.
1. Contrôle de la largeur et des limites
Par défaut, les largeurs des colonnes s’ajustent dynamiquement en fonction du conteneur du graphique. Vous pouvez contrôler ces proportions à l’aide de propriétés de dimensionnement :
largeurBarre: Définit la largeur de la colonne en pixels fixes ou en pourcentage de la largeur de la catégorie (par exemple,'30%').largeurBarreMax: Définit une limite supérieure sur la largeur afin que les colonnes ne s’étirent pas excessivement sur les affichages à grand écran.barMinHeight: Force une hauteur minimale en pixels afin que les valeurs proches de zéro restent cliquables et visibles.
2. Espacement des colonnes et pistes d’arrière-plan
Pour donner à vos colonnes un aspect moderne de tableau de bord, ajustez les espaces internes ou activez les pistes d’arrière-plan sur toute la hauteur :
option = {
xAxis: {
type: 'category',
data: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70],
barWidth: '40%',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.15)',
borderRadius: [4, 4, 0, 0]
}
}
]
};
Meilleures pratiques stratégiques
- Maintenez un espacement équilibré : Évitez de définir
barWidthtrop large (au-dessus de 60 %) afin d’éviter que la mise en page visuelle ne paraisse surchargée. - Décision entre horizontal et vertical : Utilisez les graphiques en colonnes lorsque les étiquettes de catégorie sont courtes (par exemple, mois, trimestres, codes). Si vos étiquettes sont des descriptions longues ou des noms, envisagez de déplacer les données de catégorie vers l’
yAxispour créer un graphique à barres horizontal à la place. - Intégrité de la base à zéro : Gardez toujours l’axe numérique commençant à zéro (
0). Tronquer l’échelle inférieure dans les graphiques en colonnes déforme les rapports de hauteur et induit en erreur les spectateurs.