{"id":2052,"date":"2026-07-27T02:44:14","date_gmt":"2026-07-27T02:44:14","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/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\/id\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/","title":{"rendered":"Grafik Pengukur: Status dan Pelacakan Ambang Satu Metrik"},"content":{"rendered":"<p>Ketika memantau satu KPI terhadap target kritis atau ambang batas keselamatan operasional, maka <strong>Grafik Pengukur<\/strong> (atau Grafik Speedometer) memberikan petunjuk visual yang langsung dan sangat mudah dikenali. Dengan memetakan satu nilai di sepanjang busur melingkar menggunakan penunjuk jarum dan zona status berwarna, grafik pengukur memungkinkan pengguna mengevaluasi <em>kinerja saat ini terhadap ambang batas peringatan dan batas target<\/em>\u2014seperti beban CPU server, persentase penyelesaian proyek, skor kredit, atau kecepatan kendaraan.<\/p>\n<h2>Mekanisme Grafik Pengukur<\/h2>\n<p>Di Apache ECharts, grafik pengukur menggunakan <code>type: 'gauge'<\/code>. Berbeda dengan grafik multi-kategori, grafik pengukur biasanya menampilkan satu nilai atau sejumlah kecil penunjuk di sepanjang busur radial. Skala sumbu didefinisikan menggunakan <code>min<\/code> dan <code>max<\/code> properti, sementara <code>axisLine.lineStyle.color<\/code>membagi busur keliling menjadi zona peringatan yang berbeda (misalnya, hijau, kuning, merah).<\/p>\n<h3>1. Pengaturan Dasar<\/h3>\n<p>Untuk membuat grafik pengukur dasar, atur <code>min<\/code>, <code>max<\/code>, dan sediakan entri nilai tunggal di dalam array series <code>data<\/code> array:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1ULsOwjAM3JH6D15Qlw5sSEEMiIWBAQkxIQYDpo3UNlXigqoq\/0764JFCb4nsO5+dUwVLlcMS6mACDqxUyrIQr7rBTekMmUkLCGu0EEzqswUnudhp2Mls1L2GtCQj4PiZ\/jJqkGNGzmdfGaYMNoQpJ2Hka7gqGk2MZUxDrtAq1mSMGBq36xP1EMC6JJ+zA5MrMcr0r8Ud05JWuXQ\/dsF0ZtGvzMuknXlnMboUGb1kRhLyLhEwn0X\/+T7J9e4AW4XX8Fdl\/dbpU\/aM69jFE8tzbN8=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1ULsOwjAM3Cv1H7ygLh3YkIIYgJEFCTEhhhRMG6ltqsQFoSr\/TvqAkj5uiew7X+yTBQmZwwYq3wMLkjIlUbBvXeMhVcaJUDEIKm7A96rIgJXczCJoZSZsX41KoGZw6af\/jGrkPEPrc0CNCSeew0lowiwIXRm9i1oW8zLGIVcoGSvUmg29mw0S+WJAqkSXMwOTOxIX6aTFk6clbnNhj7bZtGbhWObE0sz84pj91F7shDMTkrMJg9UynOa7MHcY2SD3x3Mwlhm3de3LjrEds\/4AcQhuZQ==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    tooltip: {\r\n        formatter: '{a} \r\n{b} : {c}%'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Kesehatan Sistem',\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: 'Beban CPU'\r\n                }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1ULsOwjAM3Cv1H7ygLh3YkIIYgJEFCTEhhhRMG6ltqsQFoSr\/TvqAkj5uiew7X+yTBQmZwwYq3wMLkjIlUbBvXeMhVcaJUDEIKm7A96rIgJXczCJoZSZsX41KoGZw6af\/jGrkPEPrc0CNCSeew0lowiwIXRm9i1oW8zLGIVcoGSvUmg29mw0S+WJAqkSXMwOTOxIX6aTFk6clbnNhj7bZtGbhWObE0sz84pj91F7shDMTkrMJg9UynOa7MHcY2SD3x3Mwlhm3de3LjrEds\/4AcQhuZQ==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1ULsOwjAM3JH6D15Qlw5sSEEMiIWBAQkxIQYDpo3UNlXigqoq\/0764JFCb4nsO5+dUwVLlcMS6mACDqxUyrIQr7rBTekMmUkLCGu0EEzqswUnudhp2Mls1L2GtCQj4PiZ\/jJqkGNGzmdfGaYMNoQpJ2Hka7gqGk2MZUxDrtAq1mSMGBq36xP1EMC6JJ+zA5MrMcr0r8Ud05JWuXQ\/dsF0ZtGvzMuknXlnMboUGb1kRhLyLhEwn0X\/+T7J9e4AW4XX8Fdl\/dbpU\/aM69jFE8tzbN8=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"RVfTfux\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-1379\" decoding=\"async\" fetchpriority=\"high\" height=\"999\" sizes=\"(max-width: 1162px) 100vw, 1162px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c635e1eae.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c635e1eae.png 1162w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c635e1eae-300x258.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c635e1eae-1024x880.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c635e1eae-768x660.png 768w\" width=\"1162\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Teknik Struktural Lanjutan<\/h2>\n<p>Grafik pengukur dapat diberi gaya dengan pita sumbu berwarna ganda, isian kemajuan khusus, atau beberapa jarum untuk membandingkan nilai aktual terhadap nilai target pada satu dial.<\/p>\n<h3>1. Pita Ambang Berwarna dan Penunjuk Khusus<\/h3>\n<p>Tentukan titik warna eksplisit sepanjang sumbu melingkar menggunakan <code>axisLine.lineStyle.color<\/code> untuk menandai zona peringatan (misalnya, Aman, Peringatan, Kritis):<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqtVE1Pg0AQvZv4HzZpzF7QUmipwXjw5KWJifXW9LDCAJvCLoFBrQ3\/3d1KU4sLtY1zYuft483XjsyRS0HuyebygigroeBQ+mTxfdS22X9qw3UOPqExq2Kg1iHGPng540LhLZK2VAFzXKdmVNs7DzHxiWNbZjyQqSwOYmvbwr5xLUIH3jRwXEaXFhkOyWMBIEiVE5TEta962VPNBo85btCwnwomYmjo0176SJOjiRd4iqw9iv4MYcMd2V3k5W93feiqWxXJJRcIhbGSHCHrr3NTR8oqlPRkbd3kFx6sjL8PeYlMBEr72tjGFESse3xrnTMgu8AHURRRq3+ITs6rzFOOndP718TM4H9mNj6rYzP2CqlRfifNRaIeP5rU98k7EwMcSYFz\/qng0bg\/khCQcXMYbyyt4EHwjOmN5BMsKjBqFerGdvbpZsupySobJqaw25kdiY0hMy6XjpZtxdUkd20rwTK9KOc5QHj8lf3YAQ2iPPXdFx0UGXg=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqtVE1Pg0AQvZv4HzZpDBe0FFpqMB68mVjjod6aHkY6wLSwEFjU2vDf3a0ltbhQa5zTMm\/fvvli0kxQytkt25yfMWkF5oSFx2Zfn8o2+6Mysc7QY0YIZYiGeYjBOxUT4hJvkJTFEpiKdaxHlb3RQkQesy1Tj\/tpnOYHsTVtZl05JjN67ti3HTDmJuv32T0toWQR8TAE5lgXnfSxoqMLtuPv6E858DXW\/HEnf6DYwcj1XclWHsl\/xByimj6w2vjzn+7q0FU1ypKlxAXm2nKSwKS72LtiGlCK1DhZW3X6mfyV9vkFFQK4L7Uvtb2MkYeq0dfmX6akDrwXBIFhdk\/SyXkVWUyidYR\/m5ge\/M\/Mhn\/q2AReMNbK19LEI7kBhE59n7w90sBBysWUPiQ8GHZHskABpA\/jFeIS7zgloNaSx0ReolYrlze2s29stpyKrZL+EhJd4M3cjkQHArQ7pqVpW3k5y21Li0Oi9uUD+pjJp\/nxf+3bJtgh0lPdfAKHPB5Z\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">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'], \/\/ Hijau hingga 30%\r\n                        [0.7, '#e6a23c'], \/\/ Oranye hingga 70%\r\n                        [1, '#f56c6c']    \/\/ Merah hingga 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\/jam',\r\n                color: 'inherit'\r\n            },\r\n            data: [\r\n                {\r\n                    value: 80,\r\n                    name: 'Kecepatan'\r\n                }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqtVE1Pg0AQvZv4HzZpDBe0FFpqMB68mVjjod6aHkY6wLSwEFjU2vDf3a0ltbhQa5zTMm\/fvvli0kxQytkt25yfMWkF5oSFx2Zfn8o2+6Mysc7QY0YIZYiGeYjBOxUT4hJvkJTFEpiKdaxHlb3RQkQesy1Tj\/tpnOYHsTVtZl05JjN67ti3HTDmJuv32T0toWQR8TAE5lgXnfSxoqMLtuPv6E858DXW\/HEnf6DYwcj1XclWHsl\/xByimj6w2vjzn+7q0FU1ypKlxAXm2nKSwKS72LtiGlCK1DhZW3X6mfyV9vkFFQK4L7Uvtb2MkYeq0dfmX6akDrwXBIFhdk\/SyXkVWUyidYR\/m5ge\/M\/Mhn\/q2AReMNbK19LEI7kBhE59n7w90sBBysWUPiQ8GHZHskABpA\/jFeIS7zgloNaSx0ReolYrlze2s29stpyKrZL+EhJd4M3cjkQHArQ7pqVpW3k5y21Li0Oi9uUD+pjJp\/nxf+3bJtgh0lPdfAKHPB5Z\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqtVE1Pg0AQvZv4HzZpzF7QUmipwXjw5KWJifXW9LDCAJvCLoFBrQ3\/3d1KU4sLtY1zYuft483XjsyRS0HuyebygigroeBQ+mTxfdS22X9qw3UOPqExq2Kg1iHGPng540LhLZK2VAFzXKdmVNs7DzHxiWNbZjyQqSwOYmvbwr5xLUIH3jRwXEaXFhkOyWMBIEiVE5TEta962VPNBo85btCwnwomYmjo0176SJOjiRd4iqw9iv4MYcMd2V3k5W93feiqWxXJJRcIhbGSHCHrr3NTR8oqlPRkbd3kFx6sjL8PeYlMBEr72tjGFESse3xrnTMgu8AHURRRq3+ITs6rzFOOndP718TM4H9mNj6rYzP2CqlRfifNRaIeP5rU98k7EwMcSYFz\/qng0bg\/khCQcXMYbyyt4EHwjOmN5BMsKjBqFerGdvbpZsupySobJqaw25kdiY0hMy6XjpZtxdUkd20rwTK9KOc5QHj8lf3YAQ2iPPXdFx0UGXg=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"OhkLimN\"><img alt=\"\" class=\"alignnone size-full wp-image-1380\" decoding=\"async\" height=\"999\" sizes=\"(max-width: 1162px) 100vw, 1162px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c6462266a.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c6462266a.png 1162w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c6462266a-300x258.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c6462266a-1024x880.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c6462266a-768x660.png 768w\" width=\"1162\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Penyesuaian Halus Tata Letak dan Metrik Pusat<\/h2>\n<p>Menerapkan cincin progres melengkung modern dan tipografi label pusat khusus mengubah pengukur standar menjadi kartu dasbor yang ramping.<\/p>\n<h3>1. Pengukur Cincin Ramping dengan Tampilan Label Pusat<\/h3>\n<p>Sembunyikan jarum tradisional dan gunakan cincin progres tebal dengan ujung melengkung yang dipasangkan dengan teks besar di tengah untuk komponen UI yang bersih dan modern:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqNVFFv0zAQfkfiP1hCk0EKLG2argriYfSFBwSThgRo2oMbX1KDY0f2ha6r+t+xs6ApUZxwT4nvu\/P33Z1P1yi0Ih\/I6eUL4syCEWAzcvf06+30\/OkNjzVkhJasKYFGfZ9FZvBaldIhFpt44AXFO9\/QUwk1csgeXJZ4eGxrKfBLU+3AZCQdOAVCdYtHf8eAtrdcS+2C6Kt0dRXn6yH7NvuecX3YdkBT7tjrOFokm2iZplH8bpW+CUd9lI3xjIOAr0VhAX9kZDkD+ekgfcR5EFEbXRqwdlSn3etDRtA0MHKP0Y3iW1YHAQfBce\/7N8NAC4W+B0ECBZMWyOUl+SQ42H8BRAFwCaTQhuQSmCJGqJJw4RrLjtN3sgdhPws13t1ZYdJFhodjQnpLZZ7ZN5H\/dql76s9j09tJmAS2UtkO5BwQBQYU6XaWtvDUprs4InQZX9D7kdIUWuGtePTPdhVNPJz1ek2nC8EBmZD\/y+ftIkDoD5MNXCtRMb+fgi11Q+QQbT56amPOF3RSX7IMuL+DKPfo8uy05HSqCEmSzBWBIevt0MAu7anNyNUmGvcrVvmde2P0L8iR3HSPn86O6f3zb+dxJ+f3fwEHqEmi\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqNVFFr2zAQfh\/sPwhG0Qru6sRxGlz60OZ1bIMMtlL6IMeyrUaWjHRa6oX890muodhY9oQxkr7vTt\/dSSdrYFKgO3T6+AHZoaliVCfo6W3pxul96gY0NU0QLogpKA76mAai4F4U3DIWm3CAUpF12BCpmBjZJK\/WSzjc1jVn8M1UKVUJigcgA1rtoHFnDGS7sZdcWiP8KV7dhPv1UH3rvSSZPG47oipS8jkMFtEmWMZxEH5ZxZd+qwdulFPsJXzPc03hd4KWM5RHS+kzzgOLWslCUa1H49SlPCYIlKEj5yhpRLYltZdwZBmUrn4zCiQT4GrgFZATrim6vkY7WqVGNOxABHohylSopsKIF3NARoD9A6lqxi26Z8J+qCGiQLbAmpXTIsgr01+ZGC\/3bKTcWvpvy0QuWinzyn6y\/cG67qXjPHaduxAmiW2oJKV8jggMPBHJ9nJt6VvdnsIA4WV4gZ9HUpNLATv2173jVTDxktbrNZ5OREaBMP6\/eq4WHkF\/CDf0XrCKuIblLWkulWW0\/vCptTlf4Mn4oqUH\/kVZUYL1k0qe4akkRFE0lwQCpNdUPc21F22CbjbBOC5I5Zrwj64LIDtp6AHP3tLn92WH2J3z7T\/j71Bc\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">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 \/\/ Sembunyikan jarum penunjuk untuk tampilan cincin yang bersih\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: 'Progress Proyek'\r\n                }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqNVFFr2zAQfh\/sPwhG0Qru6sRxGlz60OZ1bIMMtlL6IMeyrUaWjHRa6oX890muodhY9oQxkr7vTt\/dSSdrYFKgO3T6+AHZoaliVCfo6W3pxul96gY0NU0QLogpKA76mAai4F4U3DIWm3CAUpF12BCpmBjZJK\/WSzjc1jVn8M1UKVUJigcgA1rtoHFnDGS7sZdcWiP8KV7dhPv1UH3rvSSZPG47oipS8jkMFtEmWMZxEH5ZxZd+qwdulFPsJXzPc03hd4KWM5RHS+kzzgOLWslCUa1H49SlPCYIlKEj5yhpRLYltZdwZBmUrn4zCiQT4GrgFZATrim6vkY7WqVGNOxABHohylSopsKIF3NARoD9A6lqxi26Z8J+qCGiQLbAmpXTIsgr01+ZGC\/3bKTcWvpvy0QuWinzyn6y\/cG67qXjPHaduxAmiW2oJKV8jggMPBHJ9nJt6VvdnsIA4WV4gZ9HUpNLATv2173jVTDxktbrNZ5OREaBMP6\/eq4WHkF\/CDf0XrCKuIblLWkulWW0\/vCptTlf4Mn4oqUH\/kVZUYL1k0qe4akkRFE0lwQCpNdUPc21F22CbjbBOC5I5Zrwj64LIDtp6AHP3tLn92WH2J3z7T\/j71Bc\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqNVFFv0zAQfkfiP1hCk0EKLG2argriYfSFBwSThgRo2oMbX1KDY0f2ha6r+t+xs6ApUZxwT4nvu\/P33Z1P1yi0Ih\/I6eUL4syCEWAzcvf06+30\/OkNjzVkhJasKYFGfZ9FZvBaldIhFpt44AXFO9\/QUwk1csgeXJZ4eGxrKfBLU+3AZCQdOAVCdYtHf8eAtrdcS+2C6Kt0dRXn6yH7NvuecX3YdkBT7tjrOFokm2iZplH8bpW+CUd9lI3xjIOAr0VhAX9kZDkD+ekgfcR5EFEbXRqwdlSn3etDRtA0MHKP0Y3iW1YHAQfBce\/7N8NAC4W+B0ECBZMWyOUl+SQ42H8BRAFwCaTQhuQSmCJGqJJw4RrLjtN3sgdhPws13t1ZYdJFhodjQnpLZZ7ZN5H\/dql76s9j09tJmAS2UtkO5BwQBQYU6XaWtvDUprs4InQZX9D7kdIUWuGtePTPdhVNPJz1ek2nC8EBmZD\/y+ftIkDoD5MNXCtRMb+fgi11Q+QQbT56amPOF3RSX7IMuL+DKPfo8uy05HSqCEmSzBWBIevt0MAu7anNyNUmGvcrVvmde2P0L8iR3HSPn86O6f3zb+dxJ+f3fwEHqEmi\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"FclLwhh\"><img alt=\"\" class=\"alignnone size-full wp-image-1381\" decoding=\"async\" height=\"743\" sizes=\"(max-width: 1173px) 100vw, 1173px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c65a00256.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c65a00256.png 1173w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c65a00256-300x190.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c65a00256-1024x649.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c65a00256-768x486.png 768w\" width=\"1173\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Praktik Terbaik Strategis<\/h2>\n<ul>\n<li><strong>Pertahankan Fokus Lingkup:<\/strong>Pengukur memakan ruang visual yang signifikan untuk menampilkan satu metrik. Cadangkan untuk metrik penting berprioritas tinggi yang memerlukan penilaian status segera.<\/li>\n<li><strong>Gunakan Warna Secara Bermakna:<\/strong>Selaraskan pita warna ambang dengan standar universal (misalnya, hijau untuk aman, oranye\/kuning untuk waspada, merah untuk bahaya) agar pengguna dapat menilai status tanpa membaca angka pasti.<\/li>\n<li><strong>Pertimbangkan Tata Letak Cincin Tanpa Penunjuk:<\/strong>Untuk dashboard digital dan layar ponsel, pengukur cincin progres tanpa penunjuk sering terlihat lebih bersih dan memakan tinggi vertikal yang lebih sedikit dibandingkan meter jarum tradisional.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Ketika memantau satu KPI terhadap target kritis atau ambang batas keselamatan operasional, maka Grafik Pengukur (atau Grafik Speedometer) memberikan petunjuk visual yang langsung dan sangat mudah dikenali. Dengan memetakan satu nilai di sepanjang busur melingkar menggunakan penunjuk jarum dan zona&#8230;<\/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-2052","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ECharts 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\/id\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\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\/id\/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=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/gauge-chart-single-metric-status-and-threshold-tracking-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/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\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/gauge-chart-single-metric-status-and-threshold-tracking-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/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\\\/id\\\/docs\\\/vpascode-docs\\\/gauge-chart-single-metric-status-and-threshold-tracking-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/gauge-chart-single-metric-status-and-threshold-tracking-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/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\\\/id\\\/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\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Grafik Pengukur: Status dan Pelacakan Ambang Satu Metrik\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/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\/id\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/","og_locale":"id_ID","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\/id\/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":{"Estimasi waktu membaca":"3 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/","url":"https:\/\/www.vpascode.com\/id\/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\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/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\/id\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/gauge-chart-single-metric-status-and-threshold-tracking-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/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\/id\/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\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Grafik Pengukur: Status dan Pelacakan Ambang Satu Metrik"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/2052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2052"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}