{"id":2048,"date":"2026-07-27T02:44:14","date_gmt":"2026-07-27T02:44:14","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/"},"modified":"2026-07-27T02:44:14","modified_gmt":"2026-07-27T02:44:14","slug":"gauge-chart-single-metric-status-and-threshold-tracking-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3ng h\u1ed3: Theo d\u00f5i tr\u1ea1ng th\u00e1i v\u00e0 ng\u01b0\u1ee1ng cho m\u1ed9t ch\u1ec9 s\u1ed1 duy nh\u1ea5t"},"content":{"rendered":"

Khi theo d\u00f5i c\u00e1c KPI \u0111\u01a1n l\u1ebb so v\u1edbi c\u00e1c m\u1ee5c ti\u00eau quan tr\u1ecdng ho\u1eb7c ng\u01b0\u1ee1ng an to\u00e0n v\u1eadn h\u00e0nh, th\u00ecBi\u1ec3u \u0111\u1ed3 \u0111\u1ed3ng h\u1ed3<\/strong> (hay c\u00f2n g\u1ecdi l\u00e0 bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3ng h\u1ed3 t\u1ed1c \u0111\u1ed9) cung c\u1ea5p m\u1ed9t t\u00edn hi\u1ec7u th\u1ecb gi\u00e1c ngay l\u1eadp t\u1ee9c, d\u1ec5 nh\u1eadn bi\u1ebft. B\u1eb1ng c\u00e1ch bi\u1ec3u di\u1ec5n m\u1ed9t gi\u00e1 tr\u1ecb duy nh\u1ea5t d\u1ecdc theo m\u1ed9t cung tr\u00f2n v\u1edbi kim ch\u1ec9 v\u00e0 c\u00e1c v\u00f9ng tr\u1ea1ng th\u00e1i \u0111\u01b0\u1ee3c m\u00e3 m\u00e0u, bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3ng h\u1ed3 cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng \u0111\u00e1nh gi\u00e1hi\u1ec7u su\u1ea5t hi\u1ec7n t\u1ea1i so v\u1edbi ng\u01b0\u1ee1ng c\u1ea3nh b\u00e1o v\u00e0 gi\u1edbi h\u1ea1n m\u1ee5c ti\u00eau<\/em>\u2014v\u00ed d\u1ee5 nh\u01b0 t\u1ea3i CPU m\u00e1y ch\u1ee7, t\u1ef7 l\u1ec7 ho\u00e0n th\u00e0nh d\u1ef1 \u00e1n, \u0111i\u1ec3m t\u00edn d\u1ee5ng ho\u1eb7c t\u1ed1c \u0111\u1ed9 ph\u01b0\u01a1ng ti\u1ec7n.<\/p>\n

C\u01a1 ch\u1ebf ho\u1ea1t \u0111\u1ed9ng c\u1ee7a bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3ng h\u1ed3<\/h2>\n

Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3ng h\u1ed3 s\u1eed d\u1ee5ngtype: 'gauge'<\/code>. Kh\u00e1c v\u1edbi c\u00e1c bi\u1ec3u \u0111\u1ed3 \u0111a th\u1ec3 lo\u1ea1i, bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3ng h\u1ed3 th\u01b0\u1eddng hi\u1ec3n th\u1ecb m\u1ed9t gi\u00e1 tr\u1ecb duy nh\u1ea5t ho\u1eb7c m\u1ed9t t\u1eadp h\u1ee3p nh\u1ecf c\u00e1c kim ch\u1ec9 d\u1ecdc theo cung b\u00e1n k\u00ednh. Thang tr\u1ee5c \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ngmin<\/code> v\u00e0 max<\/code> thu\u1ed9c t\u00ednh, trong khiaxisLine.lineStyle.color<\/code>chia cung vi\u1ec1n th\u00e0nh c\u00e1c d\u1ea3i c\u1ea3nh b\u00e1o ri\u00eang bi\u1ec7t (v\u00ed d\u1ee5: xanh, v\u00e0ng, \u0111\u1ecf).<\/p>\n

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

\u0110\u1ec3 x\u00e2y d\u1ef1ng m\u1ed9t bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3ng h\u1ed3 c\u01a1 b\u1ea3n, h\u00e3y thi\u1ebft l\u1eadpmin<\/code>, max<\/code>, v\u00e0 cung c\u1ea5p m\u1ed9t m\u1ee5c gi\u00e1 tr\u1ecb duy nh\u1ea5t b\u00ean trong m\u1ea3ng d\u1eef li\u1ec7u c\u1ee7a chu\u1ed7idata<\/code>m\u1ea3ng:<\/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: {\r\n        formatter: '{a} \r\n{b} : {c}%'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'S\u1ee9c kh\u1ecfe h\u1ec7 th\u1ed1ng',\r\n            type: 'gauge',\r\n            progress: {\r\n                show: true\r\n            },\r\n            detail: {\r\n                valueAnimation: true,\r\n                formatter: '{value}%' \r\n            },\r\n            data: [\r\n                {\r\n                    value: 70,\r\n                    name: 'T\u1ea3i CPU'\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
Bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3ng h\u1ed3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng v\u1edbi c\u00e1c d\u1ea3i tr\u1ee5c nhi\u1ec1u m\u00e0u, \u0111i\u1ec1n m\u00e0u ti\u1ebfn \u0111\u1ed9 t\u00f9y ch\u1ec9nh, ho\u1eb7c nhi\u1ec1u kim ch\u1ec9 \u0111\u1ec3 so s\u00e1nh gi\u00e1 tr\u1ecb th\u1ef1c t\u1ebf v\u1edbi gi\u00e1 tr\u1ecb m\u1ee5c ti\u00eau tr\u00ean m\u1ed9t m\u1eb7t \u0111\u1ed3ng h\u1ed3 duy nh\u1ea5t.<\/p>\n
1. C\u00e1c d\u1ea3i ng\u01b0\u1ee1ng m\u00e3 m\u00e0u v\u00e0 c\u00e1c ch\u1ec9 th\u1ecb t\u00f9y ch\u1ec9nh<\/h3>\n
X\u00e1c \u0111\u1ecbnh c\u00e1c \u0111i\u1ec3m d\u1eebng m\u00e0u r\u00f5 r\u00e0ng d\u1ecdc theo tr\u1ee5c h\u00ecnh tr\u00f2n b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ngaxisLine.lineStyle.color<\/code>\u0111\u1ec3 \u0111\u00e1nh d\u1ea5u c\u00e1c khu v\u1ef1c c\u1ea3nh b\u00e1o (v\u00ed d\u1ee5: An to\u00e0n, C\u1ea3nh b\u00e1o, Nguy hi\u1ec3m):<\/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    series: [\r\n        {\r\n            type: 'gauge',\r\n            axisLine: {\r\n                lineStyle: {\r\n                    width: 20,\r\n                    color: [\r\n                        [0.3, '#67c23a'], \/\/ Xanh l\u00e1 \u0111\u1ebfn 30%\r\n                        [0.7, '#e6a23c'], \/\/ Cam \u0111\u1ebfn 70%\r\n                        [1, '#f56c6c']    \/\/ \u0110\u1ecf \u0111\u1ebfn 100%\r\n                    ]\r\n                }\r\n            },\r\n            pointer: {\r\n                itemStyle: {\r\n                    color: 'auto'\r\n                }\r\n            },\r\n            axisTick: {\r\n                distance: -20,\r\n                length: 8,\r\n                lineStyle: {\r\n                    color: '#fff',\r\n                    width: 2\r\n                }\r\n            },\r\n            splitLine: {\r\n                distance: -20,\r\n                length: 20,\r\n                lineStyle: {\r\n                    color: '#fff',\r\n                    width: 4\r\n                }\r\n            },\r\n            axisLabel: {\r\n                color: 'inherit',\r\n                distance: 25,\r\n                fontSize: 14\r\n            },\r\n            detail: {\r\n                valueAnimation: true,\r\n                formatter: '{value} km\/h',\r\n                color: 'inherit'\r\n            },\r\n            data: [\r\n                {\r\n                    value: 80,\r\n                    name: 'T\u1ed1c \u0111\u1ed9'\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
Tinh ch\u1ec9nh b\u1ed1 c\u1ee5c v\u00e0 c\u00e1c ch\u1ec9 s\u1ed1 trung t\u00e2m<\/h2>\n
\u00c1p d\u1ee5ng c\u00e1c v\u00e0nh \u0111ai ti\u1ebfn \u0111\u1ed9 bo tr\u00f2n hi\u1ec7n \u0111\u1ea1i v\u00e0 ki\u1ec3u ch\u1eef nh\u00e3n trung t\u00e2m t\u00f9y ch\u1ec9nh bi\u1ebfn \u0111\u1ed3ng h\u1ed3 \u0111o ti\u00eau chu\u1ea9n th\u00e0nh c\u00e1c th\u1ebb b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n tinh t\u1ebf.<\/p>\n
1. \u0110\u1ed3ng h\u1ed3 \u0111o v\u00e0nh tr\u00f2n tinh t\u1ebf v\u1edbi hi\u1ec3n th\u1ecb nh\u00e3n trung t\u00e2m<\/h3>\n
\u1ea8n c\u00e1c kim truy\u1ec1n th\u1ed1ng v\u00e0 s\u1eed d\u1ee5ng m\u1ed9t v\u00e0nh \u0111ai ti\u1ebfn \u0111\u1ed9 bo tr\u00f2n d\u00e0y k\u1ebft h\u1ee3p v\u1edbi v\u0103n b\u1ea3n l\u1edbn \u1edf trung t\u00e2m \u0111\u1ec3 t\u1ea1o th\u00e0nh m\u1ed9t th\u00e0nh ph\u1ea7n giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng s\u1ea1ch s\u1ebd, hi\u1ec7n \u0111\u1ea1i:<\/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    series: [\r\n        {\r\n            type: 'gauge',\r\n            startAngle: 180,\r\n            endAngle: 0,\r\n            min: 0,\r\n            max: 100,\r\n            splitNumber: 5,\r\n            itemStyle: {\r\n                color: '#5470c6',\r\n                shadowColor: 'rgba(0,138,255,0.45)',\r\n                shadowBlur: 10,\r\n                shadowOffsetX: 2,\r\n                shadowOffsetY: 2\r\n            },\r\n            progress: {\r\n                show: true,\r\n                roundCap: true,\r\n                width: 18\r\n            },\r\n            pointer: {\r\n                show: false \/\/ \u1ea8n kim ch\u1ec9 \u0111\u1ec3 hi\u1ec3n th\u1ecb v\u00e0nh tr\u00f2n s\u1ea1ch s\u1ebd\r\n            },\r\n            axisLine: {\r\n                roundCap: true,\r\n                lineStyle: {\r\n                    width: 18\r\n                }\r\n            },\r\n            axisTick: { show: false },\r\n            splitLine: { show: false },\r\n            axisLabel: { show: false },\r\n            title: {\r\n                offsetCenter: [0, '20%'],\r\n                fontSize: 14,\r\n                color: '#666'\r\n            },\r\n            detail: {\r\n                offsetCenter: [0, '-10%'],\r\n                valueAnimation: true,\r\n                formatter: '{value}%',\r\n                fontSize: 32,\r\n                fontWeight: 'bold',\r\n                color: '#333'\r\n            },\r\n            data: [\r\n                {\r\n                    value: 78,\r\n                    name: 'Ti\u1ebfn \u0111\u1ed9 D\u1ef1 \u00e1n'\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 th\u1ef1c h\u00e0nh t\u1ed1t chi\u1ebfn l\u01b0\u1ee3c<\/h2>\n
    \n
  • Gi\u1eef ph\u1ea1m vi t\u1eadp trung:<\/strong>\u0110\u1ed3ng h\u1ed3 \u0111o chi\u1ebfm kh\u00f4ng gian th\u1ecb gi\u00e1c \u0111\u00e1ng k\u1ec3 \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ed9t ch\u1ec9 s\u1ed1 duy nh\u1ea5t. D\u00e0nh ch\u00fang cho c\u00e1c ch\u1ec9 s\u1ed1 quan tr\u1ecdng, \u01b0u ti\u00ean cao c\u1ea7n \u0111\u00e1nh gi\u00e1 tr\u1ea1ng th\u00e1i ngay l\u1eadp t\u1ee9c.<\/li>\n
  • S\u1eed d\u1ee5ng m\u00e0u s\u1eafc m\u1ed9t c\u00e1ch \u00fd ngh\u0129a:<\/strong>C\u00e2n b\u1eb1ng c\u00e1c d\u1ea3i m\u00e0u ng\u01b0\u1ee1ng v\u1edbi c\u00e1c ti\u00eau chu\u1ea9n ph\u1ed5 bi\u1ebfn (v\u00ed d\u1ee5: xanh cho an to\u00e0n, cam\/v\u00e0ng cho c\u1ea3nh b\u00e1o, \u0111\u1ecf cho nguy hi\u1ec3m) \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 \u0111\u00e1nh gi\u00e1 tr\u1ea1ng th\u00e1i m\u00e0 kh\u00f4ng c\u1ea7n \u0111\u1ecdc ch\u00ednh x\u00e1c c\u00e1c con s\u1ed1.<\/li>\n
  • Xem x\u00e9t b\u1ed1 c\u1ee5c v\u00e0nh tr\u00f2n kh\u00f4ng c\u00f3 kim ch\u1ec9:<\/strong>\u0110\u1ed1i v\u1edbi b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n k\u1ef9 thu\u1eadt s\u1ed1 v\u00e0 m\u00e0n h\u00ecnh di \u0111\u1ed9ng, c\u00e1c \u0111\u1ed3ng h\u1ed3 \u0111o ti\u1ebfn \u0111\u1ed9 cung kh\u00f4ng c\u00f3 kim th\u01b0\u1eddng tr\u00f4ng s\u1ea1ch s\u1ebd h\u01a1n v\u00e0 chi\u1ebfm \u00edt chi\u1ec1u cao d\u1ecdc h\u01a1n so v\u1edbi c\u00e1c \u0111\u1ed3ng h\u1ed3 kim truy\u1ec1n th\u1ed1ng.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi theo d\u00f5i c\u00e1c KPI \u0111\u01a1n l\u1ebb so v\u1edbi c\u00e1c m\u1ee5c ti\u00eau quan tr\u1ecdng ho\u1eb7c ng\u01b0\u1ee1ng an to\u00e0n v\u1eadn h\u00e0nh, th\u00ecBi\u1ec3u \u0111\u1ed3 \u0111\u1ed3ng h\u1ed3 (hay c\u00f2n g\u1ecdi l\u00e0 bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3ng h\u1ed3 t\u1ed1c \u0111\u1ed9) cung c\u1ea5p m\u1ed9t t\u00edn hi\u1ec7u th\u1ecb…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":22,"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-2048","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Gauge Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Render single-metric dial gauges and dashboard indicators using ECharts 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\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Gauge Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Render single-metric dial gauges and dashboard indicators using ECharts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-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_6a66c635e1eae.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=\"3 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\\\/gauge-chart-single-metric-status-and-threshold-tracking-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/gauge-chart-single-metric-status-and-threshold-tracking-guide\\\/\",\"name\":\"ECharts Gauge Chart Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/gauge-chart-single-metric-status-and-threshold-tracking-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/gauge-chart-single-metric-status-and-threshold-tracking-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c635e1eae.png\",\"datePublished\":\"2026-07-27T02:44:14+00:00\",\"description\":\"Render single-metric dial gauges and dashboard indicators using ECharts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/gauge-chart-single-metric-status-and-threshold-tracking-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/gauge-chart-single-metric-status-and-threshold-tracking-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/gauge-chart-single-metric-status-and-threshold-tracking-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c635e1eae.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c635e1eae.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/gauge-chart-single-metric-status-and-threshold-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 \u0111\u1ed3ng h\u1ed3: Theo d\u00f5i tr\u1ea1ng th\u00e1i v\u00e0 ng\u01b0\u1ee1ng cho m\u1ed9t ch\u1ec9 s\u1ed1 duy nh\u1ea5t\"}]},{\"@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 Gauge Chart Guide | VPasCode Text to Diagram Tool","description":"Render single-metric dial gauges and dashboard indicators using ECharts 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\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Gauge Chart Guide | VPasCode Text to Diagram Tool","og_description":"Render single-metric dial gauges and dashboard indicators using ECharts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c635e1eae.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/","name":"ECharts Gauge Chart Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c635e1eae.png","datePublished":"2026-07-27T02:44:14+00:00","description":"Render single-metric dial gauges and dashboard indicators using ECharts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c635e1eae.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c635e1eae.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-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 \u0111\u1ed3ng h\u1ed3: Theo d\u00f5i tr\u1ea1ng th\u00e1i v\u00e0 ng\u01b0\u1ee1ng cho m\u1ed9t ch\u1ec9 s\u1ed1 duy nh\u1ea5t"}]},{"@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\/2048","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=2048"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}