{"id":2062,"date":"2026-07-27T01:54:10","date_gmt":"2026-07-27T01:54:10","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/"},"modified":"2026-07-27T01:54:10","modified_gmt":"2026-07-27T01:54:10","slug":"pie-chart-proportional-breakdown-and-segment-slicing-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 tr\u00f2n: Ph\u00e2n t\u00edch t\u1ef7 l\u1ec7 v\u00e0 c\u1eaft \u0111o\u1ea1n"},"content":{"rendered":"

Khi tr\u00ecnh b\u00e0y c\u00e1c t\u1ef7 l\u1ec7 t\u01b0\u01a1ng \u0111\u1ed1i ho\u1eb7c ph\u1ea7n tr\u0103m \u0111\u00f3ng g\u00f3p c\u1ee7a m\u1ed9t t\u1ed5ng c\u1ed1 \u0111\u1ecbnh duy nh\u1ea5t, th\u00ecBi\u1ec3u \u0111\u1ed3 tr\u00f2n<\/strong> l\u00e0 l\u1ef1a ch\u1ecdn quen thu\u1ed9c v\u00e0 tr\u1ef1c quan. B\u1eb1ng c\u00e1ch chia m\u1ed9t h\u00ecnh tr\u00f2n th\u00e0nh c\u00e1c mi\u1ebfng t\u1ef7 l\u1ec7, bi\u1ec3u \u0111\u1ed3 tr\u00f2n gi\u00fap ng\u01b0\u1eddi xem nhanh ch\u00f3ng hi\u1ec3u \u0111\u01b0\u1ee3cc\u00e1ch c\u00e1c th\u00e0nh ph\u1ea7n ri\u00eang l\u1ebb \u0111\u00f3ng g\u00f3p v\u00e0o m\u1ed9t t\u1ed5ng th\u1ec3 th\u1ed1ng nh\u1ea5t<\/em>, ch\u1eb3ng h\u1ea1n nh\u01b0 ph\u00e2n b\u1ed1 th\u1ecb ph\u1ea7n, t\u1ef7 l\u1ec7 \u01b0a th\u00edch thi\u1ebft b\u1ecb ho\u1eb7c ph\u00e2n b\u1ed5 chi ph\u00ed theo h\u1ea1ng m\u1ee5c.<\/p>\n

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

Kh\u00e1c v\u1edbi bi\u1ec3u \u0111\u1ed3 Cartesian s\u1eed d\u1ee5ng tr\u1ee5c ngang v\u00e0 tr\u1ee5c d\u1ecdc, bi\u1ec3u \u0111\u1ed3 tr\u00f2n \u00e1nh x\u1ea1 d\u1eef li\u1ec7u ph\u00e2n lo\u1ea1i tr\u1ef1c ti\u1ebfp sang c\u00e1c g\u00f3c b\u00e1n k\u00ednh tr\u00ean h\u1ec7 t\u1ecda \u0111\u1ed9 c\u1ef1c. Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 tr\u00f2n \u0111\u01b0\u1ee3c t\u1ea1o b\u1eb1ng c\u00e1ch thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh seriestype<\/code> th\u00e0nh 'pie'<\/code> v\u00e0 cung c\u1ea5p m\u1ed9t m\u1ea3ng c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng, trong \u0111\u00f3 m\u1ed7i m\u1ee5c ch\u1ee9a m\u1ed9t gi\u00e1 tr\u1ecb s\u1ed1 h\u1ecdcvalue<\/code> v\u00e0 m\u00f4 t\u1ea3name<\/code>.<\/p>\n

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

\u0110\u1ec3 x\u00e2y d\u1ef1ng bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u01a1 b\u1ea3n, h\u00e3y x\u00e1c \u0111\u1ecbnh m\u1ed9t chu\u1ed7i duy nh\u1ea5t v\u1edbitype: 'pie'<\/code> v\u00e0 truy\u1ec1n b\u1ed9 d\u1eef li\u1ec7u c\u00f3 c\u1ea5u tr\u00fac c\u1ee7a b\u1ea1n v\u00e0o trong m\u1ea3ngdata<\/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        trigger: 'item',\r\n        formatter: '{a} \r\n{b}: {c} ({d}%)'\r\n    },\r\n    legend: {\r\n        orient: 'vertical',\r\n        left: 'left'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Ngu\u1ed3n truy c\u1eadp',\r\n            type: 'pie',\r\n            radius: '60%',\r\n            data: [\r\n                { value: 1048, name: 'C\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm' },\r\n                { value: 735, name: 'Tr\u1ef1c ti\u1ebfp' },\r\n                { value: 580, name: 'Email' },\r\n                { value: 484, name: 'Qu\u1ea3ng c\u00e1o li\u00ean minh' },\r\n                { value: 300, name: 'Qu\u1ea3ng c\u00e1o video' }\r\n            ],\r\n            emphasis: {\r\n                itemStyle: {\r\n                    shadowBlur: 10,\r\n                    shadowOffsetX: 0,\r\n                    shadowColor: 'rgba(0, 0, 0, 0.5)'\r\n                }\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
C\u00e1c k\u1ef9 thu\u1eadt c\u1ea5u tr\u00fac n\u00e2ng cao<\/h2>\n
Bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh th\u00e0nh b\u1ed1 c\u1ee5c h\u00ecnh donut d\u1ea1ng v\u00e0nh khuy\u00ean ho\u1eb7c \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng v\u1edbi b\u00e1n k\u00ednh t\u00f9y ch\u1ec9nh \u0111\u1ec3 nh\u1ea5n m\u1ea1nh c\u00e1c \u0111o\u1ea1n d\u1eef li\u1ec7u ch\u00ednh.<\/p>\n
1. Bi\u1ebfn th\u1ec3 bi\u1ec3u \u0111\u1ed3 donut<\/h3>\n
Thi\u1ebft l\u1eadpb\u00e1n k\u00ednh<\/code> thu\u1ed9c t\u00ednh d\u01b0\u1edbi d\u1ea1ng m\u1ea3ng hai gi\u00e1 tr\u1ecb (v\u00ed d\u1ee5: ['40%', '70%']<\/code>) t\u1ea1o th\u00e0nh ph\u1ea7n tr\u1ed1ng \u1edf gi\u1eefa \u0111\u1ec3 t\u1ea1o bi\u1ec3u \u0111\u1ed3 donut s\u1ea1ch s\u1ebd. \u0110i\u1ec1u n\u00e0y \u0111\u1ec3 l\u1ea1i kho\u1ea3ng tr\u1ed1ng \u1edf gi\u1eefa cho c\u00e1c nh\u00e3n t\u00f3m t\u1eaft t\u00f9y ch\u1ec9nh:<\/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    },\r\n    legend: {\r\n        top: '5%',\r\n        left: 'center'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Lo\u1ea1i thi\u1ebft b\u1ecb',\r\n            type: 'pie',\r\n            radius: ['40%', '70%'],\r\n            avoidLabelOverlap: true,\r\n            itemStyle: {\r\n                borderRadius: 8,\r\n                borderColor: '#fff',\r\n                borderWidth: 2\r\n            },\r\n            label: {\r\n                show: false,\r\n                position: 'center'\r\n            },\r\n            emphasis: {\r\n                label: {\r\n                    show: true,\r\n                    fontSize: 20,\r\n                    fontWeight: 'bold'\r\n                }\r\n            },\r\n            data: [\r\n                { value: 1048, name: 'M\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n' },\r\n                { value: 735, name: 'Di \u0111\u1ed9ng' },\r\n                { value: 580, name: 'M\u00e1y t\u00ednh b\u1ea3ng' },\r\n                { value: 484, name: 'Kh\u00e1c' }\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 phong c\u00e1ch<\/h2>\n
Ki\u1ec3m so\u00e1t c\u00e1c \u0111\u01b0\u1eddng d\u1eabn nh\u00e3n v\u00e0 vi\u1ec1n c\u00e1c m\u1ea3nh gi\u00fap bi\u1ec3u \u0111\u1ed3 tr\u00f2n d\u1ec5 \u0111\u1ecdc ngay c\u1ea3 khi x\u1eed l\u00fd c\u00e1c gi\u00e1 tr\u1ecb d\u1eef li\u1ec7u nh\u1ecf.<\/p>\n
1. T\u00e1ch ri\u00eang c\u00e1c m\u1ea3nh t\u00f9y ch\u1ec9nh v\u00e0 c\u00e1c \u0111\u01b0\u1eddng d\u1eabn nh\u00e3n<\/h3>\n
\u00c1p d\u1ee5ng \u0111\u1ed9 r\u1ed9ng vi\u1ec1n m\u1ee5c v\u00e0 c\u1ea5u h\u00ecnh c\u00e1c \u0111\u01b0\u1eddng h\u01b0\u1edbng d\u1eabn b\u00ean ngo\u00e0i ng\u0103n ch\u1eb7n hi\u1ec7n t\u01b0\u1ee3ng ch\u1ed3ng ch\u00e9o v\u0103n b\u1ea3n tr\u00ean c\u00e1c m\u1ea3nh k\u1ec1 nhau:<\/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: 'Ph\u1ea7n th\u1ecb ph\u1ea7n',\r\n            type: 'pie',\r\n            radius: '65%',\r\n            center: ['50%', '50%'],\r\n            selectedMode: 'single',\r\n            data: [\r\n                { value: 40, name: 'Th\u01b0\u01a1ng hi\u1ec7u A' },\r\n                { value: 30, name: 'Th\u01b0\u01a1ng hi\u1ec7u B' },\r\n                { value: 15, name: 'Th\u01b0\u01a1ng hi\u1ec7u C' },\r\n                { value: 10, name: 'Th\u01b0\u01a1ng hi\u1ec7u D' },\r\n                { value: 5, name: 'Kh\u00e1c' }\r\n            ],\r\n            label: {\r\n                formatter: '{b}: {d}%'\r\n            },\r\n            labelLine: {\r\n                smooth: 0.2,\r\n                length: 10,\r\n                length2: 20\r\n            },\r\n            itemStyle: {\r\n                borderColor: '#ffffff',\r\n                borderWidth: 2\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
C\u00e1c th\u1ef1c h\u00e0nh t\u1ed1t chi\u1ebfn l\u01b0\u1ee3c<\/h2>\n
    \n
  • H\u1ea1n ch\u1ebf s\u1ed1 l\u01b0\u1ee3ng m\u1ea3nh \u1edf m\u1ee9c 5 ho\u1eb7c 6:<\/strong>Qu\u00e1 nhi\u1ec1u m\u1ea3nh nh\u1ecf khi\u1ebfn bi\u1ec3u \u0111\u1ed3 tr\u00f2n kh\u00f3 \u0111\u1ecdc. Gom c\u00e1c gi\u00e1 tr\u1ecb nh\u1ecf v\u00e0o danh m\u1ee5c ‘Kh\u00e1c’ \u0111\u1ec3 gi\u1eef s\u1ef1 t\u1eadp trung r\u00f5 r\u00e0ng.<\/li>\n
  • S\u1eafp x\u1ebfp c\u00e1c m\u1ea3nh theo k\u00edch th\u01b0\u1edbc:<\/strong>\u0110\u1eb7t m\u1ea3nh l\u1edbn nh\u1ea5t b\u1eaft \u0111\u1ea7u t\u1eeb v\u1ecb tr\u00ed 12 gi\u1edd v\u00e0 s\u1eafp x\u1ebfp c\u00e1c m\u1ea3nh c\u00f2n l\u1ea1i theo th\u1ee9 t\u1ef1 chi\u1ec1u kim \u0111\u1ed3ng h\u1ed3 \u0111\u1ec3 d\u1ec5 d\u00e0ng qu\u00e9t nhanh.<\/li>\n
  • Hi\u1ec3n th\u1ecb ph\u1ea7n tr\u0103m tr\u1ef1c ti\u1ebfp trong c\u00f4ng c\u1ee5 g\u1ee3i \u00fd ho\u1eb7c nh\u00e3n:<\/strong> Lu\u00f4n bao g\u1ed3m {d}%<\/code> trong b\u1ed9 \u0111\u1ecbnh d\u1ea1ng nh\u00e3n ho\u1eb7c c\u00f4ng c\u1ee5 g\u1ee3i \u00fd \u0111\u1ec3 ng\u01b0\u1eddi xem ngay l\u1eadp t\u1ee9c th\u1ea5y t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i t\u00ednh to\u00e1n trong \u0111\u1ea7u.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi tr\u00ecnh b\u00e0y c\u00e1c t\u1ef7 l\u1ec7 t\u01b0\u01a1ng \u0111\u1ed1i ho\u1eb7c ph\u1ea7n tr\u0103m \u0111\u00f3ng g\u00f3p c\u1ee7a m\u1ed9t t\u1ed5ng c\u1ed1 \u0111\u1ecbnh duy nh\u1ea5t, th\u00ecBi\u1ec3u \u0111\u1ed3 tr\u00f2n l\u00e0 l\u1ef1a ch\u1ecdn quen thu\u1ed9c v\u00e0 tr\u1ef1c quan. B\u1eb1ng c\u00e1ch chia m\u1ed9t h\u00ecnh tr\u00f2n th\u00e0nh c\u00e1c mi\u1ebfng…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":8,"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-2062","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Pie Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Turn data arrays into interactive proportional pie charts 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\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Pie Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Turn data arrays into interactive proportional pie charts using ECharts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-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_6a66ba6f03e87.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\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/\",\"name\":\"ECharts Pie 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\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66ba6f03e87.png\",\"datePublished\":\"2026-07-27T01:54:10+00:00\",\"description\":\"Turn data arrays into interactive proportional pie charts using ECharts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66ba6f03e87.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66ba6f03e87.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-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 tr\u00f2n: Ph\u00e2n t\u00edch t\u1ef7 l\u1ec7 v\u00e0 c\u1eaft \u0111o\u1ea1n\"}]},{\"@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 Pie Chart Guide | VPasCode Text to Diagram Tool","description":"Turn data arrays into interactive proportional pie charts 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\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Pie Chart Guide | VPasCode Text to Diagram Tool","og_description":"Turn data arrays into interactive proportional pie charts using ECharts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba6f03e87.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\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/","name":"ECharts Pie 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\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba6f03e87.png","datePublished":"2026-07-27T01:54:10+00:00","description":"Turn data arrays into interactive proportional pie charts using ECharts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba6f03e87.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba6f03e87.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-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 tr\u00f2n: Ph\u00e2n t\u00edch t\u1ef7 l\u1ec7 v\u00e0 c\u1eaft \u0111o\u1ea1n"}]},{"@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\/2062","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=2062"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}