{"id":2070,"date":"2026-07-27T01:54:10","date_gmt":"2026-07-27T01:54:10","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/","title":{"rendered":"Diagramme circulaire : r\u00e9partition proportionnelle et d\u00e9coupage des segments"},"content":{"rendered":"<p>Lorsque l&#8217;on pr\u00e9sente des proportions relatives ou des parts en pourcentage d&#8217;un seul total statique, le <strong>Diagramme circulaire<\/strong> est un choix familier et intuitif. En divisant un cercle en tranches proportionnelles, les diagrammes circulaires permettent aux spectateurs de comprendre rapidement <em>la contribution de chaque composant \u00e0 un tout unifi\u00e9<\/em>, telles que la r\u00e9partition de parts de march\u00e9, les r\u00e9partitions de pr\u00e9f\u00e9rences d&#8217;appareils ou les affectations par cat\u00e9gories de d\u00e9penses.<\/p>\n<h2>Le fonctionnement des diagrammes circulaires<\/h2>\n<p>Contrairement aux graphiques cart\u00e9siens qui utilisent des axes horizontaux et verticaux, les diagrammes circulaires transforment directement les donn\u00e9es cat\u00e9gorielles en angles radiaux dans un syst\u00e8me de coordonn\u00e9es polaires. Dans Apache ECharts, un diagramme circulaire est cr\u00e9\u00e9 en d\u00e9finissant la s\u00e9rie <code>type<\/code> \u00e0 <code>'pie'<\/code> et en fournissant un tableau d&#8217;objets o\u00f9 chaque entr\u00e9e contient un nombre <code>valeur<\/code> et une description <code>nom<\/code>.<\/p>\n<h3>1. Configuration essentielle<\/h3>\n<p>Pour cr\u00e9er un diagramme circulaire basique, d\u00e9finissez une seule s\u00e9rie avec <code>type: 'pie'<\/code> et passez votre jeu de donn\u00e9es structur\u00e9 dans le tableau <code>data<\/code> array :<\/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>Modifier ECharts dans VPasCode<\/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:eNqFkt9qwjAUxu8F3yE3UgcyOtRNOnazP5djAxkMhhexOa0H0qYkpw4phb3G3mA+h2+yJ1nSaa1F9JDSpuf7fclJjsoIVcruWNHtMBuklCTMgt28+qcxjkEHzEOCxBvsM5HSCSeqcgUvWbdTzEvLhiXrF6LsXXj\/2nLLSIghFQfmSiOkZPklaMKQy6a\/hMil3KvlZMByJmAfe3HD1EXKE7DsVOU6BCZ+v755GG5+TNO\/qm6VOV2G0M5oLjC3a3jXfq+dE5z4wer1LtiSy9w6XvmjyWC3i2dFkGsmgGkIF6Dt49W1HMVvhuOafkRL0RlgPPFr4CnhKM\/oR5NRrX\/N5xJDpM3asLfUNsQZduj7R9klis1aWfiQnbW8IMkW3KAJ2nfmwvXYlFYSjmaru19woT7vZa7dKQ9OiV6iyAC9B+y07EFJ5XpYx3Pet6Vtx+V418DNaBXXmG4\/Z91OefsHDPjJbw==\" \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: 'Source d\u2019acc\u00e8s',\r\n            type: 'pie',\r\n            radius: '60%',\r\n            data: [\r\n                { value: 1048, name: 'Moteur de recherche' },\r\n                { value: 735, name: 'Direct' },\r\n                { value: 580, name: 'Email' },\r\n                { value: 484, name: 'Publicit\u00e9s Union' },\r\n                { value: 300, name: 'Publicit\u00e9s vid\u00e9o' }\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:eNqFkt9qwjAUxu8F3yE3UgcyOtRNOnazP5djAxkMhhexOa0H0qYkpw4phb3G3mA+h2+yJ1nSaa1F9JDSpuf7fclJjsoIVcruWNHtMBuklCTMgt28+qcxjkEHzEOCxBvsM5HSCSeqcgUvWbdTzEvLhiXrF6LsXXj\/2nLLSIghFQfmSiOkZPklaMKQy6a\/hMil3KvlZMByJmAfe3HD1EXKE7DsVOU6BCZ+v755GG5+TNO\/qm6VOV2G0M5oLjC3a3jXfq+dE5z4wer1LtiSy9w6XvmjyWC3i2dFkGsmgGkIF6Dt49W1HMVvhuOafkRL0RlgPPFr4CnhKM\/oR5NRrX\/N5xJDpM3asLfUNsQZduj7R9klis1aWfiQnbW8IMkW3KAJ2nfmwvXYlFYSjmaru19woT7vZa7dKQ9OiV6iyAC9B+y07EFJ5XpYx3Pet6Vtx+V418DNaBXXmG4\/Z91OefsHDPjJbw==\" \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>Modifier ECharts dans VPasCode<\/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>Techniques structurelles avanc\u00e9es<\/h2>\n<p>Les diagrammes circulaires peuvent \u00eatre ajust\u00e9s pour adopter des dispositions en forme de donut ou \u00eatre stylis\u00e9s avec des rayons personnalis\u00e9s afin de mettre en \u00e9vidence les segments principaux des donn\u00e9es.<\/p>\n<h3>1. Variante de diagramme en anneau<\/h3>\n<p>En d\u00e9finissant le <code>rayon<\/code> propri\u00e9t\u00e9 sous forme de tableau \u00e0 deux valeurs (par exemple, <code>['40%', '70%']<\/code>) creuse le centre pour cr\u00e9er un diagramme en donut propre. Cela laisse de la place au milieu pour des \u00e9tiquettes de r\u00e9sum\u00e9 personnalis\u00e9es :<\/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>Modifier ECharts dans VPasCode<\/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:eNqFUstOwzAQvCPxD5YQ8iWHUFI1CuIAXEFItFIPqAcHb5KV3Ng4TlFB+SC+gx\/D7iNp0qTdQyzvzuyMNyuVQZmTe\/JzeUFsGCmFQRXt75ucxjQFHRGKBpZ0W6i87SkghZy38dLy6fiaek1OQGJs8gNyA7rTogCNUETkvYEfdHORsyVY9mytgHAg6u9Xo8rc97OEQ5mNvEVZsMKjimYcSydEA9+6I3Rij0UHxFYS+TOLQbyuQAtm32J0CR2Um8TUrAVEXa8uYqk56LedXOgNIZ6kkG6uV0mS0EHUHLnJIjJq16sOXjjLvW6KTH5FJGGigB4NJQt0O9D9O0M6sFQZK7DolRo20RjpmeY+EpmbKX7boY78E5A5YJq5dYql4PQYV51+AWeGtbat3jqyYqK06jd+EHr7rXssNbCSHrVpMSa345rwImMUcIYwDv2aMGOxAGPOUYIwqCkPpdEO34YvmuuuYjPV3T+LKdx3\" \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: 'Type de p\u00e9riph\u00e9rique',\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: 'Bureau' },\r\n                { value: 735, name: 'Mobile' },\r\n                { value: 580, name: 'Tablette' },\r\n                { value: 484, name: 'Autre' }\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:eNqFUstOwzAQvCPxD5YQ8iWHUFI1CuIAXEFItFIPqAcHb5KV3Ng4TlFB+SC+gx\/D7iNp0qTdQyzvzuyMNyuVQZmTe\/JzeUFsGCmFQRXt75ucxjQFHRGKBpZ0W6i87SkghZy38dLy6fiaek1OQGJs8gNyA7rTogCNUETkvYEfdHORsyVY9mytgHAg6u9Xo8rc97OEQ5mNvEVZsMKjimYcSydEA9+6I3Rij0UHxFYS+TOLQbyuQAtm32J0CR2Um8TUrAVEXa8uYqk56LedXOgNIZ6kkG6uV0mS0EHUHLnJIjJq16sOXjjLvW6KTH5FJGGigB4NJQt0O9D9O0M6sFQZK7DolRo20RjpmeY+EpmbKX7boY78E5A5YJq5dYql4PQYV51+AWeGtbat3jqyYqK06jd+EHr7rXssNbCSHrVpMSa345rwImMUcIYwDv2aMGOxAGPOUYIwqCkPpdEO34YvmuuuYjPV3T+LKdx3\" \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>Modifier ECharts dans VPasCode<\/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>Affinage du layout et du style<\/h2>\n<p>Contr\u00f4ler les lignes d&#8217;appel des \u00e9tiquettes et les bords des tranches maintient la lisibilit\u00e9 des diagrammes en secteurs m\u00eame avec de petites valeurs de donn\u00e9es.<\/p>\n<h3>1. S\u00e9paration personnalis\u00e9e des tranches et appels d&#8217;\u00e9tiquettes<\/h3>\n<p>Appliquer des largeurs de bordure aux \u00e9l\u00e9ments et configurer des lignes directrices externes emp\u00eache le chevauchement du texte sur les tranches adjacentes :<\/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>Modifier ECharts dans VPasCode<\/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:eNqFUb1qwzAY3AN5hw9K0GKK69YdXDqk6dhAoUOHkkG2viQCWXIluRCCH6jP0Rer5P4Yy058iyTuTvedpCrLlYR7OM5n4GBQczQZvP0cPY7d1kPSEjMgz1RbYAgl1cX+65NEfZU9VF5VcQwZTRmvXQK5TRchV6C0qF06SWNHQrtsApFBgYVFtlbMRxgud2KQwqilvRb\/beCDitoZb+Lor8ua6vcaYUmgic44rgeOhwnHVRo6VlOOQcbjhKOLWNZWo3Hyvjp8P0FzFFn4rR5bpUtq2x8gx7xxGtYsSF\/XjN32xCWO3mhKpew+g\/gyGekgUO4860qfIpMMkvj8BNxi+WIPYnyCXGmGeqWE8q0uti1IdEr4ypmfKAkiu+PvdjOfNXff0Za1IA==\" \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: 'Part de march\u00e9',\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: 'Marque A' },\r\n                { value: 30, name: 'Marque B' },\r\n                { value: 15, name: 'Marque C' },\r\n                { value: 10, name: 'Marque D' },\r\n                { value: 5, name: 'Autres' }\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:eNqFUb1qwzAY3AN5hw9K0GKK69YdXDqk6dhAoUOHkkG2viQCWXIluRCCH6jP0Rer5P4Yy058iyTuTvedpCrLlYR7OM5n4GBQczQZvP0cPY7d1kPSEjMgz1RbYAgl1cX+65NEfZU9VF5VcQwZTRmvXQK5TRchV6C0qF06SWNHQrtsApFBgYVFtlbMRxgud2KQwqilvRb\/beCDitoZb+Lor8ua6vcaYUmgic44rgeOhwnHVRo6VlOOQcbjhKOLWNZWo3Hyvjp8P0FzFFn4rR5bpUtq2x8gx7xxGtYsSF\/XjN32xCWO3mhKpew+g\/gyGekgUO4860qfIpMMkvj8BNxi+WIPYnyCXGmGeqWE8q0uti1IdEr4ypmfKAkiu+PvdjOfNXff0Za1IA==\" \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>Modifier ECharts dans VPasCode<\/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>Meilleures pratiques strat\u00e9giques<\/h2>\n<ul>\n<li><strong>Limitez les tranches \u00e0 5 ou 6 :<\/strong>Trop de petites tranches rendent un diagramme en secteurs difficile \u00e0 lire. Regroupez les petites valeurs sous une cat\u00e9gorie \u00ab Autres \u00bb pour garder le focus pr\u00e9cis.<\/li>\n<li><strong>Triez les tranches par taille :<\/strong>Placez la plus grande tranche en commen\u00e7ant \u00e0 12 heures et ordonnez les tranches restantes dans le sens horaire pour faciliter le balayage visuel.<\/li>\n<li><strong>Affichez les pourcentages directement dans les infobulles ou les \u00e9tiquettes :<\/strong> Incluez toujours <code>{d}%<\/code> dans les formateurs d&#8217;\u00e9tiquettes ou d&#8217;infobulles afin que les spectateurs voient imm\u00e9diatement les rapports de proportion sans faire de calcul mental.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Lorsque l&#8217;on pr\u00e9sente des proportions relatives ou des parts en pourcentage d&#8217;un seul total statique, le Diagramme circulaire est un choix familier et intuitif. En divisant un cercle en tranches proportionnelles, les diagrammes circulaires permettent aux spectateurs de comprendre rapidement&#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-2070","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\/fr\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/pie-chart-proportional-breakdown-and-segment-slicing-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Diagramme circulaire : r\u00e9partition proportionnelle et d\u00e9coupage des segments\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/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\/fr\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/","og_locale":"fr_FR","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\/fr\/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":{"Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/","url":"https:\/\/www.vpascode.com\/fr\/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\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/pie-chart-proportional-breakdown-and-segment-slicing-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/fr\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Diagramme circulaire : r\u00e9partition proportionnelle et d\u00e9coupage des segments"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/fr\/#website","url":"https:\/\/www.vpascode.com\/fr\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/fr\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs\/2070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/media?parent=2070"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}