{"id":2077,"date":"2026-07-24T09:00:08","date_gmt":"2026-07-24T09:00:08","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/echarts-playbook\/column-chart-core-setup-styling-and-layout-guide","title":{"rendered":"Gr\u00e1fico de columnas: Configuraci\u00f3n b\u00e1sica, estilo y dise\u00f1o"},"content":{"rendered":"

En el \u00e1mbito de la visualizaci\u00f3n de datos y los informes, el Gr\u00e1fico de columnas<\/strong> (un gr\u00e1fico de barras vertical) es la herramienta principal para comparar categor\u00edas discretas sobre una o m\u00faltiples m\u00e9tricas. A diferencia de los gr\u00e1ficos de barras horizontales, que son adecuados para etiquetas de texto largas, los gr\u00e1ficos de columnas verticales utilizan diferencias de altura para comunicar de inmediato volumen, crecimiento y variaci\u00f3n<\/em>. Ya sea que est\u00e9 mostrando cifras de ventas trimestrales, picos de utilizaci\u00f3n de CPU del servidor o tr\u00e1fico web por canal, los gr\u00e1ficos de columnas proporcionan una referencia visual clara para m\u00e9tricas basadas en categor\u00edas.<\/p>\n

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

En Apache ECharts, tanto los gr\u00e1ficos de barras horizontales como los gr\u00e1ficos de columnas verticales dependen del tipo de serie 'bar'<\/code> series. El factor clave que crea un gr\u00e1fico de columnas es colocar las etiquetas de categor\u00eda en el eje horizontal (xAxis<\/code>) mientras se establece el eje vertical (yAxis<\/code>) a valores num\u00e9ricos. El motor del gr\u00e1fico lee la matriz de datos y escala din\u00e1micamente la altura de cada columna vertical en relaci\u00f3n con la escala num\u00e9rica.<\/p>\n

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

Para crear un gr\u00e1fico de columnas b\u00e1sico, defina un eje X basado en categor\u00edas y asigne su conjunto de datos a un objeto de serie 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    xAxis: {\r\n        type: 'category',\r\n        data: ['Lun', 'Mar', 'Mi\u00e9', 'Jue', 'Vie', '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 en VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
T\u00e9cnicas estructurales avanzadas<\/h2>\n
Al construir paneles, los gr\u00e1ficos simples de una sola serie a menudo resultan insuficientes. ECharts ofrece opciones de sintaxis claras para gestionar comparaciones de m\u00faltiples series, dimensiones personalizadas y espaciado de dise\u00f1o.<\/p>\n
Comparaci\u00f3n de m\u00faltiples series<\/h3>\n
Para comparar m\u00faltiples conjuntos de datos lado a lado (como los ingresos a\u00f1o tras a\u00f1o), agregue m\u00faltiples objetos dentro del array series<\/code> array. El motor de dise\u00f1o agrupar\u00e1 las columnas relacionadas por categor\u00eda a lo largo del eje X:<\/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    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: '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             <\/div>\n
\n\n<\/path><\/path><\/svg>\nEditar ECharts en VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Estilos personalizados de columnas y resaltado individual<\/h3>\n
Puedes aplicar estilos globales a una serie completa o seleccionar puntos de datos espec\u00edficos directamente. Esto es especialmente \u00fatil para resaltar eventos clave, valores at\u00edpicos o objetivos espec\u00edficos.<\/p>\n