{"id":2075,"date":"2026-07-24T09:00:08","date_gmt":"2026-07-24T09:00:08","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/echarts-playbook\/column-chart-core-setup-styling-and-layout-guide","title":{"rendered":"Gr\u00e1fico de Colunas: Configura\u00e7\u00e3o B\u00e1sica, Estilo e Layout"},"content":{"rendered":"

No dom\u00ednio da visualiza\u00e7\u00e3o de dados e relat\u00f3rios, o Gr\u00e1fico de Colunas<\/strong> (um gr\u00e1fico de barras vertical) \u00e9 a ferramenta principal para comparar categorias discretas em uma ou m\u00faltiplas m\u00e9tricas. Diferentemente dos gr\u00e1ficos de barras horizontais, que s\u00e3o adequados para r\u00f3tulos longos de texto, os gr\u00e1ficos de colunas verticais utilizam diferen\u00e7as de altura para comunicar instantaneamente volume, crescimento e varia\u00e7\u00e3o<\/em>. Seja voc\u00ea exibindo dados de vendas trimestrais, picos de utiliza\u00e7\u00e3o da CPU do servidor ou tr\u00e1fego web por canal, os gr\u00e1ficos de colunas fornecem um padr\u00e3o visual claro para m\u00e9tricas baseadas em categorias.<\/p>\n

Os Mecanismos das Colunas Verticais<\/h2>\n

No Apache ECharts, tanto os gr\u00e1ficos de barras horizontais quanto os gr\u00e1ficos de colunas verticais dependem do tipo de s\u00e9rie 'bar'<\/code> s\u00e9rie. O fator-chave que cria um gr\u00e1fico de colunas \u00e9 posicionar r\u00f3tulos de categoria no eixo horizontal (xAxis<\/code>) enquanto define o eixo vertical (yAxis<\/code>) para valores num\u00e9ricos. O motor do gr\u00e1fico l\u00ea a matriz de dados e escala dinamicamente a altura de cada coluna vertical em rela\u00e7\u00e3o \u00e0 escala num\u00e9rica.<\/p>\n

1. Configura\u00e7\u00e3o B\u00e1sica<\/h3>\n

Para criar um gr\u00e1fico de colunas b\u00e1sico, defina um eixo X baseado em categorias e mapeie seu conjunto de dados para um objeto de s\u00e9rie com type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nEditar ECharts no 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: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'S\u00e1b', 'Dom']\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>\nEditar ECharts no VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
T\u00e9cnicas Estruturais Avan\u00e7adas<\/h2>\n
Ao construir pain\u00e9is, gr\u00e1ficos simples de uma \u00fanica s\u00e9rie muitas vezes s\u00e3o insuficientes. O ECharts oferece op\u00e7\u00f5es de sintaxe limpa para gerenciar compara\u00e7\u00f5es de m\u00faltiplas s\u00e9ries, dimens\u00f5es personalizadas e espa\u00e7amento de layout.<\/p>\n
Compara\u00e7\u00e3o de M\u00faltiplas S\u00e9ries<\/h3>\n
Para comparar m\u00faltiplos conjuntos de dados lado a lado (como receita ano a ano), adicione m\u00faltiplos objetos dentro do array series<\/code> array. O motor de layout agrupar\u00e1 colunas relacionadas por categoria ao longo do eixo X:<\/p>\n
\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nEditar ECharts no 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: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Receita de 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Receita de 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>\nEdite ECharts no VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Estilos Personalizados de Colunas e Destaque Individual<\/h3>\n
Voc\u00ea pode aplicar estilos globais a uma s\u00e9rie inteira ou direcionar pontos de dados espec\u00edficos diretamente. Isso \u00e9 especialmente \u00fatil para destacar eventos importantes, valores at\u00edpicos ou metas espec\u00edficas.<\/p>\n