{"id":2076,"date":"2026-07-24T09:24:14","date_gmt":"2026-07-24T09:24:14","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/grouped-column-chart-multi-series-data-and-spacing-guide\/","title":{"rendered":"Gr\u00e1fico de columnas agrupadas: datos multi-serie y espaciado"},"content":{"rendered":"

En el an\u00e1lisis de datos y los informes empresariales, el Gr\u00e1fico de columnas agrupadas<\/strong> (tambi\u00e9n conocido como gr\u00e1fico de columnas agrupadas) es la herramienta principal para comparaci\u00f3n lado a lado a trav\u00e9s de m\u00faltiples dimensiones. Mientras que un gr\u00e1fico de columnas est\u00e1ndar eval\u00faa una sola m\u00e9trica por categor\u00eda, los gr\u00e1ficos de columnas agrupadas colocan conjuntos de datos relacionados uno al lado del otro dentro del mismo bin de categor\u00eda. Esto permite una evaluaci\u00f3n visual inmediata de tendencias a lo largo del tiempo, rendimiento entre equipos o rendimiento multi-m\u00e9trico<\/em>.<\/p>\n

La mec\u00e1nica de las columnas agrupadas<\/h2>\n

Los gr\u00e1ficos de columnas agrupadas operan en un sistema de coordenadas compartido donde el eje horizontal representa categor\u00edas discretas y el eje vertical maneja valores continuos. El agrupamiento se logra declarando m\u00faltiples objetos de series que comparten la misma alineaci\u00f3n de categor\u00eda en el eje horizontal. El motor de dise\u00f1o calcula autom\u00e1ticamente el desplazamiento necesario y representa cada serie lado a lado dentro de su bloque de categor\u00eda respectivo.<\/p>\n

1. Configuraci\u00f3n esencial<\/h3>\n

Para crear un gr\u00e1fico de columnas agrupadas, define un eje categ\u00f3rico \u00fanico y proporciona m\u00faltiples objetos de series con type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar ECharts en 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: ['Ingresos 2025', 'Ingresos 2026']\r\n    },\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: 'Ingresos 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Ingresos 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>
\nEditar ECharts en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
T\u00e9cnicas estructurales avanzadas<\/h2>\n
Agregar una tercera o cuarta serie aumenta la densidad del gr\u00e1fico. Para mantener la claridad, puedes ajustar finamente el estilo de las series, el espaciado del dise\u00f1o y las pistas visuales.<\/p>\n
1. Estilo personalizado entre grupos<\/h3>\n
Aplicar colores \u00fanicos, bordes redondeados o estilos personalizados para los elementos facilita distinguir grupos individuales dentro de gr\u00e1ficos densos:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar ECharts en 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: ['Producto A', 'Producto B', 'Producto C']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Am\u00e9rica del Norte', 'Europa', 'Pac\u00edfico Asia']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Producto 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: 'Producto 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: 'Producto 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>
\nEditar ECharts en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Ajuste fino del dise\u00f1o y el espaciado<\/h2>\n
El espaciado es cr\u00edtico al trabajar con columnas agrupadas. Controlar el espacio entre las columnas del mismo grupo frente al espacio entre grupos de categor\u00edas separadas evita el desorden visual.<\/p>\n
1. Espacios internos frente a espacios entre categor\u00edas<\/h3>\n
Utiliza atributos de espaciado para equilibrar la densidad del dise\u00f1o:<\/p>\n