{"id":1315,"date":"2026-07-27T01:55:55","date_gmt":"2026-07-27T01:55:55","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics\/"},"modified":"2026-07-30T01:27:15","modified_gmt":"2026-07-30T01:27:15","slug":"doughnut-chart-ring-based-proportions-and-center-metrics-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","title":{"rendered":"Doughnut Chart: Ring-Based Proportions and Center Metrics"},"content":{"rendered":"<p>When presenting relative category allocations, the <strong>Doughnut Chart<\/strong> offers a modern, high-contrast alternative to traditional solid pie charts. By removing the center core, a doughnut chart shifts visual emphasis from filled area size to arc lengths along the outer ring. This hollow center creates prime visual real estate for key performance metrics, summary totals, or status indicators\u2014making it a staple for executive status dashboards and financial summaries.<\/p>\n<h2>The Mechanics of Doughnut Charts<\/h2>\n<p>In Apache ECharts, doughnut charts are configured using the <code>'pie'<\/code> series type paired with a two-element <code>radius<\/code> array: <code>['innerRadius', 'outerRadius']<\/code>. The first value defines the hollow center opening, while the second value controls the outer boundary.<\/p>\n<h3>1. Essential Setup<\/h3>\n<p>To build a standard doughnut chart, declare a series with <code>type: 'pie'<\/code>, set <code>radius: ['50%', '70%']<\/code>, and pass your data objects with <code>name<\/code> and <code>value<\/code> properties:<\/p>\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\/#echarts:eNqFkD9rwzAQxfdAvoOWoBYyuCQmxqVDC91aMmQsGS72RRVVJCHLKcXou\/fsJP6XwVqE7t7vnd4Z66XR7IVV8xmj441RXtr09m5qTgqBLmVcejzxZdc5GncC75teBYHNZ9UhEJsF9lDlYfHIL9pwZRQK1PnQ3NAwHi\/6tgqPnooZarIeWRToJBYp++rkPbf6aDgh0W9lLtCzV6VMBnXI\/oRm8p+tdVbiuOMgl2U9g8cRfYzxDV37kejyu54oju9FcDYy\/4ADqu0ZnQLK6l2JI5WqBek4R5P22\/ym7AiqwGEzjCxy8DBYSrscdgZVUtCnaJ0sb8t510JqpFVqwe+8BthmFbfUJ7gf9NNMnEQts7XomvUXE9A6WbfQDhRO6VdRN2RXWmucJ2II7LvntUOV8PwPkryuSA==\" \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 data-language=\"echarts\" class=\"language-echarts\">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: 'Budget Allocation',\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: 'Engineering' },\r\n                { value: 735, name: 'Marketing' },\r\n                { value: 580, name: 'Operations' },\r\n                { value: 484, name: 'Sales' },\r\n                { value: 300, name: 'Support' }\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\/#echarts:eNqFkD9rwzAQxfdAvoOWoBYyuCQmxqVDC91aMmQsGS72RRVVJCHLKcXou\/fsJP6XwVqE7t7vnd4Z66XR7IVV8xmj441RXtr09m5qTgqBLmVcejzxZdc5GncC75teBYHNZ9UhEJsF9lDlYfHIL9pwZRQK1PnQ3NAwHi\/6tgqPnooZarIeWRToJBYp++rkPbf6aDgh0W9lLtCzV6VMBnXI\/oRm8p+tdVbiuOMgl2U9g8cRfYzxDV37kejyu54oju9FcDYy\/4ADqu0ZnQLK6l2JI5WqBek4R5P22\/ym7AiqwGEzjCxy8DBYSrscdgZVUtCnaJ0sb8t510JqpFVqwe+8BthmFbfUJ7gf9NNMnEQts7XomvUXE9A6WbfQDhRO6VdRN2RXWmucJ2II7LvntUOV8PwPkryuSA==\" \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 id=\"qZuZYKI\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1088\" height=\"1300\" class=\"alignnone size-full wp-image-1316 \" src=\"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb32c140a.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb32c140a.png 1088w, https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb32c140a-251x300.png 251w, https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb32c140a-857x1024.png 857w, https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb32c140a-768x918.png 768w\" sizes=\"(max-width: 1088px) 100vw, 1088px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Advanced Structural Techniques<\/h2>\n<p>Doughnut charts excel when paired with central statistics or rounded visual styling to create polished UI components.<\/p>\n<h3>1. Center Label Statistics Overlay<\/h3>\n<p>Utilize graphic elements or centered title components to display a grand total or primary KPI directly inside the doughnut ring:<\/p>\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\/#echarts:eNqFUz1vgzAQ3Sv1P1hqKy8MSfgIStWxUodKGYjUocpwwJFYcrBlG5K0yn+vTQoJ0Cq3APfeu\/O9M0IaJkryQr7v74gNwwzHRfvVZPBgFoQ++t40mFPvAugq\/cVWwgAnicTSXBM4Fg7NbBrVNWCEtPlg9tRL2lqJOQ66uyhEaRL2ZYFZ7I2hD2SbrWuUCp7TASETXCiLPfi+Ty\/QaTzHrd7T4L\/SURRdlz6\/th2MENww2bdUsc0GnZYZ3NG+QKNiqBfk88IfnKmEnT0PfT1YwzXq4cjmKB0sGQ4RBTmrXGkaTaz3hMb2sR6O1azLkcIzKfyDBLVg+TukyJc1Kg52vgK4xgGNO8bI02bKrdj\/avrgaVAiBwM9MzpTSA28couZBLHXmvIGKt+DQjoq1NPM\/bCTJAAJSapUZ4o1f4O+IQ7jSSdeFgXL0Mql5HZtN5RBHHTKlYIaOW3vSxvr0U2ymdPzD\/SU02U=\" \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 data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    title: {\r\n        text: '$3,147',\r\n        subtext: 'Total Spent',\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: 'Expenses',\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: 'Hardware' },\r\n                { value: 735, name: 'SaaS Subscriptions' },\r\n                { value: 580, name: 'Office Supplies' },\r\n                { value: 484, name: 'Travel' }\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\/#echarts:eNqFUz1vgzAQ3Sv1P1hqKy8MSfgIStWxUodKGYjUocpwwJFYcrBlG5K0yn+vTQoJ0Cq3APfeu\/O9M0IaJkryQr7v74gNwwzHRfvVZPBgFoQ++t40mFPvAugq\/cVWwgAnicTSXBM4Fg7NbBrVNWCEtPlg9tRL2lqJOQ66uyhEaRL2ZYFZ7I2hD2SbrWuUCp7TASETXCiLPfi+Ty\/QaTzHrd7T4L\/SURRdlz6\/th2MENww2bdUsc0GnZYZ3NG+QKNiqBfk88IfnKmEnT0PfT1YwzXq4cjmKB0sGQ4RBTmrXGkaTaz3hMb2sR6O1azLkcIzKfyDBLVg+TukyJc1Kg52vgK4xgGNO8bI02bKrdj\/avrgaVAiBwM9MzpTSA28couZBLHXmvIGKt+DQjoq1NPM\/bCTJAAJSapUZ4o1f4O+IQ7jSSdeFgXL0Mql5HZtN5RBHHTKlYIaOW3vSxvr0U2ymdPzD\/SU02U=\" \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 id=\"nIFRHCY\"><img decoding=\"async\" width=\"1236\" height=\"1236\" class=\"alignnone size-full wp-image-1317 \" src=\"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb3f33768.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb3f33768.png 1236w, https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb3f33768-300x300.png 300w, https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb3f33768-1024x1024.png 1024w, https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb3f33768-150x150.png 150w, https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb3f33768-768x768.png 768w\" sizes=\"(max-width: 1236px) 100vw, 1236px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Fine-Tuning Layout and Segment Styling<\/h2>\n<p>Adding subtle corner radii and distinct segment margins gives doughnut charts a sleek, modern look.<\/p>\n<h3>1. Rounded Ends and Segment Spacing<\/h3>\n<p>Use <code>itemStyle.borderRadius<\/code> along with clear white borders to give each arc segment a soft, pill-like appearance:<\/p>\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\/#echarts:eNqFUTtrwzAQ3gv9DwfFaPHgFIeCS6eGbFliSoeSQY4ujUC2jHRuMcb\/vac2jbHz+gah032PQ2dr0raCF+ju74Dh0Wn0GXz8lQHdcA2oZIkZiJysk58Ib55PEY851NaBU+uTjpNKN8FfpPNIxCCekkhsJiRNWObUGvaYhAcU1il064PRLIkvUV6tsY7HeNj9QlwkvmtF+wzScb+f8I0s0JydyO\/tdwbkGjwTsbOulEQYJumKng1UH4nrUUqSHO3guAv4kqbhf0mT+H8TC7ttSqzIixOfkeRxfpSsUGkJS23wpmjIyVvPe4EFz3ZDNBuSlg4R8lpukTVjyWYoDx1+6Z9\/ABegkrU=\" \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 data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    series: [\r\n        {\r\n            name: 'Storage Usage',\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: 'Documents' },\r\n                { value: 25, name: 'Media Files' },\r\n                { value: 20, name: 'System Data' },\r\n                { value: 15, name: 'Free Space' }\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\/#echarts:eNqFUTtrwzAQ3gv9DwfFaPHgFIeCS6eGbFliSoeSQY4ujUC2jHRuMcb\/vac2jbHz+gah032PQ2dr0raCF+ju74Dh0Wn0GXz8lQHdcA2oZIkZiJysk58Ib55PEY851NaBU+uTjpNKN8FfpPNIxCCekkhsJiRNWObUGvaYhAcU1il064PRLIkvUV6tsY7HeNj9QlwkvmtF+wzScb+f8I0s0JydyO\/tdwbkGjwTsbOulEQYJumKng1UH4nrUUqSHO3guAv4kqbhf0mT+H8TC7ttSqzIixOfkeRxfpSsUGkJS23wpmjIyVvPe4EFz3ZDNBuSlg4R8lpukTVjyWYoDx1+6Z9\/ABegkrU=\" \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 id=\"UvWZRED\"><img decoding=\"async\" width=\"1641\" height=\"1114\" class=\"alignnone size-full wp-image-1318 \" src=\"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb4b5091a.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb4b5091a.png 1641w, https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb4b5091a-300x204.png 300w, https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb4b5091a-1024x695.png 1024w, https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb4b5091a-768x521.png 768w, https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb4b5091a-1536x1043.png 1536w\" sizes=\"(max-width: 1641px) 100vw, 1641px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Strategic Best Practices<\/h2>\n<ul>\n<li><strong>Optimize Inner-to-Outer Radius Ratio:<\/strong> Maintain an inner radius between 50% and 70% of the outer radius to keep segments thick enough for easy hovering while preserving ample space in the center.<\/li>\n<li><strong>Utilize the Center Space Intentionally:<\/strong> Use the central hollow area to display the grand total or selected slice metric instead of cluttering the chart perimeter with extra text boxes.<\/li>\n<li><strong>Keep Slices Limited:<\/strong> Limit the ring to 5 or 6 primary segments. If you have numerous small categories, consolidate them into an \u00abOther\u00bb category to prevent thin, unreadable arcs.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When presenting relative category allocations, the Doughnut Chart offers a modern, high-contrast alternative to traditional solid pie charts. By removing the center core, a doughnut chart shifts visual emphasis from filled area size to arc lengths along the outer ring&#8230;.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1254,"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-1315","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 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\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-30T01:27:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb32c140a.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/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\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/07\\\/img_6a66bb32c140a.png\",\"datePublished\":\"2026-07-27T01:55:55+00:00\",\"dateModified\":\"2026-07-30T01:27:15+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\\\/es\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/07\\\/img_6a66bb32c140a.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/07\\\/img_6a66bb32c140a.png\",\"width\":1088,\"height\":1300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"ECharts Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Doughnut Chart: Ring-Based Proportions and Center Metrics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/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\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","og_locale":"es_ES","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\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-30T01:27:15+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb32c140a.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/echarts-playbook\/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\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb32c140a.png","datePublished":"2026-07-27T01:55:55+00:00","dateModified":"2026-07-30T01:27:15+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\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb32c140a.png","contentUrl":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/07\/img_6a66bb32c140a.png","width":1088,"height":1300},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/echarts-playbook\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/es\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/es\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"ECharts Playbook","item":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/echarts-playbook\/"},{"@type":"ListItem","position":4,"name":"Doughnut Chart: Ring-Based Proportions and Center Metrics"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/es\/#website","url":"https:\/\/www.vpascode.com\/es\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/es\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs\/1315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/users\/3"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs\/1254"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/media?parent=1315"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=1315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}