{"id":2066,"date":"2026-07-27T01:55:55","date_gmt":"2026-07-27T01:55:55","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","title":{"rendered":"Wykres ciasteczkowy: proporcje oparte na pier\u015bcieniu i metryki w centrum"},"content":{"rendered":"

Podczas prezentowania wzgl\u0119dnych alokacji kategorii, Wykres ciasteczkowy<\/strong> oferuje nowoczesn\u0105, wysokokontrastow\u0105 alternatyw\u0119 dla tradycyjnych pe\u0142nych wykres\u00f3w ko\u0142owych. Usuni\u0119cie centralnej cz\u0119\u015bci przesuwa wizualne naciski z wielko\u015bci wype\u0142nionych obszar\u00f3w na d\u0142ugo\u015bci \u0142uk\u00f3w wzd\u0142u\u017c zewn\u0119trznej kraw\u0119dzi. To puste wn\u0119trze tworzy idealne miejsce na kluczowe metryki wydajno\u015bci, podsumowania lub wska\u017aniki stanu \u2014 co czyni go standardowym elementem paneli statusu dla kierownictwa i podsumowa\u0144 finansowych.<\/p>\n

Zasady dzia\u0142ania wykres\u00f3w ciasteczkowych<\/h2>\n

W Apache ECharts wykresy ciasteczkowe s\u0105 konfigurowane przy u\u017cyciu typu serii 'pie'<\/code> typu serii skojarzonego z dwuelementowym promieniem<\/code>tablic\u0105: ['innerRadius', 'outerRadius']<\/code>. Pierwsza warto\u015b\u0107 okre\u015bla otw\u00f3r w \u015brodku, a druga warto\u015b\u0107 kontroluje granic\u0119 zewn\u0119trzn\u0105.<\/p>\n

1. Podstawowa konfiguracja<\/h3>\n

Aby stworzy\u0107 standardowy wykres ciasteczkowy, zadeklaruj seri\u0119 z type: 'pie'<\/code>, ustaw radius: ['50%', '70%']<\/code>, a przeka\u017c obiekty danych z w\u0142a\u015bciwo\u015bciami name<\/code> oraz value<\/code>w\u0142a\u015bciwo\u015bciami:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj ECharts w 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: 'Przydzia\u0142 bud\u017cetu',\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: 'In\u017cynieria' },\r\n                { value: 735, name: 'Marketing' },\r\n                { value: 580, name: 'Dzia\u0142ania' },\r\n                { value: 484, name: 'Sprzeda\u017c' },\r\n                { value: 300, name: 'Wsparcie' }\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>
\nEdytuj ECharts w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Zaawansowane techniki strukturalne<\/h2>\n
Wykresy ciasteczkowe wyr\u00f3\u017cniaj\u0105 si\u0119, gdy s\u0105 \u0142\u0105czone z centralnymi statystykami lub zaokr\u0105glonym stylizowaniem wizualnym, tworz\u0105c wyg\u0142adzone komponenty interfejsu u\u017cytkownika.<\/p>\n
1. Nak\u0142adka statystyk etykiety w centrum<\/h3>\n
Wykorzystaj elementy graficzne lub komponenty tytu\u0142u w centrum, aby wy\u015bwietli\u0107 ca\u0142kowit\u0105 sum\u0119 lub kluczowy wska\u017anik wydajno\u015bci bezpo\u015brednio wewn\u0105trz pier\u015bcienia ciasteczkowego:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj ECharts w 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    tytu\u0142: {\r\n        tekst: '$3,147',\r\n        podtytu\u0142: '\u0141\u0105cznie wydane',\r\n        lewo: '\u015brodek',\r\n        g\u00f3rna: '42%',\r\n        stylTekstu: {\r\n            rozmiarCzcionki: 28,\r\n            pogrubienie: 'pogrubiony',\r\n            kolor: '#333'\r\n        },\r\n        stylPodtytu\u0142u: {\r\n            rozmiarCzcionki: 14,\r\n            kolor: '#666'\r\n        }\r\n    },\r\n    podpowied\u017a: {\r\n        wyzwalacz: 'element'\r\n    },\r\n    serie: [\r\n        {\r\n            nazwa: 'Wydatki',\r\n            typ: 'p\u0142aski',\r\n            promie\u0144: ['60%', '80%'],\r\n            \u015brodek: ['50%', '50%'],\r\n            unikajNadpisywaniaEtykiet: false,\r\n            etykieta: {\r\n                pokazuj: false\r\n            },\r\n            dane: [\r\n                { warto\u015b\u0107: 1048, nazwa: 'Sprz\u0119t' },\r\n                { warto\u015b\u0107: 735, nazwa: 'Subskrypcje SaaS' },\r\n                { warto\u015b\u0107: 580, nazwa: 'Wyposa\u017cenie biurowe' },\r\n                { warto\u015b\u0107: 484, nazwa: 'Podr\u00f3\u017ce' }\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>
\nEdytuj ECharts w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Dok\u0142adna dostosowanie uk\u0142adu i stylizacja segment\u00f3w<\/h2>\n
Dodanie delikatnych promieni naro\u017cnik\u00f3w i wyra\u017anych margines\u00f3w segment\u00f3w nadaje wykresom pier\u015bcieniowym nowoczesny, elegancki wygl\u0105d.<\/p>\n
1. Zaokr\u0105glone ko\u0144ce i odst\u0119py mi\u0119dzy segmentami<\/h3>\n
U\u017cyj itemStyle.borderRadius<\/code>w po\u0142\u0105czeniu z jasnymi bia\u0142ymi obramowaniami, aby nada\u0107 ka\u017cdemu odcinkowi \u0142uku mi\u0119kk\u0105, podobn\u0105 do tabletki wygl\u0105d:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj ECharts w 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    serie: [\r\n        {\r\n            nazwa: 'U\u017cycie pami\u0119ci',\r\n            typ: 'p\u0142aski',\r\n            promie\u0144: ['45%', '70%'],\r\n            stylElementu: {\r\n                borderRadius: 10,\r\n                kolorObramowania: '#ffffff',\r\n                szeroko\u015b\u0107Obramowania: 4\r\n            },\r\n            etykieta: {\r\n                pokazuj: true,\r\n                format: '{b}: {d}%'\r\n            },\r\n            dane: [\r\n                { warto\u015b\u0107: 40, nazwa: 'Dokumenty' },\r\n                { warto\u015b\u0107: 25, nazwa: 'Pliki multimedialne' },\r\n                { warto\u015b\u0107: 20, nazwa: 'Dane systemowe' },\r\n                { warto\u015b\u0107: 15, nazwa: 'Wolne miejsce' }\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>
\nEdytuj ECharts w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Strategiczne najlepsze praktyki<\/h2>\n
    \n
  • Optymalizuj stosunek promienia wewn\u0119trznego do zewn\u0119trznego:<\/strong>Utrzymuj promie\u0144 wewn\u0119trzny pomi\u0119dzy 50% a 70% promienia zewn\u0119trznego, aby zapewni\u0107 wystarczaj\u0105c\u0105 grubo\u015b\u0107 segment\u00f3w do \u0142atwego przesuwania si\u0119 nad nimi, jednocze\u015bnie zachowuj\u0105c wystarczaj\u0105co du\u017co miejsca w \u015brodku.<\/li>\n
  • Zamiernie wykorzystaj przestrze\u0144 w \u015brodku:<\/strong>Wykorzystaj centraln\u0105 pust\u0105 przestrze\u0144 do wy\u015bwietlania ca\u0142kowitej sumy lub wybranej miary segmentu zamiast zat\u0142oczania obwodu wykresu dodatkowymi polami tekstowymi.<\/li>\n
  • Ogranicz liczb\u0119 segment\u00f3w:<\/strong>Ogranicz pier\u015bcie\u0144 do 5 lub 6 g\u0142\u00f3wnych segment\u00f3w. Je\u015bli masz wiele ma\u0142ych kategorii, po\u0142\u0105cz je w kategori\u0119 \u201eInne\u201d, aby unikn\u0105\u0107 cienkich, nieczytelnych \u0142uk\u00f3w.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Podczas prezentowania wzgl\u0119dnych alokacji kategorii, Wykres ciasteczkowy oferuje nowoczesn\u0105, wysokokontrastow\u0105 alternatyw\u0119 dla tradycyjnych pe\u0142nych wykres\u00f3w ko\u0142owych. Usuni\u0119cie centralnej cz\u0119\u015bci przesuwa wizualne naciski z wielko\u015bci wype\u0142nionych obszar\u00f3w na d\u0142ugo\u015bci \u0142uk\u00f3w wzd\u0142u\u017c zewn\u0119trznej kraw\u0119dzi. To puste wn\u0119trze tworzy idealne miejsce na kluczowe…<\/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-2066","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\/pl\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\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\/pl\/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=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/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\\\/pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wykres ciasteczkowy: proporcje oparte na pier\u015bcieniu i metryki w centrum\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/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\/pl\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","og_locale":"pl_PL","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\/pl\/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":{"Szacowany czas czytania":"2 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","url":"https:\/\/www.vpascode.com\/pl\/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\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/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\/pl\/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\/pl\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pl\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Wykres ciasteczkowy: proporcje oparte na pier\u015bcieniu i metryki w centrum"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pl\/#website","url":"https:\/\/www.vpascode.com\/pl\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pl\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs\/2066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/media?parent=2066"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_collection?post=2066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}