{"id":2061,"date":"2026-07-27T01:55:55","date_gmt":"2026-07-27T01:55:55","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/"},"modified":"2026-07-27T01:55:55","modified_gmt":"2026-07-27T01:55:55","slug":"doughnut-chart-ring-based-proportions-and-center-metrics-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 Donut: T\u1ef7 l\u1ec7 d\u1ef1a tr\u00ean v\u00e0nh v\u00e0 c\u00e1c ch\u1ec9 s\u1ed1 trung t\u00e2m"},"content":{"rendered":"

Khi tr\u00ecnh b\u00e0y ph\u00e2n b\u1ed5 danh m\u1ee5c t\u01b0\u01a1ng \u0111\u1ed1i, th\u00ecBi\u1ec3u \u0111\u1ed3 Donut<\/strong>cung c\u1ea5p m\u1ed9t l\u1ef1a ch\u1ecdn hi\u1ec7n \u0111\u1ea1i, t\u01b0\u01a1ng ph\u1ea3n cao thay th\u1ebf cho bi\u1ec3u \u0111\u1ed3 b\u00e1nh truy\u1ec1n th\u1ed1ng. B\u1eb1ng c\u00e1ch lo\u1ea1i b\u1ecf ph\u1ea7n l\u00f5i \u1edf gi\u1eefa, bi\u1ec3u \u0111\u1ed3 donut chuy\u1ec3n tr\u1ecdng t\u00e2m th\u1ecb gi\u00e1c t\u1eeb k\u00edch th\u01b0\u1edbc v\u00f9ng \u0111\u01b0\u1ee3c t\u00f4 \u0111\u1ea7y sang \u0111\u1ed9 d\u00e0i cung d\u1ecdc theo v\u00e0nh ngo\u00e0i. Ph\u1ea7n trung t\u00e2m r\u1ed7ng n\u00e0y t\u1ea1o ra kh\u00f4ng gian th\u1ecb gi\u00e1c l\u00fd t\u01b0\u1edfng \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c ch\u1ec9 s\u1ed1 hi\u1ec7u su\u1ea5t ch\u00ednh, t\u1ed5ng k\u1ebft, ho\u1eb7c ch\u1ec9 b\u00e1o tr\u1ea1ng th\u00e1i \u2014 khi\u1ebfn n\u00f3 tr\u1edf th\u00e0nh th\u00e0nh ph\u1ea7n thi\u1ebft y\u1ebfu cho b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n tr\u1ea1ng th\u00e1i c\u1ea5p cao v\u00e0 b\u1ea3n t\u00f3m t\u1eaft t\u00e0i ch\u00ednh.<\/p>\n

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

Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 donut \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng'pie'<\/code>ki\u1ec3u chu\u1ed7i k\u1ebft h\u1ee3p v\u1edbi m\u1ed9t m\u1ea3ng hai ph\u1ea7n t\u1eedradius<\/code>m\u1ea3ng: ['innerRadius', 'outerRadius']<\/code>. Gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean x\u00e1c \u0111\u1ecbnh \u0111\u1ed9 m\u1edf c\u1ee7a ph\u1ea7n trung t\u00e2m r\u1ed7ng, trong khi gi\u00e1 tr\u1ecb th\u1ee9 hai \u0111i\u1ec1u khi\u1ec3n ranh gi\u1edbi b\u00ean ngo\u00e0i.<\/p>\n

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

\u0110\u1ec3 x\u00e2y d\u1ef1ng bi\u1ec3u \u0111\u1ed3 donut ti\u00eau chu\u1ea9n, khai b\u00e1o m\u1ed9t chu\u1ed7i v\u1edbitype: 'pie'<\/code>, \u0111\u1eb7tradius: ['50%', '70%']<\/code>, v\u00e0 truy\u1ec1n c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng d\u1eef li\u1ec7u v\u1edbiname<\/code> v\u00e0value<\/code>thu\u1ed9c t\u00ednh:<\/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        trigger: 'item',\r\n        formatter: '{a} \r\n{b}: {c} ({d}%)'\r\n    },\r\n    legend: {\r\n        top: '5%',\r\n        left: 'center'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Ph\u00e2n b\u1ed5 ng\u00e2n s\u00e1ch',\r\n            type: 'pie',\r\n            radius: ['50%', '70%'],\r\n            center: ['50%', '55%'],\r\n            avoidLabelOverlap: true,\r\n            label: {\r\n                show: false\r\n            },\r\n            data: [\r\n                { value: 1048, name: 'K\u1ef9 thu\u1eadt' },\r\n                { value: 735, name: 'Ti\u1ebfp th\u1ecb' },\r\n                { value: 580, name: 'V\u1eadn h\u00e0nh' },\r\n                { value: 484, name: 'B\u00e1n h\u00e0ng' },\r\n                { value: 300, name: 'H\u1ed7 tr\u1ee3' }\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 donut t\u1ecfa s\u00e1ng khi k\u1ebft h\u1ee3p v\u1edbi c\u00e1c th\u1ed1ng k\u00ea trung t\u00e2m ho\u1eb7c phong c\u00e1ch th\u1ecb gi\u00e1c bo tr\u00f2n \u0111\u1ec3 t\u1ea1o ra c\u00e1c th\u00e0nh ph\u1ea7n giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng ho\u00e0n ch\u1ec9nh.<\/p>\n
1. Giao di\u1ec7n ch\u1ed3ng th\u1ed1ng k\u00ea nh\u00e3n trung t\u00e2m<\/h3>\n
S\u1eed d\u1ee5ng c\u00e1c y\u1ebfu t\u1ed1 \u0111\u1ed3 h\u1ecda ho\u1eb7c c\u00e1c th\u00e0nh ph\u1ea7n ti\u00eau \u0111\u1ec1 \u1edf trung t\u00e2m \u0111\u1ec3 hi\u1ec3n th\u1ecb t\u1ed5ng c\u1ed9ng ho\u1eb7c KPI ch\u00ednh ngay b\u00ean trong v\u00e0nh bi\u1ec3u \u0111\u1ed3 donut:<\/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: '$3.147',\r\n        subtext: 'T\u1ed5ng chi ti\u00eau',\r\n        left: 'center',\r\n        top: '42%',\r\n        textStyle: {\r\n            fontSize: 28,\r\n            fontWeight: 'bold',\r\n            color: '#333'\r\n        },\r\n        subtextStyle: {\r\n            fontSize: 14,\r\n            color: '#666'\r\n        }\r\n    },\r\n    tooltip: {\r\n        trigger: 'item'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Chi ph\u00ed',\r\n            type: 'pie',\r\n            radius: ['60%', '80%'],\r\n            center: ['50%', '50%'],\r\n            avoidLabelOverlap: false,\r\n            label: {\r\n                show: false\r\n            },\r\n            data: [\r\n                { value: 1048, name: 'Thi\u1ebft b\u1ecb ph\u1ea7n c\u1ee9ng' },\r\n                { value: 735, name: '\u0110\u0103ng k\u00fd SaaS' },\r\n                { value: 580, name: 'V\u0103n ph\u00f2ng ph\u1ea9m' },\r\n                { value: 484, name: 'Du l\u1ecbch' }\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 \u0111\u1ecbnh d\u1ea1ng \u0111o\u1ea1n<\/h2>\n
Vi\u1ec7c th\u00eam c\u00e1c g\u00f3c bo nh\u1eb9 nh\u00e0ng v\u00e0 kho\u1ea3ng c\u00e1ch r\u00f5 r\u1ec7t gi\u1eefa c\u00e1c \u0111o\u1ea1n gi\u00fap bi\u1ec3u \u0111\u1ed3 h\u00ecnh donut c\u00f3 v\u1ebb ngo\u00e0i hi\u1ec7n \u0111\u1ea1i, tinh t\u1ebf.<\/p>\n
1. \u0110\u1ea7u tr\u00f2n v\u00e0 kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c \u0111o\u1ea1n<\/h3>\n
S\u1eed d\u1ee5ng itemStyle.borderRadius<\/code>k\u1ebft h\u1ee3p c\u00f9ng vi\u1ec1n tr\u1eafng r\u00f5 r\u00e0ng \u0111\u1ec3 t\u1ea1o cho m\u1ed7i \u0111o\u1ea1n cung m\u1ed9t v\u1ebb ngo\u00e0i m\u1ec1m m\u1ea1i, gi\u1ed1ng vi\u00ean thu\u1ed1c:<\/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            name: 'S\u1eed d\u1ee5ng l\u01b0u tr\u1eef',\r\n            type: 'pie',\r\n            radius: ['45%', '70%'],\r\n            itemStyle: {\r\n                borderRadius: 10,\r\n                borderColor: '#ffffff',\r\n                borderWidth: 4\r\n            },\r\n            label: {\r\n                show: true,\r\n                formatter: '{b}: {d}%'\r\n            },\r\n            data: [\r\n                { value: 40, name: 'T\u00e0i li\u1ec7u' },\r\n                { value: 25, name: 'T\u1ec7p \u0111a ph\u01b0\u01a1ng ti\u1ec7n' },\r\n                { value: 20, name: 'D\u1eef li\u1ec7u h\u1ec7 th\u1ed1ng' },\r\n                { value: 15, name: 'Kh\u00f4ng gian tr\u1ed1ng' }\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
  • T\u1ed1i \u01b0u t\u1ef7 l\u1ec7 b\u00e1n k\u00ednh trong so v\u1edbi b\u00e1n k\u00ednh ngo\u00e0i:<\/strong>Duy tr\u00ec b\u00e1n k\u00ednh trong t\u1eeb 50% \u0111\u1ebfn 70% b\u00e1n k\u00ednh ngo\u00e0i \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o c\u00e1c \u0111o\u1ea1n \u0111\u1ee7 d\u00e0y \u0111\u1ec3 d\u1ec5 d\u00e0ng di chu\u1ed9t qua, \u0111\u1ed3ng th\u1eddi gi\u1eef l\u1ea1i kh\u00f4ng gian \u0111\u1ee7 l\u1edbn \u1edf trung t\u00e2m.<\/li>\n
  • S\u1eed d\u1ee5ng kh\u00f4ng gian trung t\u00e2m m\u1ed9t c\u00e1ch c\u00f3 ch\u1ee7 \u00fd:<\/strong>S\u1eed d\u1ee5ng v\u00f9ng tr\u1ed1ng \u1edf trung t\u00e2m \u0111\u1ec3 hi\u1ec3n th\u1ecb t\u1ed5ng c\u1ed9ng ho\u1eb7c ch\u1ec9 s\u1ed1 \u0111o\u1ea1n \u0111\u01b0\u1ee3c ch\u1ecdn thay v\u00ec l\u00e0m r\u1ed1i r\u1eafm vi\u1ec1n bi\u1ec3u \u0111\u1ed3 b\u1eb1ng c\u00e1c h\u1ed9p v\u0103n b\u1ea3n b\u1ed5 sung.<\/li>\n
  • Gi\u1edbi h\u1ea1n s\u1ed1 l\u01b0\u1ee3ng mi\u1ebfng:<\/strong>Gi\u1edbi h\u1ea1n v\u00f2ng tr\u00f2n ch\u1ec9 c\u00f3 5 ho\u1eb7c 6 \u0111o\u1ea1n ch\u00ednh. N\u1ebfu b\u1ea1n c\u00f3 nhi\u1ec1u danh m\u1ee5c nh\u1ecf, h\u00e3y gom ch\u00fang l\u1ea1i th\u00e0nh danh m\u1ee5c ‘Kh\u00e1c’ \u0111\u1ec3 tr\u00e1nh c\u00e1c cung m\u1ecfng, kh\u00f3 \u0111\u1ecdc.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi tr\u00ecnh b\u00e0y ph\u00e2n b\u1ed5 danh m\u1ee5c t\u01b0\u01a1ng \u0111\u1ed1i, th\u00ecBi\u1ec3u \u0111\u1ed3 Donutcung c\u1ea5p m\u1ed9t l\u1ef1a ch\u1ecdn hi\u1ec7n \u0111\u1ea1i, t\u01b0\u01a1ng ph\u1ea3n cao thay th\u1ebf cho bi\u1ec3u \u0111\u1ed3 b\u00e1nh truy\u1ec1n th\u1ed1ng. B\u1eb1ng c\u00e1ch lo\u1ea1i b\u1ecf ph\u1ea7n l\u00f5i \u1edf gi\u1eefa, bi\u1ec3u \u0111\u1ed3 donut…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":9,"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-2061","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Script hollow doughnut charts with custom labels using ECharts syntax 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\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Script hollow doughnut charts with custom labels using ECharts syntax in VPasCode, a free text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-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_6a66bb32c140a.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\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\",\"name\":\"ECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bb32c140a.png\",\"datePublished\":\"2026-07-27T01:55:55+00:00\",\"description\":\"Script hollow doughnut charts with custom labels using ECharts syntax in VPasCode, a free text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bb32c140a.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bb32c140a.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-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 Donut: T\u1ef7 l\u1ec7 d\u1ef1a tr\u00ean v\u00e0nh v\u00e0 c\u00e1c ch\u1ec9 s\u1ed1 trung t\u00e2m\"}]},{\"@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 Doughnut Chart Guide | VPasCode Text to Diagram Guide","description":"Script hollow doughnut charts with custom labels using ECharts syntax 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\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide","og_description":"Script hollow doughnut charts with custom labels using ECharts syntax in VPasCode, a free text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.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\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","name":"ECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png","datePublished":"2026-07-27T01:55:55+00:00","description":"Script hollow doughnut charts with custom labels using ECharts syntax in VPasCode, a free text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-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 Donut: T\u1ef7 l\u1ec7 d\u1ef1a tr\u00ean v\u00e0nh v\u00e0 c\u00e1c ch\u1ec9 s\u1ed1 trung t\u00e2m"}]},{"@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\/2061","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=2061"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}