{"id":2068,"date":"2026-07-27T01:54:10","date_gmt":"2026-07-27T01:54:10","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/","title":{"rendered":"Kreisdiagramm: Proportionale Aufteilung und Segmentteilung"},"content":{"rendered":"<p>Wenn relative Anteile oder Prozentanteile eines einzelnen statischen Gesamtbetrags pr\u00e4sentiert werden, ist das <strong>Kreisdiagramm<\/strong> eine vertraute und intuitive Wahl. Durch die Aufteilung eines Kreises in proportionale Sektoren erm\u00f6glichen Kreisdiagramme es den Betrachtern, schnell zu verstehen<em>wie einzelne Komponenten zu einem einheitlichen Ganzen beitragen<\/em>, beispielsweise bei der Marktanteilsverteilung, der Aufteilung von Ger\u00e4tepr\u00e4ferenzen oder der Zuordnung von Kostenkategorien.<\/p>\n<h2>Die Funktionsweise von Kreisdiagrammen<\/h2>\n<p>Im Gegensatz zu kartesischen Diagrammen, die horizontale und vertikale Achsen verwenden, ordnet ein Kreisdiagramm kategorische Daten direkt radialen Winkeln in einem Polarkoordinatensystem zu. In Apache ECharts wird ein Kreisdiagramm erstellt, indem man die Serie <code>type<\/code> auf <code>'pie'<\/code> und liefert ein Array von Objekten, wobei jedes Element einen numerischen <code>value<\/code> und beschreibenden <code>name<\/code>.<\/p>\n<h3>1. Grundlegende Einrichtung<\/h3>\n<p>Um ein einfaches Kreisdiagramm zu erstellen, definieren Sie eine einzelne Serie mit <code>type: 'pie'<\/code> und \u00fcbergeben Sie Ihr strukturiertes Datenset innerhalb des <code>data<\/code> Arrays:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFklFrwjAQx98Fv0NepA5kdKhTOvbgNp\/3IBuD4cOZXGsgTUqSOqT0uy\/pals70aPQpPf\/\/ZPrncosV5I8k2I4IC6sUsLyLDrtq2+aJwnqiATcYhpM2kysdArWVrkCSjIcFLvSsbQk44KVo7vgT1vWjMAEJTszV5qjtI4\/oLacguj6C4x9yr96TgYdZyLy3Yo7pj4kpOjYFaVoDNmoXFPseleVHTOvyfi\/jAbGc+cfPIajfo6BhbOTmxuQA4jcOT6Es+XkdIMNgqZ7spYJlxg0FVwEF9N5w71xjdTeAObLsAHWKXBxQz9bzhr9h\/StXzFzg5mG7RmfnKGqmXNk27PANNuD4SbqN8aHH6SNPQq8mK0avAemfl5Erv3vnFwTvcexQfsVkeuyVyWUH1Sd7GDsKqqf+\/lpSrvRK66zrZfb4aB8+gX497rO\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>ECharts in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFkk1vgkAQhu8m\/oe9GGxiGxq1NTQ99OvY9GBimjYeRhhg0mWXLouNJfz37qICUqMTEnZ553l3hxmZapKC3bOi32MmtJRcU+rt99U3RVGEymMOaUycUaOEUiWgdaUVULJ+r1iVhvVLNiyCcnDhbHPLHcMxQhEcmEtFKLTh16g0+cDb\/hxDK9lXxylDw2Ue+2ySW6Y2BCRo2I88UhSG2XeOnGPbvCptk9qklP4pCgLKzQHOjTvoagFoODi6vgJbA8+N47U7mY32V5jnfpxA5sck0KkrOMrdjqc19kwKv\/QZYDpza+Dl8hWInwEms0kNLFAhCYo0sgfxi2Sac4Yeu81xCwpQQsMdYsuODSZpDBllXrdPNuxczfWG41G16ncMgfx55LmyP3d0KunNdBv1u8dOpz1JLu3cqmgFQ1PV7rma7oe2HZ3iWtvdctnvlXd\/JbHCIg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    tooltip: {\r\n        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: 'Zugriffsquelle',\r\n            type: 'pie',\r\n            radius: '60%',\r\n            data: [\r\n                { value: 1048, name: 'Suchmaschine' },\r\n                { value: 735, name: 'Direkt' },\r\n                { value: 580, name: 'E-Mail' },\r\n                { value: 484, name: 'Vereinigte Anzeigen' },\r\n                { value: 300, name: 'Videoanzeigen' }\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                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFkk1vgkAQhu8m\/oe9GGxiGxq1NTQ99OvY9GBimjYeRhhg0mWXLouNJfz37qICUqMTEnZ553l3hxmZapKC3bOi32MmtJRcU+rt99U3RVGEymMOaUycUaOEUiWgdaUVULJ+r1iVhvVLNiyCcnDhbHPLHcMxQhEcmEtFKLTh16g0+cDb\/hxDK9lXxylDw2Ue+2ySW6Y2BCRo2I88UhSG2XeOnGPbvCptk9qklP4pCgLKzQHOjTvoagFoODi6vgJbA8+N47U7mY32V5jnfpxA5sck0KkrOMrdjqc19kwKv\/QZYDpza+Dl8hWInwEms0kNLFAhCYo0sgfxi2Sac4Yeu81xCwpQQsMdYsuODSZpDBllXrdPNuxczfWG41G16ncMgfx55LmyP3d0KunNdBv1u8dOpz1JLu3cqmgFQ1PV7rma7oe2HZ3iWtvdctnvlXd\/JbHCIg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFklFrwjAQx98Fv0NepA5kdKhTOvbgNp\/3IBuD4cOZXGsgTUqSOqT0uy\/pals70aPQpPf\/\/ZPrncosV5I8k2I4IC6sUsLyLDrtq2+aJwnqiATcYhpM2kysdArWVrkCSjIcFLvSsbQk44KVo7vgT1vWjMAEJTszV5qjtI4\/oLacguj6C4x9yr96TgYdZyLy3Yo7pj4kpOjYFaVoDNmoXFPseleVHTOvyfi\/jAbGc+cfPIajfo6BhbOTmxuQA4jcOT6Es+XkdIMNgqZ7spYJlxg0FVwEF9N5w71xjdTeAObLsAHWKXBxQz9bzhr9h\/StXzFzg5mG7RmfnKGqmXNk27PANNuD4SbqN8aHH6SNPQq8mK0avAemfl5Erv3vnFwTvcexQfsVkeuyVyWUH1Sd7GDsKqqf+\/lpSrvRK66zrZfb4aB8+gX497rO\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>ECharts in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"vnQTBsA\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-1312\" decoding=\"async\" fetchpriority=\"high\" height=\"1214\" sizes=\"(max-width: 1817px) 100vw, 1817px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba6f03e87.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba6f03e87.png 1817w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba6f03e87-300x200.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba6f03e87-1024x684.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba6f03e87-768x513.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba6f03e87-1536x1026.png 1536w\" width=\"1817\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Erweiterte strukturelle Techniken<\/h2>\n<p>Kreisdiagramme k\u00f6nnen in ringf\u00f6rmige Donut-Layouts umgestellt oder mit benutzerdefinierten Radien gestaltet werden, um die wichtigsten Datensegmente hervorzuheben.<\/p>\n<h3>1. Donut-Diagramm-Variante<\/h3>\n<p>Die Einstellung des <code>Radius<\/code> Eigenschaft als Array mit zwei Werten (z. B. <code>['40%', '70%']<\/code>) hohlt die Mitte aus, um einen sauberen Donut-Chart zu erstellen. Dies l\u00e4sst Platz in der Mitte f\u00fcr benutzerdefinierte Zusammenfassungsbeschriftungen:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUj1rwzAQ3Qv9D4JStHhwU4cYh07t2BJoAhlKBjk620cVy0iKS1r83yvlw44dO7lF6O69e\/clC4MyJy\/k7\/6OWDNSCoNFdPrvfQrTFFREKBrY0EOg8g6vgBRy3sZLy6fjR+o1PgGJsc415AZUJ4UGhaAj8tXAz7I5y9kGLPsNSlwDWewKOM+917Q+iyjwIqIYx63LTgPflkToxD6rDoiVEvk7i0HMSlCC2QaM2kIH5dqfm52AqFugs1gqDurzKBd6Q4hXKaQb5kOSJHQQtURusoiM2vGqgxeu5N5qdCZ\/IpIwoaFHo5Aa3eK7KxnSgU2RMY26V2q4iKaQnmmeLJG5meOvHerIvwJZAqaZu6FYCk4vcdX1DjgzrHVi9amRkomtVX\/yg9BrTk1\/2zumF3lalMnzuGZ8yBgF3CCMQ78mLFgswNwgBGFQE2Yms4vqNrpqvseI9VTTf8QH1ls=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>ECharts in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUkFOwzAQvCPxB0sI+ZJDKKkaBXECiQsIiSL1gHpw8CaxcLOR7RYVlN\/wEz6G3dKkcZN2L5Z3Z3Zm7cXKCCzJLfk+PyM2DKI0okp2901OiTwHlRAqDCzotlAH21NCDiXv4tHy6fiSBm1OQmZs8h1KA8proUEJ0Al5a+F73VyUbAGW\/QDq98eAWVf7rTeS68oBKgF+RTEulq45jULriNCJPeYeiK1Q8EeWgnxegZLM+jdqCR7KTT81awmJ789FioqDevmXi4MhxB1KdG95kWUZHUTNBDdFQkbdeu3hpbPc60YX+JmQjEkNPRoVauH+3f+RIR1YVAXTQvdKDZtojfS85i4yLM1UfNlHHYVHIDMQeeFWKEXJ6SGuPj4BZ4Z1NqzZNLJicmnVr8IoDnabdg\/6w64xPejToUyuxw3jCVMhT+DHcdjgX1kqwZwgRHHUEKZYaiNyoP6o8\/b6X7GZ+uYPZwzX6Q==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    tooltip: {\r\n        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: 'Ger\u00e4tetyp',\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: 'Desktop' },\r\n                { value: 735, name: 'Mobil' },\r\n                { value: 580, name: 'Tablet' },\r\n                { value: 484, name: 'Sonstige' }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUkFOwzAQvCPxB0sI+ZJDKKkaBXECiQsIiSL1gHpw8CaxcLOR7RYVlN\/wEz6G3dKkcZN2L5Z3Z3Zm7cXKCCzJLfk+PyM2DKI0okp2901OiTwHlRAqDCzotlAH21NCDiXv4tHy6fiSBm1OQmZs8h1KA8proUEJ0Al5a+F73VyUbAGW\/QDq98eAWVf7rTeS68oBKgF+RTEulq45jULriNCJPeYeiK1Q8EeWgnxegZLM+jdqCR7KTT81awmJ789FioqDevmXi4MhxB1KdG95kWUZHUTNBDdFQkbdeu3hpbPc60YX+JmQjEkNPRoVauH+3f+RIR1YVAXTQvdKDZtojfS85i4yLM1UfNlHHYVHIDMQeeFWKEXJ6SGuPj4BZ4Z1NqzZNLJicmnVr8IoDnabdg\/6w64xPejToUyuxw3jCVMhT+DHcdjgX1kqwZwgRHHUEKZYaiNyoP6o8\/b6X7GZ+uYPZwzX6Q==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUj1rwzAQ3Qv9D4JStHhwU4cYh07t2BJoAhlKBjk620cVy0iKS1r83yvlw44dO7lF6O69e\/clC4MyJy\/k7\/6OWDNSCoNFdPrvfQrTFFREKBrY0EOg8g6vgBRy3sZLy6fjR+o1PgGJsc415AZUJ4UGhaAj8tXAz7I5y9kGLPsNSlwDWewKOM+917Q+iyjwIqIYx63LTgPflkToxD6rDoiVEvk7i0HMSlCC2QaM2kIH5dqfm52AqFugs1gqDurzKBd6Q4hXKaQb5kOSJHQQtURusoiM2vGqgxeu5N5qdCZ\/IpIwoaFHo5Aa3eK7KxnSgU2RMY26V2q4iKaQnmmeLJG5meOvHerIvwJZAqaZu6FYCk4vcdX1DjgzrHVi9amRkomtVX\/yg9BrTk1\/2zumF3lalMnzuGZ8yBgF3CCMQ78mLFgswNwgBGFQE2Yms4vqNrpqvseI9VTTf8QH1ls=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>ECharts in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"qwzdybu\"><img alt=\"\" class=\"alignnone size-full wp-image-1313\" decoding=\"async\" height=\"1220\" sizes=\"(max-width: 1084px) 100vw, 1084px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba7aaed30.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba7aaed30.png 1084w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba7aaed30-267x300.png 267w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba7aaed30-910x1024.png 910w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba7aaed30-768x864.png 768w\" width=\"1084\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Feinabstimmung von Layout und Stil<\/h2>\n<p>Die Steuerung der Beschriftungsausl\u00e4ufe und der Segmentr\u00e4nder h\u00e4lt Tortendiagramme auch bei kleineren Datenwerten lesbar.<\/p>\n<h3>1. Benutzerdefinierte Segmentabst\u00e4nde und Beschriftungsausl\u00e4ufe<\/h3>\n<p>Durch Anwendung von Segmentrandbreiten und Konfiguration externer Hilfslinien wird Text\u00fcberlappung auf benachbarten Segmenten verhindert:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUT1rwzAU3AP5Dw9K0GKK69YdHDok6djQIUOHkkGOXmIRWTKSUgjG\/72S+2GsOPEtlri7d+9kVVmuJLxAPZ2Ag0HN0WTw+XP1qLujh6QlZkDWVB\/RwqagGknUl9hz5SUVv2A0ZfzkxpPndBZyO5QWtYsmaexIaD\/bQGRQ4M4iWyvmIwyXB3GRwqilvQr\/VeCLipMzPsXRX5GlppLBgkAT3TA8hobliOEhDQyrMUOY8Dpi6ALebYHaOHlfHb6doDmKLPyfHnulS2rb1yd13jgNa2akr2uGpr1xiYMTTamULTKI75OBDgLlwbOu8zUyySCJb2\/ALZYbexbDG+RKM9QrJZRvdbdvQaJrwg\/O\/EZJENldf4\/b6aSZfwOv17Fx\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>ECharts in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUbFOwzAU3Cv1H56EKi8RCoEwpGKAMtKpAwPq4NavwcKxI\/sVqYry79gBEWLS5pbYurt37xxTkzQaHqCZz8DDoZXoCnj7vgY0\/TFA8woLYGtuP4hrQqlYMlTQqQ6KWmLMWC7k0U9n9\/ki5vboh1mfzPLUk9B9tpHIocI9oVgbESKc1KX6lyI48UGD3ybwydXRG+\/S5G8PhEcGbXLBcBsbniYMN3lkWE0Z4oTnCUMfsDHakSzRG4b6+PUU36Eq4h8acDC24tS9P2t2rdeIdsGGunZs2ovUODrRVcbQewHpdTbSQqEuA+tbnyOzArL08gaSsNrQSY1vsDNWoF0ZZUKrq0MHlpwTvkoRNsqiyP76c9zOZ+3yC\/fesnE=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    series: [\r\n        {\r\n            name: 'Marktanteil',\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: 'Marke A' },\r\n                { value: 30, name: 'Marke B' },\r\n                { value: 15, name: 'Marke C' },\r\n                { value: 10, name: 'Marke D' },\r\n                { value: 5, name: 'Sonstige' }\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                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUbFOwzAU3Cv1H56EKi8RCoEwpGKAMtKpAwPq4NavwcKxI\/sVqYry79gBEWLS5pbYurt37xxTkzQaHqCZz8DDoZXoCnj7vgY0\/TFA8woLYGtuP4hrQqlYMlTQqQ6KWmLMWC7k0U9n9\/ki5vboh1mfzPLUk9B9tpHIocI9oVgbESKc1KX6lyI48UGD3ybwydXRG+\/S5G8PhEcGbXLBcBsbniYMN3lkWE0Z4oTnCUMfsDHakSzRG4b6+PUU36Eq4h8acDC24tS9P2t2rdeIdsGGunZs2ovUODrRVcbQewHpdTbSQqEuA+tbnyOzArL08gaSsNrQSY1vsDNWoF0ZZUKrq0MHlpwTvkoRNsqiyP76c9zOZ+3yC\/fesnE=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFUT1rwzAU3AP5Dw9K0GKK69YdHDok6djQIUOHkkGOXmIRWTKSUgjG\/72S+2GsOPEtlri7d+9kVVmuJLxAPZ2Ag0HN0WTw+XP1qLujh6QlZkDWVB\/RwqagGknUl9hz5SUVv2A0ZfzkxpPndBZyO5QWtYsmaexIaD\/bQGRQ4M4iWyvmIwyXB3GRwqilvQr\/VeCLipMzPsXRX5GlppLBgkAT3TA8hobliOEhDQyrMUOY8Dpi6ALebYHaOHlfHb6doDmKLPyfHnulS2rb1yd13jgNa2akr2uGpr1xiYMTTamULTKI75OBDgLlwbOu8zUyySCJb2\/ALZYbexbDG+RKM9QrJZRvdbdvQaJrwg\/O\/EZJENldf4\/b6aSZfwOv17Fx\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>ECharts in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"grQLCji\"><img alt=\"\" class=\"alignnone size-full wp-image-1314\" decoding=\"async\" height=\"1041\" sizes=\"(max-width: 1418px) 100vw, 1418px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba87c5916.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba87c5916.png 1418w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba87c5916-300x220.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba87c5916-1024x752.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ba87c5916-768x564.png 768w\" width=\"1418\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Strategische Best Practices<\/h2>\n<ul>\n<li><strong>Beschr\u00e4nken Sie die Segmente auf 5 oder 6:<\/strong> Zu viele kleine Segmente machen ein Tortendiagramm schwer lesbar. Gruppieren Sie geringf\u00fcgige Werte unter einer Kategorie \u201eSonstige\u201c, um die Aufmerksamkeit fokussiert zu halten.<\/li>\n<li><strong>Sortieren Sie die Segmente nach Gr\u00f6\u00dfe:<\/strong> Platzieren Sie das gr\u00f6\u00dfte Segment beginnend um 12 Uhr und ordnen Sie die verbleibenden Segmente sequenziell im Uhrzeigersinn an, um eine einfache Ablesung zu erm\u00f6glichen.<\/li>\n<li><strong>Zeigen Sie Prozents\u00e4tze direkt in Tooltips oder Beschriftungen an:<\/strong> F\u00fcgen Sie stets <code>{d}%<\/code> in Beschriftungs- oder Tooltip-Formatierungen ein, damit Betrachter die Anteilsverh\u00e4ltnisse sofort erkennen, ohne mentale Rechnungen durchf\u00fchren zu m\u00fcssen.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Wenn relative Anteile oder Prozentanteile eines einzelnen statischen Gesamtbetrags pr\u00e4sentiert werden, ist das Kreisdiagramm eine vertraute und intuitive Wahl. Durch die Aufteilung eines Kreises in proportionale Sektoren erm\u00f6glichen Kreisdiagramme es den Betrachtern, schnell zu verstehenwie einzelne Komponenten zu einem einheitlichen&#8230;<\/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-2068","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 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\/de\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/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=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Kreisdiagramm: Proportionale Aufteilung und Segmentteilung\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/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\/de\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/","og_locale":"de_DE","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\/de\/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":{"Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/","url":"https:\/\/www.vpascode.com\/de\/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\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/de\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/de\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Kreisdiagramm: Proportionale Aufteilung und Segmentteilung"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/de\/#website","url":"https:\/\/www.vpascode.com\/de\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/de\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs\/2068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/media?parent=2068"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_collection?post=2068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}