{"id":2069,"date":"2026-07-27T01:55:55","date_gmt":"2026-07-27T01:55:55","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","title":{"rendered":"Diagramme en donut : proportions bas\u00e9es sur l&#8217;anneau et m\u00e9triques centrales"},"content":{"rendered":"<p>Lors de la pr\u00e9sentation des r\u00e9partitions relatives des cat\u00e9gories, le <strong>Diagramme en donut<\/strong>offre une alternative moderne et \u00e0 fort contraste aux diagrammes circulaires traditionnels en plein. En supprimant le noyau central, un diagramme en donut d\u00e9place l&#8217;accent visuel de la taille de la surface remplie vers les longueurs des arcs le long de l&#8217;anneau ext\u00e9rieur. Ce centre creux cr\u00e9e un espace visuel privil\u00e9gi\u00e9 pour les indicateurs cl\u00e9s de performance, les totaux sommaires ou les indicateurs d&#8217;\u00e9tat, ce qui en fait un \u00e9l\u00e9ment incontournable des tableaux de bord ex\u00e9cutifs et des synth\u00e8ses financi\u00e8res.<\/p>\n<h2>Le fonctionnement des diagrammes en donut<\/h2>\n<p>Dans Apache ECharts, les diagrammes en donut sont configur\u00e9s \u00e0 l&#8217;aide du type de s\u00e9rie <code>'pie'<\/code> associ\u00e9 \u00e0 un tableau \u00e0 deux \u00e9l\u00e9ments <code>radius<\/code> : <code>['innerRadius', 'outerRadius']<\/code>. La premi\u00e8re valeur d\u00e9finit l&#8217;ouverture centrale creuse, tandis que la deuxi\u00e8me valeur contr\u00f4le la limite ext\u00e9rieure.<\/p>\n<h3>1. Configuration essentielle<\/h3>\n<p>Pour cr\u00e9er un diagramme en donut standard, d\u00e9clarez une s\u00e9rie avec <code>type: 'pie'<\/code>, d\u00e9finissez <code>radius: ['50%', '70%']<\/code>, et transmettez vos objets de donn\u00e9es avec <code>name<\/code> et <code>value<\/code> propri\u00e9t\u00e9s :<\/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:eNqFkD9rwzAQxfdAvoOWoBYyuCQmxqVDC91aMmQsGS72RRVVJCHLKcXou\/fsJP6XwVqE7t7vnd4Z66XR7IVV8xmj441RXtr09m5qTgqBLmVcejzxZdc5GncC75teBYHNZ9UhEJsF9lDlYfHIL9pwZRQK1PnQ3NAwHi\/6tgqPnooZarIeWRToJBYp++rkPbf6aDgh0W9lLtCzV6VMBnXI\/oRm8p+tdVbiuOMgl2U9g8cRfYzxDV37kejyu54oju9FcDYy\/4ADqu0ZnQLK6l2JI5WqBek4R5P22\/ym7AiqwGEzjCxy8DBYSrscdgZVUtCnaJ0sb8t510JqpFVqwe+8BthmFbfUJ7gf9NNMnEQts7XomvUXE9A6WbfQDhRO6VdRN2RXWmucJ2II7LvntUOV8PwPkryuSA==\" 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:eNqFkU1qwzAQhfeB3EGboBaycElMgksPUGgJtNBNyWJSTVxRRRLyOKUYHSjnyMUqOYn\/sog2RvPe90YzNpak0eyJVeMRC4eMUSRtdrnXNSfzHF3GuCTc8WmrbI3bAVGtVeDZeFRtfGC\/PLurhJ\/c85PXnxmFOWrRDzehGU8n3ViFWwrFL9QhehBRoJNYZOyztXfS4tGww0C\/HQ8WHMl6PlGyTSlypG6buv2fjWYrcag4ELKMjXiahNcxvgif9cB0emLHlKbXJtgbKV5gg2q1R6cgDEyuxIFLRUM2HKYe+dv8ZmwLqsC+6AcRAgh6m2k2xPagyjDoQzJfTi8betb58aBlXCi\/yuphi1naUK\/gfpCkzm8w6TJpmJU9HhzEP1HcoObLeUN9xOXeAmZJ2+a9tNY4CkQfWLfXsxIq\/vEfypqzEg==\" \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        top: '5%',\r\n        left: 'center'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'R\u00e9partition du budget',\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: 'Ing\u00e9nierie' },\r\n                { value: 735, name: 'Marketing' },\r\n                { value: 580, name: 'Op\u00e9rations' },\r\n                { value: 484, name: 'Ventes' },\r\n                { value: 300, name: 'Support' }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFkU1qwzAQhfeB3EGboBaycElMgksPUGgJtNBNyWJSTVxRRRLyOKUYHSjnyMUqOYn\/sog2RvPe90YzNpak0eyJVeMRC4eMUSRtdrnXNSfzHF3GuCTc8WmrbI3bAVGtVeDZeFRtfGC\/PLurhJ\/c85PXnxmFOWrRDzehGU8n3ViFWwrFL9QhehBRoJNYZOyztXfS4tGww0C\/HQ8WHMl6PlGyTSlypG6buv2fjWYrcag4ELKMjXiahNcxvgif9cB0emLHlKbXJtgbKV5gg2q1R6cgDEyuxIFLRUM2HKYe+dv8ZmwLqsC+6AcRAgh6m2k2xPagyjDoQzJfTi8betb58aBlXCi\/yuphi1naUK\/gfpCkzm8w6TJpmJU9HhzEP1HcoObLeUN9xOXeAmZJ2+a9tNY4CkQfWLfXsxIq\/vEfypqzEg==\" \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:eNqFkD9rwzAQxfdAvoOWoBYyuCQmxqVDC91aMmQsGS72RRVVJCHLKcXou\/fsJP6XwVqE7t7vnd4Z66XR7IVV8xmj441RXtr09m5qTgqBLmVcejzxZdc5GncC75teBYHNZ9UhEJsF9lDlYfHIL9pwZRQK1PnQ3NAwHi\/6tgqPnooZarIeWRToJBYp++rkPbf6aDgh0W9lLtCzV6VMBnXI\/oRm8p+tdVbiuOMgl2U9g8cRfYzxDV37kejyu54oju9FcDYy\/4ADqu0ZnQLK6l2JI5WqBek4R5P22\/ym7AiqwGEzjCxy8DBYSrscdgZVUtCnaJ0sb8t510JqpFVqwe+8BthmFbfUJ7gf9NNMnEQts7XomvUXE9A6WbfQDhRO6VdRN2RXWmucJ2II7LvntUOV8PwPkryuSA==\" 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=\"qZuZYKI\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-1316\" decoding=\"async\" fetchpriority=\"high\" height=\"1300\" sizes=\"(max-width: 1088px) 100vw, 1088px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a.png 1088w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a-251x300.png 251w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a-857x1024.png 857w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb32c140a-768x918.png 768w\" width=\"1088\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Techniques structurelles avanc\u00e9es<\/h2>\n<p>Les diagrammes en donut brillent lorsqu&#8217;ils sont associ\u00e9s \u00e0 des statistiques centrales ou \u00e0 un style visuel arrondi pour cr\u00e9er des composants d&#8217;interface utilisateur soign\u00e9s.<\/p>\n<h3>1. Superposition de statistiques avec \u00e9tiquette centrale<\/h3>\n<p>Utilisez des \u00e9l\u00e9ments graphiques ou des composants de titre centr\u00e9s pour afficher un total g\u00e9n\u00e9ral ou un KPI principal directement \u00e0 l&#8217;int\u00e9rieur de l&#8217;anneau du donut :<\/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:eNqFUz1vgzAQ3Sv1P1hqKy8MSfgIStWxUodKGYjUocpwwJFYcrBlG5K0yn+vTQoJ0Cq3APfeu\/O9M0IaJkryQr7v74gNwwzHRfvVZPBgFoQ++t40mFPvAugq\/cVWwgAnicTSXBM4Fg7NbBrVNWCEtPlg9tRL2lqJOQ66uyhEaRL2ZYFZ7I2hD2SbrWuUCp7TASETXCiLPfi+Ty\/QaTzHrd7T4L\/SURRdlz6\/th2MENww2bdUsc0GnZYZ3NG+QKNiqBfk88IfnKmEnT0PfT1YwzXq4cjmKB0sGQ4RBTmrXGkaTaz3hMb2sR6O1azLkcIzKfyDBLVg+TukyJc1Kg52vgK4xgGNO8bI02bKrdj\/avrgaVAiBwM9MzpTSA28couZBLHXmvIGKt+DQjoq1NPM\/bCTJAAJSapUZ4o1f4O+IQ7jSSdeFgXL0Mql5HZtN5RBHHTKlYIaOW3vSxvr0U2ymdPzD\/SU02U=\" 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:eNqFU0tOwzAU3CNxB0uAvClS23waFbFAAnasgmCBunCa19SSawf7pVBQD9Rz9GLYLUkbB1Rv4ryZeZ+xrUrkSpJb8n1+RuxCjgLG9d8uAp84JvQyIINwRHsHwKjKXFu+tnx6v92UIA0YggqZAHPMFDBzKaYgEfQxgKq08XB41QragimuvDbcmimJKf+ywDDpdaFX4MXcFcqUyKlHmCqhtMUugiCgB2jtDfTs5jlVfRD+lzyO4+Pk+21dA5USyMu2u5oXBTgtR1jQtsCA5mDG5O3A93qSbNFy358aV6XDSw4+olnOK5ebxn1rP6GJ\/Uz8uXYn5kjRnhT9QdpulrZ3nVYl6FIZ7i7UA\/L3ChBd9zMmDHgawTIQHYd3M8\/Vx6+mDa69FDlD1rKmsYgsmajcMfXDpFdb9MRwu7F2CtrJ1BKNgqjR3GVKSlhYEwxJGUtPSKOk30gfVaUlx0rbF5EDyeyGVSf0YRI2+he1YoU9z\/oO1WvSuV02sr75AdsT4rY=\" \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    title: {\r\n        text: '$3 147',\r\n        sous-titre: 'D\u00e9penses totales',\r\n        left: 'center',\r\n        top: '42%',\r\n        textStyle: {\r\n            fontSize: 28,\r\n            fontWeight: 'bold',\r\n            color: '#333'\r\n        },\r\n        sousTitreStyle: {\r\n            fontSize: 14,\r\n            color: '#666'\r\n        }\r\n    },\r\n    tooltip: {\r\n        trigger: 'item'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'D\u00e9penses',\r\n            type: 'pie',\r\n            radius: ['60%', '80%'],\r\n            center: ['50%', '50%'],\r\n            \u00e9viterSuperpositionEtiquettes: false,\r\n            label: {\r\n                show: false\r\n            },\r\n            data: [\r\n                { value: 1048, name: 'Mat\u00e9riel' },\r\n                { value: 735, name: 'Abonnements SaaS' },\r\n                { value: 580, name: 'Fournitures de bureau' },\r\n                { value: 484, name: 'Voyages' }\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:eNqFU0tOwzAU3CNxB0uAvClS23waFbFAAnasgmCBunCa19SSawf7pVBQD9Rz9GLYLUkbB1Rv4ryZeZ+xrUrkSpJb8n1+RuxCjgLG9d8uAp84JvQyIINwRHsHwKjKXFu+tnx6v92UIA0YggqZAHPMFDBzKaYgEfQxgKq08XB41QragimuvDbcmimJKf+ywDDpdaFX4MXcFcqUyKlHmCqhtMUugiCgB2jtDfTs5jlVfRD+lzyO4+Pk+21dA5USyMu2u5oXBTgtR1jQtsCA5mDG5O3A93qSbNFy358aV6XDSw4+olnOK5ebxn1rP6GJ\/Uz8uXYn5kjRnhT9QdpulrZ3nVYl6FIZ7i7UA\/L3ChBd9zMmDHgawTIQHYd3M8\/Vx6+mDa69FDlD1rKmsYgsmajcMfXDpFdb9MRwu7F2CtrJ1BKNgqjR3GVKSlhYEwxJGUtPSKOk30gfVaUlx0rbF5EDyeyGVSf0YRI2+he1YoU9z\/oO1WvSuV02sr75AdsT4rY=\" \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:eNqFUz1vgzAQ3Sv1P1hqKy8MSfgIStWxUodKGYjUocpwwJFYcrBlG5K0yn+vTQoJ0Cq3APfeu\/O9M0IaJkryQr7v74gNwwzHRfvVZPBgFoQ++t40mFPvAugq\/cVWwgAnicTSXBM4Fg7NbBrVNWCEtPlg9tRL2lqJOQ66uyhEaRL2ZYFZ7I2hD2SbrWuUCp7TASETXCiLPfi+Ty\/QaTzHrd7T4L\/SURRdlz6\/th2MENww2bdUsc0GnZYZ3NG+QKNiqBfk88IfnKmEnT0PfT1YwzXq4cjmKB0sGQ4RBTmrXGkaTaz3hMb2sR6O1azLkcIzKfyDBLVg+TukyJc1Kg52vgK4xgGNO8bI02bKrdj\/avrgaVAiBwM9MzpTSA28couZBLHXmvIGKt+DQjoq1NPM\/bCTJAAJSapUZ4o1f4O+IQ7jSSdeFgXL0Mql5HZtN5RBHHTKlYIaOW3vSxvr0U2ymdPzD\/SU02U=\" 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=\"nIFRHCY\"><img alt=\"\" class=\"alignnone size-full wp-image-1317\" decoding=\"async\" height=\"1236\" sizes=\"(max-width: 1236px) 100vw, 1236px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768.png 1236w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768-300x300.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768-1024x1024.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768-150x150.png 150w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb3f33768-768x768.png 768w\" width=\"1236\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Affinage du layout et du style des segments<\/h2>\n<p>Ajouter des rayons de coin subtils et des marges de segment distinctes donne aux graphiques en anneau un aspect \u00e9l\u00e9gant et moderne.<\/p>\n<h3>1. Extr\u00e9mit\u00e9s arrondies et espacement entre les segments<\/h3>\n<p>Utilisez <code>itemStyle.borderRadius<\/code>avec des bordures blanches claires pour donner \u00e0 chaque segment d&#8217;arc une apparence douce et semblable \u00e0 une pilule :<\/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:eNqFUTtrwzAQ3gv9DwfFaPHgFIeCS6eGbFliSoeSQY4ujUC2jHRuMcb\/vac2jbHz+gah032PQ2dr0raCF+ju74Dh0Wn0GXz8lQHdcA2oZIkZiJysk58Ib55PEY851NaBU+uTjpNKN8FfpPNIxCCekkhsJiRNWObUGvaYhAcU1il064PRLIkvUV6tsY7HeNj9QlwkvmtF+wzScb+f8I0s0JydyO\/tdwbkGjwTsbOulEQYJumKng1UH4nrUUqSHO3guAv4kqbhf0mT+H8TC7ttSqzIixOfkeRxfpSsUGkJS23wpmjIyVvPe4EFz3ZDNBuSlg4R8lpukTVjyWYoDx1+6Z9\/ABegkrU=\" 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:eNqFUUtOwzAQ3SNxh5FQ5U0WKUqFFMSKzwFAiAXqwomndIQdR\/YEFEW5Dz1HLkZcSkP6oW9le95PHlsy2QJuoDk\/gx4eHaFP4fXnGtAMx4BCGkxBPDNp8nKtVhV4tvm7fEMRjdlcl4Fd0t7ESUVVSBLJbCIiEFfxRMx3SMRonrjWvcdOjYDMOoXucWM0jaNjlFurretrXCzWEEeJL6R4mUIynrc7fC0z1Acb+aX9TIFdhQciFtYZyYyhSZO1vYFqJ+L\/KCVZjrax3Qp8SF31\/5LE0e9O7mxeGSzYiz2fkeRytpU8UL4kdB5MpZlMt1IkT8r\/JhZFt0IPvvbcfRk8IZ0Oyfe+lDmCpswF1Vg0H66bSf\/SXn8D6gygng==\" \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: 'Utilisation du stockage',\r\n            type: 'pie',\r\n            radius: ['45%', '70%'],\r\n            itemStyle: {\r\n                borderRadius: 10,\r\n                borderColor: '#ffffff',\r\n                borderWidth: 4\r\n            },\r\n            label: {\r\n                show: true,\r\n                formatter: '{b}: {d}%'\r\n            },\r\n            data: [\r\n                { value: 40, name: 'Documents' },\r\n                { value: 25, name: 'Fichiers multim\u00e9dias' },\r\n                { value: 20, name: 'Donn\u00e9es syst\u00e8me' },\r\n                { value: 15, name: 'Espace libre' }\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:eNqFUUtOwzAQ3SNxh5FQ5U0WKUqFFMSKzwFAiAXqwomndIQdR\/YEFEW5Dz1HLkZcSkP6oW9le95PHlsy2QJuoDk\/gx4eHaFP4fXnGtAMx4BCGkxBPDNp8nKtVhV4tvm7fEMRjdlcl4Fd0t7ESUVVSBLJbCIiEFfxRMx3SMRonrjWvcdOjYDMOoXucWM0jaNjlFurretrXCzWEEeJL6R4mUIynrc7fC0z1Acb+aX9TIFdhQciFtYZyYyhSZO1vYFqJ+L\/KCVZjrax3Qp8SF31\/5LE0e9O7mxeGSzYiz2fkeRytpU8UL4kdB5MpZlMt1IkT8r\/JhZFt0IPvvbcfRk8IZ0Oyfe+lDmCpswF1Vg0H66bSf\/SXn8D6gygng==\" \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:eNqFUTtrwzAQ3gv9DwfFaPHgFIeCS6eGbFliSoeSQY4ujUC2jHRuMcb\/vac2jbHz+gah032PQ2dr0raCF+ju74Dh0Wn0GXz8lQHdcA2oZIkZiJysk58Ib55PEY851NaBU+uTjpNKN8FfpPNIxCCekkhsJiRNWObUGvaYhAcU1il064PRLIkvUV6tsY7HeNj9QlwkvmtF+wzScb+f8I0s0JydyO\/tdwbkGjwTsbOulEQYJumKng1UH4nrUUqSHO3guAv4kqbhf0mT+H8TC7ttSqzIixOfkeRxfpSsUGkJS23wpmjIyVvPe4EFz3ZDNBuSlg4R8lpukTVjyWYoDx1+6Z9\/ABegkrU=\" 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=\"UvWZRED\"><img alt=\"\" class=\"alignnone size-full wp-image-1318\" decoding=\"async\" height=\"1114\" sizes=\"(max-width: 1641px) 100vw, 1641px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a.png 1641w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a-300x204.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a-1024x695.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a-768x521.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bb4b5091a-1536x1043.png 1536w\" width=\"1641\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Meilleures pratiques strat\u00e9giques<\/h2>\n<ul>\n<li><strong>Optimisez le rapport entre le rayon int\u00e9rieur et le rayon ext\u00e9rieur :<\/strong>Maintenez un rayon int\u00e9rieur compris entre 50 % et 70 % du rayon ext\u00e9rieur afin de garder les segments suffisamment \u00e9pais pour un survol facile tout en pr\u00e9servant un espace important au centre.<\/li>\n<li><strong>Utilisez l\u2019espace central de mani\u00e8re intentionnelle :<\/strong>Utilisez la zone creuse centrale pour afficher le total g\u00e9n\u00e9ral ou la m\u00e9trique du segment s\u00e9lectionn\u00e9 au lieu de surcharger le p\u00e9rim\u00e8tre du graphique avec des bo\u00eetes de texte suppl\u00e9mentaires.<\/li>\n<li><strong>Limitez le nombre de tranches :<\/strong>Limitez l&#8217;anneau \u00e0 5 ou 6 segments principaux. Si vous avez de nombreuses petites cat\u00e9gories, regroupez-les dans une cat\u00e9gorie \u00ab Autres \u00bb afin d&#8217;\u00e9viter des arcs trop fins et illisibles.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Lors de la pr\u00e9sentation des r\u00e9partitions relatives des cat\u00e9gories, le Diagramme en donutoffre une alternative moderne et \u00e0 fort contraste aux diagrammes circulaires traditionnels en plein. En supprimant le noyau central, un diagramme en donut d\u00e9place l&#8217;accent visuel de la&#8230;<\/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-2069","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ECharts Doughnut Chart Guide | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Script hollow doughnut charts with custom labels using ECharts syntax in VPasCode, a free text to diagram tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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=\"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\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/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\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Diagramme en donut : proportions bas\u00e9es sur l&#8217;anneau et m\u00e9triques centrales\"}]},{\"@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 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\/fr\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","og_locale":"fr_FR","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\/fr\/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":{"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\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/","url":"https:\/\/www.vpascode.com\/fr\/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\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/doughnut-chart-ring-based-proportions-and-center-metrics-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/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\/fr\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/fr\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Diagramme en donut : proportions bas\u00e9es sur l&#8217;anneau et m\u00e9triques centrales"}]},{"@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\/2069","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=2069"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}