{"id":2055,"date":"2026-07-27T02:16:13","date_gmt":"2026-07-27T02:16:13","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/"},"modified":"2026-07-27T02:16:13","modified_gmt":"2026-07-27T02:16:13","slug":"heatmap-chart-grid-based-density-and-pattern-mapping-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 b\u1ea3n \u0111\u1ed3 nhi\u1ec7t: B\u1ea3n \u0111\u1ed3 m\u1eadt \u0111\u1ed9 v\u00e0 m\u1eabu d\u1ef1a tr\u00ean l\u01b0\u1edbi"},"content":{"rendered":"

Khi ph\u00e2n t\u00edch m\u1eadt \u0111\u1ed9 ho\u1ea1t \u0111\u1ed9ng, xu h\u01b0\u1edbng li\u00ean t\u1ee5c ho\u1eb7c t\u01b0\u01a1ng quan tr\u00ean hai chi\u1ec1u r\u1eddi r\u1ea1c, th\u00ecBi\u1ec3u \u0111\u1ed3 b\u1ea3n \u0111\u1ed3 nhi\u1ec7t<\/strong> cung c\u1ea5p m\u1ed9t gi\u1ea3i ph\u00e1p tr\u1ef1c quan m\u1ea1nh m\u1ebd. B\u1eb1ng c\u00e1ch \u00e1nh x\u1ea1 c\u00e1c gi\u00e1 tr\u1ecb d\u1eef li\u1ec7u v\u00e0o thang m\u00e0u \u0111\u1ed9ng tr\u00ean m\u1ed9t l\u01b0\u1edbi hai chi\u1ec1u, b\u1ea3n \u0111\u1ed3 nhi\u1ec7t cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng ph\u00e1t hi\u1ec7n ngay l\u1eadp t\u1ee9cgi\u1edd cao \u0111i\u1ec3m s\u1eed d\u1ee5ng, \u0111i\u1ec3m ngh\u1ebdn theo m\u00f9a ho\u1eb7c m\u1ed1i quan h\u1ec7 ma tr\u1eadn<\/em> ngay l\u1eadp t\u1ee9c\u2014v\u00ed d\u1ee5 nh\u01b0 t\u1ea3i m\u00e1y ch\u1ee7 theo gi\u1edd v\u00e0 ng\u00e0y trong tu\u1ea7n, nh\u1eadt k\u00fd ho\u1ea1t \u0111\u1ed9ng ng\u01b0\u1eddi d\u00f9ng ho\u1eb7c ma tr\u1eadn t\u01b0\u01a1ng quan ch\u00e9o danh m\u1ee5c.<\/p>\n

C\u01a1 ch\u1ebf ho\u1ea1t \u0111\u1ed9ng c\u1ee7a b\u1ea3n \u0111\u1ed3 nhi\u1ec7t<\/h2>\n

Trong Apache ECharts, b\u1ea3n \u0111\u1ed3 nhi\u1ec7t s\u1eed d\u1ee5ngtype: 'heatmap'<\/code> tr\u00ean l\u01b0\u1edbi Descartes hai chi\u1ec1u. M\u1ed7i \u0111i\u1ec3m d\u1eef li\u1ec7u y\u00eau c\u1ea7u m\u1ed9t m\u1ea3ng 3 ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng nh\u01b0[xAxisIndex, yAxisIndex, value]<\/code>. M\u1ed9t th\u00e0nh ph\u1ea7n b\u1eaft bu\u1ed9cvisualMap<\/code> \u00e1nh x\u1ea1 c\u00e1c gi\u00e1 tr\u1ecb s\u1ed1 th\u00e0nh thang m\u00e0u li\u00ean t\u1ee5c ho\u1eb7c t\u1eebng \u0111o\u1ea1n.<\/p>\n

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

\u0110\u1ec3 x\u00e2y d\u1ef1ng bi\u1ec3u \u0111\u1ed3 b\u1ea3n \u0111\u1ed3 nhi\u1ec7t c\u01a1 b\u1ea3n, khai b\u00e1o c\u00e1c tr\u1ee5c ph\u00e2n lo\u1ea1i cho c\u1ea3 tr\u1ee5c ngang (xAxis<\/code>) v\u00e0 tr\u1ee5c d\u1ecdc (yAxis<\/code>) \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh thang \u0111o, truy\u1ec1n c\u00e1c m\u1ea3ng[xIndex, yIndex, value]<\/code> v\u00e0o d\u1eef li\u1ec7u chu\u1ed7i c\u1ee7a b\u1ea1n, v\u00e0 c\u1ea5u h\u00ecnh m\u1ed9t th\u00e0nh ph\u1ea7nvisualMap<\/code>th\u00e0nh ph\u1ea7n:<\/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 
const hours = ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'];\r\nconst days = ['Th\u1ee9 Hai', 'Th\u1ee9 Ba', 'Th\u1ee9 T\u01b0', 'Th\u1ee9 N\u0103m', 'Th\u1ee9 S\u00e1u'];\r\n\r\n\/\/ \u0110\u1ecbnh d\u1ea1ng d\u1eef li\u1ec7u: [xIndex, yIndex, value]\r\nconst data = [\r\n    [0, 0, 5], [1, 0, 1], [2, 0, 0], [3, 0, 0], [4, 0, 12], [5, 0, 24], [6, 0, 38], [7, 0, 42], [8, 0, 35], [9, 0, 20], [10, 0, 10], [11, 0, 6],\r\n    [0, 1, 3], [1, 1, 0], [2, 1, 0], [3, 1, 1], [4, 1, 15], [5, 1, 28], [6, 1, 45], [7, 1, 50], [8, 1, 40], [9, 1, 22], [10, 1, 12], [11, 1, 4],\r\n    [0, 2, 2], [1, 2, 1], [2, 2, 0], [3, 2, 0], [4, 2, 11], [5, 2, 26], [6, 2, 41], [7, 2, 48], [8, 2, 38], [9, 2, 19], [10, 2, 8],  [11, 2, 3],\r\n    [0, 3, 4], [1, 3, 2], [2, 3, 0], [3, 3, 1], [4, 3, 14], [5, 3, 30], [6, 3, 49], [7, 3, 55], [8, 3, 42], [9, 3, 25], [10, 3, 15], [11, 3, 5],\r\n    [0, 4, 6], [1, 4, 3], [2, 4, 1], [3, 4, 2], [4, 4, 10], [5, 4, 20], [6, 4, 32], [7, 4, 36], [8, 4, 28], [9, 4, 18], [10, 4, 9],  [11, 4, 2]\r\n];\r\n\r\noption = {\r\n    tooltip: {\r\n        position: 'top'\r\n    },\r\n    grid: {\r\n        height: '50%',\r\n        top: '10%'\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: hours,\r\n        splitArea: { show: true }\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: days,\r\n        splitArea: { show: true }\r\n    },\r\n    visualMap: {\r\n        min: 0,\r\n        max: 60,\r\n        calculable: true,\r\n        orient: 'horizontal',\r\n        left: 'center',\r\n        bottom: '15%'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'T\u1ea3i h\u1ec7 th\u1ed1ng',\r\n            type: 'heatmap',\r\n            data: data,\r\n            label: {\r\n                show: true\r\n            },\r\n            emphasis: {\r\n                itemStyle: {\r\n                    shadowBlur: 10,\r\n                    shadowColor: 'rgba(0, 0, 0, 0.5)'\r\n                }\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>
\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
B\u1ea3n \u0111\u1ed3 nhi\u1ec7t c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u00f9y ch\u1ec9nh v\u1edbi c\u00e1c b\u01b0\u1edbc m\u00e0u r\u1eddi r\u1ea1c, kho\u1ea3ng c\u00e1ch \u00f4 ri\u00eang bi\u1ec7t, ho\u1eb7c k\u1ebft h\u1ee3p v\u1edbi t\u1ecda \u0111\u1ed9 l\u1ecbch \u0111\u1ec3 theo d\u00f5i ho\u1ea1t \u0111\u1ed9ng trong su\u1ed1t m\u1ed9t n\u0103m.<\/p>\n
1. \u00c1nh x\u1ea1 m\u00e0u theo t\u1eebng \u0111o\u1ea1n v\u00e0 kho\u1ea3ng c\u00e1ch \u00f4 t\u00f9y ch\u1ec9nh<\/h3>\n
Thay v\u00ec s\u1eed d\u1ee5ng d\u1ea3i m\u00e0u li\u00ean t\u1ee5c, h\u00e3y s\u1eed d\u1ee5ngvisualMap<\/code> \u0111\u1ec3 nh\u00f3m c\u00e1c gi\u00e1 tr\u1ecb th\u00e0nh c\u00e1c b\u0103ng ho\u1ea1t \u0111\u1ed9ng ri\u00eang bi\u1ec7t (v\u00ed d\u1ee5: Th\u1ea5p, Trung b\u00ecnh, Cao):<\/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    tooltip: { position: 'top' },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['S\u1ea3n ph\u1ea9m A', 'S\u1ea3n ph\u1ea9m B', 'S\u1ea3n ph\u1ea9m C']\r\n    },\r\n    visualMap: {\r\n        type: 'piecewise',\r\n        min: 0,\r\n        max: 100,\r\n        left: 'center',\r\n        bottom: '5%',\r\n        orient: 'horizontal',\r\n        pieces: [\r\n            { min: 80, label: 'Hi\u1ec7u su\u1ea5t cao', color: '#16a34a' },\r\n            { min: 40, max: 79, label: 'Trung b\u00ecnh', color: '#f59e0b' },\r\n            { max: 39, label: 'C\u1ea7n ch\u00fa \u00fd', color: '#dc2626' }\r\n        ]\r\n    },\r\n    series: [\r\n        {\r\n            type: 'heatmap',\r\n            data: [\r\n                [0, 0, 85], [1, 0, 92], [2, 0, 78], [3, 0, 88],\r\n                [0, 1, 45], [1, 1, 55], [2, 1, 62], [3, 1, 35],\r\n                [0, 2, 25], [1, 2, 30], [2, 2, 18], [3, 2, 42]\r\n            ],\r\n            label: { show: true },\r\n            itemStyle: {\r\n                borderColor: '#ffffff',\r\n                borderWidth: 2\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>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Tinh ch\u1ec9nh b\u1ed1 c\u1ee5c v\u00e0 d\u1ea3i m\u00e0u<\/h2>\n
Vi\u1ec7c ch\u1ecdn c\u00e1c \u0111i\u1ec3m d\u1eebng m\u00e0u d\u1ec5 \u0111\u1ecdc v\u00e0 b\u1eadt ch\u1ebf \u0111\u1ed9 ph\u00e2n v\u00f9ng gi\u00fap qu\u00e9t c\u00e1c l\u01b0\u1edbi ma tr\u1eadn l\u1edbn tr\u1edf n\u00ean d\u1ec5 d\u00e0ng.<\/p>\n
1. T\u00f9y ch\u1ec9nh d\u1ea3i m\u00e0u v\u00e0 c\u0103n ch\u1ec9nh nh\u00e3n<\/h3>\n
C\u1ea5u h\u00ecnh c\u00e1c d\u1ea3i m\u00e0u \u0111a \u0111i\u1ec3m t\u00f9y ch\u1ec9nh trongvisualMap.inRange<\/code> \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi ch\u1ee7 \u0111\u1ec1 n\u1ec1n t\u1ea3ng c\u1ee7a b\u1ea1n:<\/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    grid: { containLabel: true },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['N\u00fat 1', 'N\u00fat 2', 'N\u00fat 3', 'N\u00fat 4']\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['D\u1ecbch v\u1ee5 X', 'D\u1ecbch v\u1ee5 Y', 'D\u1ecbch v\u1ee5 Z']\r\n    },\r\n    visualMap: {\r\n        min: 0,\r\n        max: 100,\r\n        calculable: true,\r\n        orient: 'horizontal',\r\n        left: 'center',\r\n        bottom: '0%',\r\n        inRange: {\r\n            color: ['#f0f9ff', '#0284c7', '#0f172a'] \/\/ D\u1ea3i m\u00e0u xanh nh\u1ea1t \u0111\u1ebfn x\u00e1m xanh \u0111\u1eadm\r\n        }\r\n    },\r\n    series: [\r\n        {\r\n            type: 'heatmap',\r\n            data: [\r\n                [0, 0, 12], [1, 0, 45], [2, 0, 78], [3, 0, 95],\r\n                [0, 1, 34], [1, 1, 67], [2, 1, 89], [3, 1, 23],\r\n                [0, 2, 56], [1, 2, 78], [2, 2, 12], [3, 2, 88]\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>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
C\u00e1c th\u1ef1c h\u00e0nh t\u1ed1t chi\u1ebfn l\u01b0\u1ee3c<\/h2>\n
    \n
  • Lu\u00f4n lu\u00f4n bao g\u1ed3m m\u1ed9tvisualMap<\/code>:<\/strong> M\u1ed9t b\u1ea3n \u0111\u1ed3 nhi\u1ec7t m\u00e0 kh\u00f4ng c\u00f3 bi\u1ec3u t\u01b0\u1ee3ng tr\u1ef1c quan bu\u1ed9c ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i \u0111o\u00e1n \u00fd ngh\u0129a c\u1ee7a c\u00e1c m\u00e0u s\u1eafc. Lu\u00f4n \u0111\u1eb7t m\u1ed9tvisualMap<\/code> r\u00f5 r\u00e0ng \u1edf g\u1ea7n m\u00e9p khung h\u00ecnh.<\/li>\n
  • S\u1eed d\u1ee5ng vi\u1ec1n l\u01b0\u1edbi \u0111\u1ec3 ph\u00e2n t\u00e1ch:<\/strong> \u00c1p d\u1ee5ng vi\u1ec1n tr\u1eafng m\u1ecfng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ngitemStyle.borderColor: '#fff'<\/code> v\u00e0borderWidth: 1<\/code> ho\u1eb7c 2<\/code> \u0111\u1ec3 gi\u1eef cho c\u00e1c \u00f4 ri\u00eang l\u1ebb \u0111\u01b0\u1ee3c ph\u00e2n bi\u1ec7t v\u1ec1 m\u1eb7t th\u1ecb gi\u00e1c trong c\u00e1c ma tr\u1eadn d\u00e0y \u0111\u1eb7c.<\/li>\n
  • \u0110\u1ea3m b\u1ea3o v\u0103n b\u1ea3n c\u00f3 \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n cao:<\/strong> N\u1ebfu nh\u00e3n s\u1ed1 h\u1ecdc c\u1ee7a \u00f4 \u0111ang ho\u1ea1t \u0111\u1ed9ng (label.show: true<\/code>), ki\u1ec3m tra xem m\u00e0u ch\u1eef c\u00f3 v\u1eabn \u0111\u1ecdc \u0111\u01b0\u1ee3c r\u00f5 r\u00e0ng tr\u00ean c\u1ea3 c\u00e1c b\u01b0\u1edbc s\u00e1ng nh\u1ea5t v\u00e0 t\u1ed1i nh\u1ea5t trong b\u1ed9 thang m\u00e0u c\u1ee7a b\u1ea1n.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi ph\u00e2n t\u00edch m\u1eadt \u0111\u1ed9 ho\u1ea1t \u0111\u1ed9ng, xu h\u01b0\u1edbng li\u00ean t\u1ee5c ho\u1eb7c t\u01b0\u01a1ng quan tr\u00ean hai chi\u1ec1u r\u1eddi r\u1ea1c, th\u00ecBi\u1ec3u \u0111\u1ed3 b\u1ea3n \u0111\u1ed3 nhi\u1ec7t cung c\u1ea5p m\u1ed9t gi\u1ea3i ph\u00e1p tr\u1ef1c quan m\u1ea1nh m\u1ebd. B\u1eb1ng c\u00e1ch \u00e1nh x\u1ea1 c\u00e1c gi\u00e1 tr\u1ecb…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":15,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2055","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Heatmap Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Render matrix activity grids and density maps using ECharts heatmap scripts in VPasCode, a diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Heatmap Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Render matrix activity grids and density maps using ECharts heatmap scripts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bf9404a54.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/\",\"name\":\"ECharts Heatmap Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bf9404a54.png\",\"datePublished\":\"2026-07-27T02:16:13+00:00\",\"description\":\"Render matrix activity grids and density maps using ECharts heatmap scripts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bf9404a54.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bf9404a54.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bi\u1ec3u \u0111\u1ed3 b\u1ea3n \u0111\u1ed3 nhi\u1ec7t: B\u1ea3n \u0111\u1ed3 m\u1eadt \u0111\u1ed9 v\u00e0 m\u1eabu d\u1ef1a tr\u00ean l\u01b0\u1edbi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Heatmap Guide | VPasCode Text to Diagram Tool","description":"Render matrix activity grids and density maps using ECharts heatmap scripts in VPasCode, a diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Heatmap Guide | VPasCode Text to Diagram Tool","og_description":"Render matrix activity grids and density maps using ECharts heatmap scripts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bf9404a54.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"2 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","name":"ECharts Heatmap Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bf9404a54.png","datePublished":"2026-07-27T02:16:13+00:00","description":"Render matrix activity grids and density maps using ECharts heatmap scripts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bf9404a54.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bf9404a54.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/vn\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/vn\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Bi\u1ec3u \u0111\u1ed3 b\u1ea3n \u0111\u1ed3 nhi\u1ec7t: B\u1ea3n \u0111\u1ed3 m\u1eadt \u0111\u1ed9 v\u00e0 m\u1eabu d\u1ef1a tr\u00ean l\u01b0\u1edbi"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/vn\/#website","url":"https:\/\/www.vpascode.com\/vn\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/vn\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs\/2055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=2055"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}