{"id":2079,"date":"2026-07-24T09:00:08","date_gmt":"2026-07-24T09:00:08","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/column-chart-core-setup-styling-and-layout-guide\/"},"modified":"2026-07-24T09:00:08","modified_gmt":"2026-07-24T09:00:08","slug":"column-chart-core-setup-styling-and-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/echarts-playbook\/column-chart-core-setup-styling-and-layout-guide","title":{"rendered":"Graphique en colonnes : configuration de base, mise en forme et disposition"},"content":{"rendered":"

Dans le domaine de la visualisation des donn\u00e9es et des rapports, le Graphique en colonnes<\/strong> (un graphique \u00e0 barres verticales) est l’outil principal pour comparer des cat\u00e9gories discr\u00e8tes sur une ou plusieurs m\u00e9triques. Contrairement aux graphiques \u00e0 barres horizontales, qui conviennent bien aux \u00e9tiquettes longues, les graphiques en colonnes verticales utilisent les diff\u00e9rences de hauteur pour communiquer instantan\u00e9ment le volume, la croissance et la variance<\/em>. 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\u00e9triques bas\u00e9es sur des cat\u00e9gories.<\/p>\n

Le fonctionnement des colonnes verticales<\/h2>\n

Dans Apache ECharts, tant les graphiques \u00e0 barres horizontales que les graphiques en colonnes verticales reposent sur le type de s\u00e9rie 'bar'<\/code> s\u00e9rie. Le facteur cl\u00e9 qui cr\u00e9e un graphique en colonnes consiste \u00e0 placer les \u00e9tiquettes de cat\u00e9gorie sur l’axe horizontal (xAxis<\/code>) tout en d\u00e9finissant l’axe vertical (yAxis<\/code>) aux valeurs num\u00e9riques. Le moteur de graphique lit le tableau de donn\u00e9es et ajuste dynamiquement la hauteur de chaque colonne verticale par rapport \u00e0 l’\u00e9chelle num\u00e9rique.<\/p>\n

1. Configuration de base<\/h3>\n

Pour cr\u00e9er un graphique en colonnes de base, d\u00e9finissez un axe X bas\u00e9 sur des cat\u00e9gories et mappez votre jeu de donn\u00e9es vers un objet s\u00e9rie avec type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nModifier ECharts dans VPasCode<\/span>\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'bar',\r\n            data: [120, 200, 150, 80, 70, 110, 130]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nModifier ECharts dans VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Techniques structurelles avanc\u00e9es<\/h2>\n
Lors de la cr\u00e9ation de tableaux de bord, les graphiques simples \u00e0 une seule s\u00e9rie sont souvent insuffisants. ECharts propose des options de syntaxe claires pour g\u00e9rer les comparaisons multi-s\u00e9ries, les dimensions personnalis\u00e9es et les espacements de disposition.<\/p>\n
Comparaison multi-s\u00e9ries<\/h3>\n
Pour comparer plusieurs jeux de donn\u00e9es c\u00f4te \u00e0 c\u00f4te (par exemple, les revenus ann\u00e9e apr\u00e8s ann\u00e9e), ajoutez plusieurs objets dans le tableau series<\/code> array. Le moteur de disposition regroupera les colonnes associ\u00e9es par cat\u00e9gorie le long de l’axe X :<\/p>\n
\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nModifier ECharts dans VPasCode<\/span>\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['T1', 'T2', 'T3', 'T4']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Chiffre d'affaires 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Chiffre d'affaires 2026',\r\n            type: 'bar',\r\n            data: [220, 182, 191, 234]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nModifier ECharts dans VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Styles personnalis\u00e9s des colonnes et mise en \u00e9vidence individuelle<\/h3>\n
Vous pouvez appliquer des styles globaux \u00e0 une s\u00e9rie enti\u00e8re ou cibler directement des points de donn\u00e9es sp\u00e9cifiques. Cela est particuli\u00e8rement utile pour mettre en \u00e9vidence des \u00e9v\u00e9nements cl\u00e9s, des valeurs aberrantes ou des objectifs sp\u00e9cifiques.<\/p>\n