{"id":2044,"date":"2026-07-27T03:43:40","date_gmt":"2026-07-27T03:43:40","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/"},"modified":"2026-07-27T03:43:40","modified_gmt":"2026-07-27T03:43:40","slug":"calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 L\u1ecbch: B\u1ea3n \u0111\u1ed3 nhi\u1ec7t chu\u1ed7i th\u1eddi gian v\u00e0 theo d\u00f5i ho\u1ea1t \u0111\u1ed9ng h\u00e0ng ng\u00e0y"},"content":{"rendered":"

Khi theo d\u00f5i th\u00f3i quen h\u00e0ng ng\u00e0y, l\u01b0u l\u01b0\u1ee3ng truy c\u1eadp trang web, nh\u1eadt k\u00fd ho\u1ea1t \u0111\u1ed9ng m\u00e1y ch\u1ee7 ho\u1eb7c c\u01b0\u1eddng \u0111\u1ed9 doanh s\u1ed1 trong su\u1ed1t c\u00e1c n\u0103m l\u1ecbch, th\u00ecBi\u1ec3u \u0111\u1ed3 L\u1ecbch<\/strong> cung c\u1ea5p m\u1ed9t b\u1ed1 c\u1ee5c tr\u1ef1c quan hi\u1ec7u qu\u1ea3 d\u1ef1a tr\u00ean l\u01b0\u1edbi. \u0110\u01b0\u1ee3c l\u1ea5y c\u1ea3m h\u1ee9ng t\u1eeb bi\u1ec3u \u0111\u1ed3 \u0111\u00f3ng g\u00f3p v\u00e0 b\u1ea3n \u0111\u1ed3 nhi\u1ec7t theo m\u00f9a, bi\u1ec3u \u0111\u1ed3 l\u1ecbch bi\u1ec3u di\u1ec5n c\u00e1c ch\u1ec9 s\u1ed1 \u0111\u1ecbnh l\u01b0\u1ee3ng li\u00ean t\u1ee5c tr\u00ean c\u00e1c ng\u00e0y l\u1ecbch c\u1ee5 th\u1ec3, gi\u00fap ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng nh\u1eadn di\u1ec7n c\u00e1c \u0111\u1ec9nh ho\u1ea1t \u0111\u1ed9ng cao, s\u1ef1 thay \u0111\u1ed5i v\u00e0o cu\u1ed1i tu\u1ea7n v\u00e0 c\u00e1c m\u1eabu theo m\u00f9a k\u00e9o d\u00e0i nhi\u1ec1u th\u00e1ng.<\/p>\n

C\u01a1 ch\u1ebf c\u1ee7a bi\u1ec3u \u0111\u1ed3 l\u1ecbch<\/h2>\n

Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 l\u1ecbch s\u1eed d\u1ee5ng m\u1ed9t h\u1ec7 t\u1ecda \u0111\u1ed9 ri\u00eang bi\u1ec7tcalendar<\/code> k\u1ebft h\u1ee3p v\u1edbi ki\u1ec3u bi\u1ec3u \u0111\u1ed3heatmap<\/code> ho\u1eb7c scatter<\/code> lo\u1ea1i chu\u1ed7i. Thay v\u00ec c\u00e1c tr\u1ee5c X v\u00e0 Y Descartes ti\u00eau chu\u1ea9n, ECharts t\u1ef1 \u0111\u1ed9ng t\u00ednh to\u00e1n v\u1ecb tr\u00ed l\u01b0\u1edbi ng\u00e0y v\u00e0 th\u00e1ng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng chu\u1ed7i ng\u00e0y th\u00e1ng.<\/p>\n

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

\u0110\u1ec3 t\u1ea1o m\u1ed9t b\u1ea3n \u0111\u1ed3 nhi\u1ec7t l\u1ecbch h\u00e0ng n\u0103m c\u01a1 b\u1ea3n, h\u00e3y x\u00e1c \u0111\u1ecbnh m\u1ed9t th\u00e0nh ph\u1ea7ncalendar<\/code> v\u1edbi ph\u1ea1m vi \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh (v\u00ed d\u1ee5 nh\u01b0'2026'<\/code>), g\u1eafn m\u1ed9tvisualMap<\/code> \u0111\u1ec3 \u0111i\u1ec1u khi\u1ec3n \u0111\u1ed9 d\u1ed1c m\u00e0u c\u1ee7a ch\u1ec9 s\u1ed1, v\u00e0 truy\u1ec1n c\u00e1c b\u1ed9 d\u1eef li\u1ec7u ng\u00e0y-gi\u00e1 tr\u1ecb theo \u0111\u1ecbnh d\u1ea1ng['YYYY-MM-DD', gi\u00e1 tr\u1ecb]<\/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    title: {\r\n        top: 10,\r\n        left: 'center',\r\n        text: 'S\u1ed1 l\u1ea7n ghi nh\u1eadn h\u00e0ng ng\u00e0y (2026)'\r\n    },\r\n    tooltip: {\r\n        formatter: function (params) {\r\n            return params.value[0] + ': ' + params.value[1] + ' l\u1ea7n ghi nh\u1eadn';\r\n        }\r\n    },\r\n    visualMap: {\r\n        min: 0,\r\n        max: 100,\r\n        type: 'piecewise',\r\n        orient: 'horizontal',\r\n        left: 'center',\r\n        top: 65,\r\n        inRange: {\r\n            color: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']\r\n        }\r\n    },\r\n    calendar: {\r\n        top: 120,\r\n        left: 30,\r\n        right: 30,\r\n        cellSize: ['auto', 13],\r\n        range: '2026',\r\n        itemStyle: {\r\n            borderWidth: 0.5,\r\n            borderColor: '#ccc'\r\n        },\r\n        yearLabel: { show: false }\r\n    },\r\n    series: {\r\n        type: 'heatmap',\r\n        coordinateSystem: 'calendar',\r\n        data: [\r\n            ['2026-01-01', 12], ['2026-01-02', 45], ['2026-01-03', 88],\r\n            ['2026-02-14', 95], ['2026-03-20', 30], ['2026-05-10', 65],\r\n            ['2026-07-27', 82], ['2026-10-31', 99], ['2026-12-25', 10]\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
Bi\u1ec3u \u0111\u1ed3 l\u1ecbch c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh cho b\u1ed1 c\u1ee5c cu\u1ed9n d\u1ecdc ho\u1eb7c t\u00f9y ch\u1ec9nh b\u1eb1ng bi\u1ec3u di\u1ec5n \u0111i\u1ec3m \u0111\u1ec3 tr\u1ef1c quan h\u00f3a c\u00e1c ch\u1ec9 s\u1ed1 h\u00e0ng ng\u00e0y r\u1eddi r\u1ea1c.<\/p>\n
1. G\u00f3c nh\u00ecn l\u1ecbch \u0111a th\u00e1ng d\u1ecdc<\/h3>\n
Thay \u0111\u1ed5i orient: 'vertical'<\/code> tr\u00ean th\u00e0nh ph\u1ea7n l\u1ecbch \u0111\u1ec3 x\u1ebfp c\u00e1c th\u00e1ng theo chi\u1ec1u d\u1ecdc\u2014ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n cao ho\u1eb7c b\u1ed1 c\u1ee5c di \u0111\u1ed9ng:<\/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    title: {\r\n        text: 'Ghi ch\u00e9p Ho\u1ea1t \u0111\u1ed9ng Qu\u00fd 1',\r\n        left: 'center'\r\n    },\r\n    tooltip: {},\r\n    visualMap: {\r\n        min: 0,\r\n        max: 500,\r\n        type: 'continuous',\r\n        orient: 'vertical',\r\n        right: 10,\r\n        top: 'center',\r\n        inRange: {\r\n            color: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']\r\n        }\r\n    },\r\n    calendar: {\r\n        top: 60,\r\n        left: 'center',\r\n        orient: 'vertical',\r\n        range: ['2026-01-01', '2026-03-31'],\r\n        cellSize: [20, 20],\r\n        yearLabel: { show: false },\r\n        dayLabel: {\r\n            firstDay: 1, \/\/ B\u1eaft \u0111\u1ea7u tu\u1ea7n v\u00e0o th\u1ee9 Hai\r\n            nameMap: 'en'\r\n        },\r\n        monthLabel: { nameMap: 'en' }\r\n    },\r\n    series: {\r\n        type: 'heatmap',\r\n        coordinateSystem: 'calendar',\r\n        data: [\r\n            ['2026-01-05', 120], ['2026-01-18', 340], ['2026-02-02', 480],\r\n            ['2026-02-20', 210], ['2026-03-15', 410], ['2026-03-28', 190]\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 \u0111\u1ecbnh d\u1ea1ng<\/h2>\n
K\u1ebft h\u1ee3p h\u1ec7 t\u1ecda \u0111\u1ed9 l\u1ecbch v\u1edbi chu\u1ed7i ph\u00e2n t\u00e1n cho ph\u00e9p b\u1ea1n \u0111i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc \u0111i\u1ec3m d\u1ef1a tr\u00ean \u0111\u1ed9 m\u1ea1nh thay v\u00ec ch\u1ec9 d\u00f9ng kh\u1ed1i m\u00e0u.<\/p>\n
1. L\u1ecbch Bong b\u00f3ng Ph\u00e2n t\u00e1n<\/h3>\n
S\u1eed d\u1ee5ng type: 'scatter'<\/code> tr\u00ean m\u1ed9t l\u1ecbch<\/code>h\u1ec7 t\u1ecda \u0111\u1ed9 t\u1ea1o ra c\u00e1c ch\u1ec9 b\u00e1o h\u00e0ng ng\u00e0y ki\u1ec3u bong b\u00f3ng t\u01b0\u01a1ng t\u00e1c:<\/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    title: {\r\n        text: 'Kh\u1ed1i l\u01b0\u1ee3ng \u0110\u01a1n h\u00e0ng H\u00e0ng ng\u00e0y',\r\n        left: 'center'\r\n    },\r\n    tooltip: {\r\n        formatter: function (params) {\r\n            return params.value[0] + ': ' + params.value[1] + ' \u0111\u01a1n h\u00e0ng';\r\n        }\r\n    },\r\n    calendar: {\r\n        top: 80,\r\n        left: 40,\r\n        right: 40,\r\n        range: '2026-05',\r\n        cellSize: ['auto', 25],\r\n        itemStyle: {\r\n            color: '#f8fafc',\r\n            borderWidth: 1,\r\n            borderColor: '#e2e8f0'\r\n        }\r\n    },\r\n    series: {\r\n        type: 'scatter',\r\n        coordinateSystem: 'calendar',\r\n        symbolSize: function (val) {\r\n            return val[1] \/ 10; \/\/ \u0110i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc bong b\u00f3ng theo s\u1ed1 l\u01b0\u1ee3ng \u0111\u01a1n h\u00e0ng\r\n        },\r\n        itemStyle: {\r\n            color: '#3b82f6',\r\n            opacity: 0.8\r\n        },\r\n        data: [\r\n            ['2026-05-01', 120], ['2026-05-05', 240], ['2026-05-12', 180],\r\n            ['2026-05-18', 310], ['2026-05-22', 90], ['2026-05-28', 270]\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\u1ed1i \u01b0u Chi\u1ebfn l\u01b0\u1ee3c<\/h2>\n
    \n
  • \u0110\u1ed3ng b\u1ed9 Ng\u00e0y th\u00e1ng theo \u0110\u1ecbnh d\u1ea1ng ISO:<\/strong> \u0110\u1ea3m b\u1ea3o c\u00e1c ng\u00e0y trong m\u1ea3ng d\u1eef li\u1ec7u chu\u1ed7i c\u1ee7a b\u1ea1n tu\u00e2n theo \u0111\u1ecbnh d\u1ea1ng chu\u1ed7i ti\u00eau chu\u1ea9n 'YYYY-MM-DD'<\/code> \u0111\u1ecbnh d\u1ea1ng chu\u1ed7i \u0111\u1ec3 l\u01b0\u1edbi l\u1ecbch \u00e1nh x\u1ea1 ch\u00ednh x\u00e1c c\u00e1c b\u1ea3n ghi.<\/li>\n
  • C\u1ea5u h\u00ecnh firstDay<\/code> \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00ednh nh\u1ea5t qu\u00e1n khu v\u1ef1c:<\/strong> S\u1eed d\u1ee5ng dayLabel.firstDay<\/code> (\u0111\u1eb7t th\u00e0nh 0<\/code> v\u00e0o Ch\u1ee7 nh\u1eadt ho\u1eb7c 1<\/code> v\u00e0o Th\u1ee9 Hai) \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi quy \u01b0\u1edbc l\u1ecbch \u0111\u1ecba ph\u01b0\u01a1ng c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng ng\u01b0\u1eddi xem.<\/li>\n
  • K\u1ebft h\u1ee3p B\u1ea3n \u0111\u1ed3 tr\u1ef1c quan t\u1eebng \u0111o\u1ea1n cho c\u00e1c \u0111\u00f3ng g\u00f3p:<\/strong> Khi hi\u1ec3n th\u1ecb bi\u1ec3u \u0111\u1ed3 commit theo phong c\u00e1ch GitHub, h\u00e3y s\u1eed d\u1ee5ng m\u1ed9t b\u1ea3n \u0111\u1ed3 tr\u1ef1c quan t\u1eebng \u0111o\u1ea1n<\/code> ki\u1ec3u b\u1ea3n \u0111\u1ed3 tr\u1ef1c quan v\u1edbi c\u00e1c \u0111i\u1ec3m d\u1eebng m\u00e0u r\u1eddi r\u1ea1c thay v\u00ec c\u00e1c gradient li\u00ean t\u1ee5c \u0111\u1ec3 c\u00f3 c\u00e1c b\u01b0\u1edbc tr\u1ef1c quan ph\u00e2n lo\u1ea1i r\u00f5 r\u00e0ng h\u01a1n.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi theo d\u00f5i th\u00f3i quen h\u00e0ng ng\u00e0y, l\u01b0u l\u01b0\u1ee3ng truy c\u1eadp trang web, nh\u1eadt k\u00fd ho\u1ea1t \u0111\u1ed9ng m\u00e1y ch\u1ee7 ho\u1eb7c c\u01b0\u1eddng \u0111\u1ed9 doanh s\u1ed1 trong su\u1ed1t c\u00e1c n\u0103m l\u1ecbch, th\u00ecBi\u1ec3u \u0111\u1ed3 L\u1ecbch cung c\u1ea5p m\u1ed9t b\u1ed1 c\u1ee5c tr\u1ef1c quan hi\u1ec7u…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":26,"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-2044","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Calendar Heatmap | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram 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\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Calendar Heatmap | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-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_6a66d42a1f090.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\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/\",\"name\":\"ECharts Calendar Heatmap | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66d42a1f090.png\",\"datePublished\":\"2026-07-27T03:43:40+00:00\",\"description\":\"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66d42a1f090.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66d42a1f090.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-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 L\u1ecbch: B\u1ea3n \u0111\u1ed3 nhi\u1ec7t chu\u1ed7i th\u1eddi gian v\u00e0 theo d\u00f5i ho\u1ea1t \u0111\u1ed9ng h\u00e0ng ng\u00e0y\"}]},{\"@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 Calendar Heatmap | VPasCode Text to Diagram Guide","description":"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram 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\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Calendar Heatmap | VPasCode Text to Diagram Guide","og_description":"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090.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\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/","name":"ECharts Calendar Heatmap | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090.png","datePublished":"2026-07-27T03:43:40+00:00","description":"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-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 L\u1ecbch: B\u1ea3n \u0111\u1ed3 nhi\u1ec7t chu\u1ed7i th\u1eddi gian v\u00e0 theo d\u00f5i ho\u1ea1t \u0111\u1ed9ng h\u00e0ng ng\u00e0y"}]},{"@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\/2044","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=2044"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}