{"id":2071,"date":"2026-07-24T09:00:08","date_gmt":"2026-07-24T09:00:08","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/echarts-playbook\/column-chart-core-setup-styling-and-layout-guide","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 c\u1ed9t: C\u00e0i \u0111\u1eb7t c\u1ed1t l\u00f5i, \u0111\u1ecbnh d\u1ea1ng v\u00e0 b\u1ed1 c\u1ee5c"},"content":{"rendered":"

Trong l\u0129nh v\u1ef1c tr\u1ef1c quan h\u00f3a d\u1eef li\u1ec7u v\u00e0 b\u00e1o c\u00e1o, Bi\u1ec3u \u0111\u1ed3 c\u1ed9t<\/strong> (m\u1ed9t bi\u1ec3u \u0111\u1ed3 c\u1ed9t th\u1eb3ng \u0111\u1ee9ng) l\u00e0 c\u00f4ng c\u1ee5 ch\u00ednh \u0111\u1ec3 so s\u00e1nh c\u00e1c danh m\u1ee5c r\u1eddi r\u1ea1c theo m\u1ed9t ho\u1eb7c nhi\u1ec1u ch\u1ec9 s\u1ed1. Kh\u00e1c v\u1edbi bi\u1ec3u \u0111\u1ed3 c\u1ed9t ngang ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c nh\u00e3n v\u0103n b\u1ea3n d\u00e0i, bi\u1ec3u \u0111\u1ed3 c\u1ed9t th\u1eb3ng \u0111\u1ee9ng s\u1eed d\u1ee5ng s\u1ef1 kh\u00e1c bi\u1ec7t v\u1ec1 chi\u1ec1u cao \u0111\u1ec3 ngay l\u1eadp t\u1ee9c truy\u1ec1n \u0111\u1ea1t kh\u1ed1i l\u01b0\u1ee3ng, t\u0103ng tr\u01b0\u1edfng v\u00e0 \u0111\u1ed9 bi\u1ebfn thi\u00ean<\/em>. D\u00f9 b\u1ea1n \u0111ang hi\u1ec3n th\u1ecb s\u1ed1 li\u1ec7u doanh thu theo qu\u00fd, c\u00e1c \u0111\u1ee3t t\u0103ng \u0111\u1ed9t bi\u1ebfn s\u1eed d\u1ee5ng CPU c\u1ee7a m\u00e1y ch\u1ee7 hay l\u01b0u l\u01b0\u1ee3ng truy c\u1eadp web theo k\u00eanh, bi\u1ec3u \u0111\u1ed3 c\u1ed9t \u0111\u1ec1u cung c\u1ea5p m\u1ed9t chu\u1ea9n h\u00ecnh \u1ea3nh r\u00f5 r\u00e0ng cho c\u00e1c ch\u1ec9 s\u1ed1 d\u1ef1a tr\u00ean danh m\u1ee5c.<\/p>\n

C\u01a1 ch\u1ebf c\u1ee7a c\u00e1c c\u1ed9t th\u1eb3ng \u0111\u1ee9ng<\/h2>\n

Trong Apache ECharts, c\u1ea3 bi\u1ec3u \u0111\u1ed3 c\u1ed9t ngang v\u00e0 bi\u1ec3u \u0111\u1ed3 c\u1ed9t th\u1eb3ng \u0111\u1ee9ng \u0111\u1ec1u d\u1ef1a v\u00e0o lo\u1ea1i chu\u1ed7i 'bar'<\/code> lo\u1ea1i chu\u1ed7i. Y\u1ebfu t\u1ed1 then ch\u1ed1t t\u1ea1o n\u00ean bi\u1ec3u \u0111\u1ed3 c\u1ed9t l\u00e0 \u0111\u1eb7t c\u00e1c nh\u00e3n danh m\u1ee5c tr\u00ean tr\u1ee5c ngang (xAxis<\/code>) trong khi \u0111\u1eb7t tr\u1ee5c \u0111\u1ee9ng (yAxis<\/code>) th\u00e0nh c\u00e1c gi\u00e1 tr\u1ecb s\u1ed1. B\u1ed9 x\u1eed l\u00fd bi\u1ec3u \u0111\u1ed3 \u0111\u1ecdc m\u1ea3ng d\u1eef li\u1ec7u v\u00e0 thay \u0111\u1ed5i chi\u1ec1u cao c\u1ee7a t\u1eebng c\u1ed9t th\u1eb3ng \u0111\u1ee9ng m\u1ed9t c\u00e1ch \u0111\u1ed9ng theo thang s\u1ed1.<\/p>\n

1. C\u00e0i \u0111\u1eb7t c\u01a1 b\u1ea3n<\/h3>\n

\u0110\u1ec3 x\u00e2y d\u1ef1ng bi\u1ec3u \u0111\u1ed3 c\u1ed9t c\u01a1 b\u1ea3n, h\u00e3y x\u00e1c \u0111\u1ecbnh tr\u1ee5c X d\u1ef1a tr\u00ean danh m\u1ee5c v\u00e0 \u00e1nh x\u1ea1 t\u1eadp d\u1eef li\u1ec7u c\u1ee7a b\u1ea1n v\u00e0o m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng chu\u1ed7i v\u1edbi type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nCh\u1ec9nh s\u1eeda ECharts trong 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: ['Th\u1ee9 Hai', 'Th\u1ee9 Ba', 'Th\u1ee9 T\u01b0', 'Th\u1ee9 N\u0103m', 'Th\u1ee9 S\u00e1u', 'Th\u1ee9 B\u1ea3y', 'Ch\u1ee7 Nh\u1eadt']\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>\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
C\u00e1c k\u1ef9 thu\u1eadt c\u1ea5u tr\u00fac n\u00e2ng cao<\/h2>\n
Khi x\u00e2y d\u1ef1ng b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n, c\u00e1c bi\u1ec3u \u0111\u1ed3 \u0111\u01a1n gi\u1ea3n m\u1ed9t chu\u1ed7i th\u01b0\u1eddng kh\u00f4ng \u0111\u1ee7. ECharts cung c\u1ea5p c\u00e1c t\u00f9y ch\u1ecdn c\u00fa ph\u00e1p s\u1ea1ch \u0111\u1ec3 qu\u1ea3n l\u00fd so s\u00e1nh \u0111a chu\u1ed7i, c\u00e1c chi\u1ec1u t\u00f9y ch\u1ec9nh v\u00e0 kho\u1ea3ng c\u00e1ch b\u1ed1 c\u1ee5c.<\/p>\n
So s\u00e1nh \u0111a chu\u1ed7i<\/h3>\n
\u0110\u1ec3 so s\u00e1nh nhi\u1ec1u t\u1eadp d\u1eef li\u1ec7u c\u1ea1nh nhau (v\u00ed d\u1ee5 nh\u01b0 doanh thu theo n\u0103m), h\u00e3y th\u00eam nhi\u1ec1u \u0111\u1ed1i t\u01b0\u1ee3ng b\u00ean trong m\u1ea3ng series<\/code>m\u1ea3ng. B\u1ed9 \u0111\u1ed9ng l\u1ef1c b\u1ed1 c\u1ee5c s\u1ebd nh\u00f3m c\u00e1c c\u1ed9t li\u00ean quan theo t\u1eebng danh m\u1ee5c d\u1ecdc theo tr\u1ee5c X:<\/p>\n
\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nCh\u1ec9nh s\u1eeda ECharts trong 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: 'Doanh thu 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Doanh thu 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>\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Phong c\u00e1ch c\u1ed9t t\u00f9y ch\u1ec9nh v\u00e0 l\u00e0m n\u1ed5i b\u1eadt t\u1eebng \u0111i\u1ec3m d\u1eef li\u1ec7u ri\u00eang l\u1ebb<\/h3>\n
B\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng c\u00e1c phong c\u00e1ch to\u00e0n c\u1ee5c cho to\u00e0n b\u1ed9 chu\u1ed7i ho\u1eb7c nh\u1eafm tr\u1ef1c ti\u1ebfp \u0111\u1ebfn c\u00e1c \u0111i\u1ec3m d\u1eef li\u1ec7u c\u1ee5 th\u1ec3. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch \u0111\u1ec3 l\u00e0m n\u1ed5i b\u1eadt c\u00e1c s\u1ef1 ki\u1ec7n quan tr\u1ecdng, c\u00e1c \u0111i\u1ec3m ngo\u1ea1i l\u1ec7 ho\u1eb7c c\u00e1c m\u1ee5c ti\u00eau c\u1ee5 th\u1ec3.<\/p>\n