{"id":2062,"date":"2026-07-27T02:17:47","date_gmt":"2026-07-27T02:17:47","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/graph-chart-network-topology-and-relationship-mapping-guide\/"},"modified":"2026-07-27T02:17:47","modified_gmt":"2026-07-27T02:17:47","slug":"graph-chart-network-topology-and-relationship-mapping-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/","title":{"rendered":"Graphique : Topologie du r\u00e9seau et cartographie des relations"},"content":{"rendered":"

Lors de la cartographie de r\u00e9seaux interconnect\u00e9s, de hi\u00e9rarchies structurelles ou de relations complexes entre entit\u00e9s, le Graphique<\/strong> (ou graphique de r\u00e9seau) est le cadre visuel id\u00e9al. En affichant les \u00e9l\u00e9ments comme des n\u0153uds et les connexions comme des liens orient\u00e9s ou non orient\u00e9s, les graphiques permettent aux utilisateurs d’explorer des clusters, des arbres de d\u00e9pendances et des flux relationnels<\/em> que les tableaux standards ne peuvent pas transmettre\u2014par exemple les architectures de microservices, les interactions dans les r\u00e9seaux sociaux ou les graphes de connaissances.<\/p>\n

Le fonctionnement des graphiques<\/h2>\n

Dans Apache ECharts, les graphiques utilisent type : 'graph'<\/code>. Au lieu de mapper directement des valeurs num\u00e9riques aux coordonn\u00e9es horizontales et verticales, un graphique prend une collection explicite de n\u0153uds<\/code> (ou data<\/code>) et links<\/code> (ou ar\u00eates<\/code>). ECharts organise ensuite ces n\u0153uds \u00e0 l’aide de positions de coordonn\u00e9es fixes, de mises en page circulaires ou d’un moteur physique dynamique \u00e0 force dirig\u00e9e.<\/p>\n

1. Configuration essentielle<\/h3>\n

Pour cr\u00e9er un graphique r\u00e9seau de base en utilisant la physique \u00e0 force dirig\u00e9e, d\u00e9clarez vos n\u0153uds \u00e0 l’int\u00e9rieur de data<\/code>, mappez les connexions \u00e0 l’int\u00e9rieur de links<\/code>, et d\u00e9finissez layout : 'force'<\/code>:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    tooltip: {},\r\n    legend: {\r\n        data: ['Services', 'Bases de donn\u00e9es']\r\n    },\r\n    series: [\r\n        {\r\n            name: 'R\u00e9seau du syst\u00e8me',\r\n            type: 'graph',\r\n            layout: 'force',\r\n            roam: true, \/\/ Permet le zoom et le d\u00e9placement\r\n            label: {\r\n                show: true,\r\n                position: 'right'\r\n            },\r\n            force: {\r\n                repulsion: 100,\r\n                edgeLength: 80\r\n            },\r\n            data: [\r\n                { id: '0', name: 'Passerelle API', symbolSize: 30, category: 0 },\r\n                { id: '1', name: 'Service d'authentification', symbolSize: 20, category: 0 },\r\n                { id: '2', name: 'Service de commande', symbolSize: 20, category: 0 },\r\n                { id: '3', name: 'Base de donn\u00e9es Utilisateurs', symbolSize: 25, category: 1 },\r\n                { id: '4', name: 'Base de donn\u00e9es Commandes', symbolSize: 25, category: 1 }\r\n            ],\r\n            links: [\r\n                { source: '0', target: '1' },\r\n                { source: '0', target: '2' },\r\n                { source: '1', target: '3' },\r\n                { source: '2', target: '4' }\r\n            ],\r\n            categories: [\r\n                { name: 'Services' },\r\n                { name: 'Bases de donn\u00e9es' }\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Techniques structurelles avanc\u00e9es<\/h2>\n
Les graphiques en diagramme prennent en charge des moteurs de disposition alternatifs tels que l’alignement en anneau circulaire ou des fl\u00e8ches orient\u00e9es pour montrer clairement les d\u00e9pendances des donn\u00e9es.<\/p>\n
1. Disposition circulaire avec fl\u00e8ches de lien orient\u00e9es<\/h3>\n
D\u00e9finir layout: 'circular'<\/code> pour organiser les n\u0153uds dans une structure d’anneau propre, et activer les fl\u00e8ches d’ar\u00eates pour montrer les relations directionnelles entre les composants :<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    tooltip: {},\r\n    series: [\r\n        {\r\n            type: 'graph',\r\n            layout: 'circular',\r\n            roam: true,\r\n            label: {\r\n                show: true,\r\n                position: 'outside'\r\n            },\r\n            edgeSymbol: ['none', 'arrow'], \/\/ Dessiner des fl\u00e8ches aux extr\u00e9mit\u00e9s des liens\r\n            edgeSymbolSize: [0, 8],\r\n            data: [\r\n                { id: 'A', name: 'N\u0153ud A', symbolSize: 24 },\r\n                { id: 'B', name: 'N\u0153ud B', symbolSize: 24 },\r\n                { id: 'C', name: 'N\u0153ud C', symbolSize: 24 },\r\n                { id: 'D', name: 'N\u0153ud D', symbolSize: 24 },\r\n                { id: 'E', name: 'N\u0153ud E', symbolSize: 24 }\r\n            ],\r\n            links: [\r\n                { source: 'A', target: 'B' },\r\n                { source: 'B', target: 'C' },\r\n                { source: 'C', target: 'D' },\r\n                { source: 'D', target: 'E' },\r\n                { source: 'E', target: 'A' },\r\n                { source: 'A', target: 'C' }\r\n            ],\r\n            lineStyle: {\r\n                color: '#5470c6',\r\n                width: 2,\r\n                curveness: 0.2 \/\/ Courber les lignes de connexion pour \u00e9viter les chevauchements\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Affinage de la disposition et du style des n\u0153uds<\/h2>\n
Ajuster la courbure des ar\u00eates, les ombres des bordures des n\u0153uds et les options d’interaction permet de maintenir lisibles les groupes denses de r\u00e9seaux sur les pages web interactives.<\/p>\n
1. Couleurs personnalis\u00e9es des cat\u00e9gories de n\u0153uds et physique de force<\/h3>\n
Ajuster les valeurs de r\u00e9pulsion et les styles de ligne pour cr\u00e9er des groupes structur\u00e9s et visuellement s\u00e9par\u00e9s :<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    legend: {\r\n        top: '5%',\r\n        left: 'center'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'graph',\r\n            layout: 'force',\r\n            roam: true,\r\n            draggable: true,\r\n            force: {\r\n                repulsion: 250,\r\n                gravity: 0.1,\r\n                edgeLength: [50, 100]\r\n            },\r\n            categories: [\r\n                { name: 'Frontend', itemStyle: { color: '#5470c6' } },\r\n                { name: 'Backend', itemStyle: { color: '#91cc75' } },\r\n                { name: 'Infrastructure', itemStyle: { color: '#fac858' } }\r\n            ],\r\n            data: [\r\n                { name: 'Application Web', category: 0, symbolSize: 32 },\r\n                { name: 'Application Mobile', category: 0, symbolSize: 28 },\r\n                { name: 'Passerelle API', category: 1, symbolSize: 26 },\r\n                { name: 'Microservice A', category: 1, symbolSize: 22 },\r\n                { name: 'Microservice B', category: 1, symbolSize: 22 },\r\n                { name: 'Cache Redis', category: 2, symbolSize: 20 },\r\n                { name: 'PostgreSQL', category: 2, symbolSize: 24 }\r\n            ],\r\n            links: [\r\n                { source: 'Application Web', target: 'Passerelle API' },\r\n                { source: 'Application Mobile', target: 'Passerelle API' },\r\n                { source: 'Passerelle API', target: 'Microservice A' },\r\n                { source: 'Passerelle API', target: 'Microservice B' },\r\n                { source: 'Microservice A', target: 'Cache Redis' },\r\n                { source: 'Microservice B', target: 'PostgreSQL' }\r\n            ],\r\n            lineStyle: {\r\n                color: 'source', \/\/ Colorer l'ar\u00eate en fonction de la couleur du n\u0153ud source\r\n                width: 2,\r\n                curveness: 0.1\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Meilleures pratiques strat\u00e9giques<\/h2>\n
    \n
  • Activer roam: true<\/code> pour la navigation :<\/strong>Les r\u00e9seaux interactifs grandissent rapidement. Activer la navigation avec zoom et d\u00e9filement permet aux utilisateurs de se concentrer sur des groupes sp\u00e9cifiques sans se sentir \u00e9touff\u00e9s.<\/li>\n
  • Appliquer courbure<\/code> aux ar\u00eates :<\/strong>D\u00e9finir une l\u00e9g\u00e8re courbure (par exemple, lineStyle.curveness: 0.1<\/code> \u00e0 0.2<\/code>) emp\u00eache les liens bidirectionnels entre deux n\u0153uds identiques de se superposer en une seule ligne.<\/li>\n
  • R\u00e9pulsion de la force physique d’\u00e9quilibre :<\/strong> Ajuster force.repulsion<\/code> avec soin. Les valeurs trop faibles feront que les n\u0153uds se superposeront en un groupe dense, tandis que les valeurs trop \u00e9lev\u00e9es pousseront les n\u0153uds compl\u00e8tement hors du canevas visible.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Lors de la cartographie de r\u00e9seaux interconnect\u00e9s, de hi\u00e9rarchies structurelles ou de relations complexes entre entit\u00e9s, le Graphique (ou graphique de r\u00e9seau) est le cadre visuel id\u00e9al. En affichant les \u00e9l\u00e9ments comme des n\u0153uds et les connexions comme des liens…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":16,"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-2062","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Graph Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Map complex node-edge relationship networks with ECharts graph charts 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\/graph-chart-network-topology-and-relationship-mapping-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Graph Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.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\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/\",\"name\":\"ECharts Graph 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\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Screenshot-2026-07-27-at-10.20.29-AM.png\",\"datePublished\":\"2026-07-27T02:17:47+00:00\",\"description\":\"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Screenshot-2026-07-27-at-10.20.29-AM.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Screenshot-2026-07-27-at-10.20.29-AM.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-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\":\"Graphique : Topologie du r\u00e9seau et cartographie des relations\"}]},{\"@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 Graph Chart Guide | VPasCode Text to Diagram Tool","description":"Map complex node-edge relationship networks with ECharts graph charts 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\/graph-chart-network-topology-and-relationship-mapping-guide\/","og_locale":"fr_FR","og_type":"article","og_title":"ECharts Graph Chart Guide | VPasCode Text to Diagram Tool","og_description":"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.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\/graph-chart-network-topology-and-relationship-mapping-guide\/","url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/","name":"ECharts Graph 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\/graph-chart-network-topology-and-relationship-mapping-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.png","datePublished":"2026-07-27T02:17:47+00:00","description":"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-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":"Graphique : Topologie du r\u00e9seau et cartographie des relations"}]},{"@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\/2062","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=2062"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}