{"id":2074,"date":"2026-07-24T09:24:14","date_gmt":"2026-07-24T09:24:14","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/docs\/uncategorized\/grouped-column-chart-multi-series-data-and-spacing-guide\/"},"modified":"2026-07-24T09:24:14","modified_gmt":"2026-07-24T09:24:14","slug":"grouped-column-chart-multi-series-data-and-spacing-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/grouped-column-chart-multi-series-data-and-spacing-guide\/","title":{"rendered":"Gr\u00e1fico de Colunas Agrupadas: Dados Multisserie e Espa\u00e7amento"},"content":{"rendered":"

Na an\u00e1lise de dados e relat\u00f3rios empresariais, o Gr\u00e1fico de Colunas Agrupadas<\/strong> (tamb\u00e9m conhecido como Gr\u00e1fico de Colunas Agrupadas) \u00e9 a ferramenta principal para compara\u00e7\u00e3o lado a lado em m\u00faltiplas dimens\u00f5es. Enquanto um gr\u00e1fico de colunas padr\u00e3o avalia uma \u00fanica m\u00e9trica por categoria, os gr\u00e1ficos de colunas agrupadas posicionam conjuntos de dados relacionados um ao lado do outro dentro da mesma categoria. Isso permite uma avalia\u00e7\u00e3o visual imediata de tend\u00eancias ao longo do tempo, desempenho entre equipes ou desempenho multime\u00e9trico<\/em>.<\/p>\n

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

Os gr\u00e1ficos de colunas agrupadas operam em um sistema de coordenadas compartilhado, onde o eixo horizontal representa categorias discretas e o eixo vertical lida com valores cont\u00ednuos. O agrupamento \u00e9 alcan\u00e7ado declarando m\u00faltiplos objetos de s\u00e9rie que compartilham a mesma alinhamento de categoria no eixo horizontal. O motor de layout calcula automaticamente o deslocamento necess\u00e1rio e renderiza cada s\u00e9rie lado a lado dentro de seu bloco de categoria respectivo.<\/p>\n

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

Para criar um gr\u00e1fico de colunas agrupadas, defina um \u00fanico eixo categ\u00f3rico e forne\u00e7a m\u00faltiplos objetos de s\u00e9rie com type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite o 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    tooltip: {\r\n        trigger: 'axis',\r\n        axisPointer: { type: 'shadow' }\r\n    },\r\n    legend: {\r\n        data: ['Receita 2025', 'Receita 2026']\r\n    },\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 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Receita 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            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdite o ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
T\u00e9cnicas Estruturais Avan\u00e7adas<\/h2>\n
Adicionar uma terceira ou quarta s\u00e9rie aumenta a densidade do gr\u00e1fico. Para manter a clareza, voc\u00ea pode ajustar finamente o estilo das s\u00e9ries, o espa\u00e7amento do layout e as pistas visuais.<\/p>\n
1. Estilo Personalizado entre Grupos<\/h3>\n
Aplicar cores \u00fanicas, cantos arredondados ou estilos personalizados para itens facilita a distin\u00e7\u00e3o entre grupos individuais em gr\u00e1ficos densos:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite o 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    legend: {\r\n        data: ['Produto A', 'Produto B', 'Produto C']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Am\u00e9rica do Norte', 'Europa', '\u00c1sia-Pac\u00edfico']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Produto A',\r\n            type: 'bar',\r\n            data: [150, 230, 224],\r\n            itemStyle: {\r\n                color: '#5470c6',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\r\n        },\r\n        {\r\n            name: 'Produto B',\r\n            type: 'bar',\r\n            data: [180, 200, 210],\r\n            itemStyle: {\r\n                color: '#91cc75',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\r\n        },\r\n        {\r\n            name: 'Produto C',\r\n            type: 'bar',\r\n            data: [120, 140, 190],\r\n            itemStyle: {\r\n                color: '#fac858',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\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            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdite o ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Ajuste Fino do Layout e Espa\u00e7amento<\/h2>\n
O espa\u00e7amento \u00e9 cr\u00edtico ao trabalhar com colunas agrupadas. Controlar a dist\u00e2ncia entre colunas no mesmo grupo em compara\u00e7\u00e3o com a dist\u00e2ncia entre grupos de categorias separadas evita o ac\u00famulo visual.<\/p>\n
1. Espa\u00e7amentos Internos vs. Espa\u00e7amentos de Categoria<\/h3>\n
Use atributos de espa\u00e7amento para equilibrar a densidade do layout:<\/p>\n