{"id":1393,"date":"2026-07-27T03:20:18","date_gmt":"2026-07-27T03:20:18","guid":{"rendered":"https:\/\/www.vpascode.com\/ru\/docs\/uncategorized\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships\/"},"modified":"2026-07-29T08:53:53","modified_gmt":"2026-07-29T08:53:53","slug":"tree-chart-hierarchical-data-and-structural-relationships-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","title":{"rendered":"Tree Chart: Hierarchical Data and Structural Relationships"},"content":{"rendered":"

When presenting structured data with clear parent-child relationships\u2014such as organizational charts, file system directories, decision trees, or taxonomy classifications\u2014the Tree Chart<\/strong> provides an intuitive visual framework. By arranging data nodes along branching paths, tree charts allow users to explore nested hierarchies and trace connections from a central root node down through sub-branches.<\/p>\n

The Mechanics of Tree Charts<\/h2>\n

In Apache ECharts, tree charts use type: 'tree'<\/code>. Unlike standard charts with explicit X and Y axes, tree charts construct layout positions automatically from a nested JavaScript object containing a name<\/code> and an optional children<\/code> array.<\/p>\n

1. Essential Setup<\/h3>\n

To construct a basic tree chart, define your nested data structure and set type: 'tree'<\/code> inside the series array:<\/p>\n

\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    tooltip: {\r\n        trigger: 'item',\r\n        triggerOn: 'mousemove'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'tree',\r\n            data: [{\r\n                name: 'CEO',\r\n                children: [\r\n                    {\r\n                        name: 'VP of Product',\r\n                        children: [\r\n                            { name: 'Product Manager' },\r\n                            { name: 'UX Designer' }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: 'VP of Engineering',\r\n                        children: [\r\n                            { name: 'Tech Lead' },\r\n                            { name: 'DevOps Engineer' }\r\n                        ]\r\n                    }\r\n                ]\r\n            }],\r\n            top: '5%',\r\n            left: '15%',\r\n            bottom: '5%',\r\n            right: '20%',\r\n            symbolSize: 10,\r\n            label: {\r\n                position: 'left',\r\n                verticalAlign: 'middle',\r\n                align: 'right',\r\n                fontSize: 12\r\n            },\r\n            leaves: {\r\n                label: {\r\n                    position: 'right',\r\n                    verticalAlign: 'middle',\r\n                    align: 'left'\r\n                }\r\n            },\r\n            expandAndCollapse: true,\r\n            animationDurationUpdate: 750\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>\n
 <\/p>\n
Advanced Layout Orientations<\/h2>\n
Tree charts can adapt to different space constraints and design requirements by changing their layout direction or switching to a radial display.<\/p>\n
1. Radial Tree Layout<\/h3>\n
Set layout: 'radial'<\/code> to project branches outward from a center point, ideal for wide hierarchies with many leaf nodes:<\/p>\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    tooltip: {\r\n        trigger: 'item',\r\n        triggerOn: 'mousemove'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'tree',\r\n            layout: 'radial',\r\n            data: [{\r\n                name: 'Root',\r\n                children: [\r\n                    {\r\n                        name: 'Branch A',\r\n                        children: [\r\n                            { name: 'A1' },\r\n                            { name: 'A2' },\r\n                            { name: 'A3' }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: 'Branch B',\r\n                        children: [\r\n                            { name: 'B1' },\r\n                            { name: 'B2' }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: 'Branch C',\r\n                        children: [\r\n                            { name: 'C1' },\r\n                            { name: 'C2' },\r\n                            { name: 'C3' },\r\n                            { name: 'C4' }\r\n                        ]\r\n                    }\r\n                ]\r\n            }],\r\n            top: '18%',\r\n            bottom: '14%',\r\n            right: '18%',\r\n            left: '18%',\r\n            symbolSize: 12,\r\n            initialTreeDepth: 2,\r\n            animationDurationUpdate: 750\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>\n
 <\/p>\n
Fine-Tuning Layout and Styling<\/h2>\n
Customizing node symbols, line curves, and level-specific formatting helps highlight key structural tiers across large diagrams.<\/p>\n
1. Curved Connectors and Level-Based Node Styling<\/h3>\n
Use lineStyle.curveness<\/code> to smooth connection lines, and define levels<\/code> array configs to style nodes according to their depth in the hierarchy:<\/p>\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    tooltip: {\r\n        trigger: 'item'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'tree',\r\n            orient: 'TB', \/\/ Top to Bottom orientation\r\n            data: [{\r\n                name: 'Project Root',\r\n                children: [\r\n                    {\r\n                        name: 'Frontend',\r\n                        children: [\r\n                            { name: 'React' },\r\n                            { name: 'Vue' }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: 'Backend',\r\n                        children: [\r\n                            { name: 'Node.js' },\r\n                            { name: 'Python' }\r\n                        ]\r\n                    }\r\n                ]\r\n            }],\r\n            top: '10%',\r\n            left: '10%',\r\n            bottom: '10%',\r\n            right: '10%',\r\n            symbol: 'emptyCircle',\r\n            symbolSize: 14,\r\n            edgeShape: 'polyline', \/\/ Uses crisp rectangular connections instead of curves\r\n            initialTreeDepth: 2,\r\n            lineStyle: {\r\n                width: 2,\r\n                color: '#ccc'\r\n            },\r\n            label: {\r\n                position: 'top',\r\n                fontSize: 12\r\n            },\r\n            leaves: {\r\n                label: {\r\n                    position: 'bottom'\r\n                }\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>\n
 <\/p>\n
Strategic Best Practices<\/h2>\n
    \n
  • Control Initial Collapse Depth:<\/strong> Set initialTreeDepth<\/code> (e.g., 1<\/code> or 2<\/code>) on large datasets to keep the chart clean on initial load while letting users click nodes to expand details.<\/li>\n
  • Choose the Right Orientation:<\/strong> Use horizontal (`LR`) or radial (`radial`) layouts for deep nested structures with long label text, and vertical (`TB`) layouts for shallow, wide org structures.<\/li>\n
  • Differentiate Leaf Nodes:<\/strong> Use the leaves<\/code> property to style end-nodes differently from parent container nodes so users can easily distinguish branches from endpoints.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    When presenting structured data with clear parent-child relationships\u2014such as organizational charts, file system directories, decision trees, or taxonomy classifications\u2014the Tree Chart provides an intuitive visual framework. By arranging data nodes along branching paths, tree charts allow users to explore nested…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1254,"menu_order":25,"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-1393","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Tree Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free 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\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/\" \/>\n<meta property=\"og:locale\" content=\"ru_RU\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Tree Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-29T08:53:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/ru\/wp-content\/uploads\/sites\/11\/2026\/07\/img_6a66cea84c9c2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 \u043c\u0438\u043d\u0443\u0442\u044b\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/\",\"name\":\"ECharts Tree Chart Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/07\\\/img_6a66cea84c9c2.png\",\"datePublished\":\"2026-07-27T03:20:18+00:00\",\"dateModified\":\"2026-07-29T08:53:53+00:00\",\"description\":\"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#breadcrumb\"},\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ru-RU\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/07\\\/img_6a66cea84c9c2.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/07\\\/img_6a66cea84c9c2.png\",\"width\":1794,\"height\":965},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"ECharts Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Tree Chart: Hierarchical Data and Structural Relationships\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ru-RU\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ru-RU\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/ru\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Tree Chart Guide | VPasCode Text to Diagram Tool","description":"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free 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\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","og_locale":"ru_RU","og_type":"article","og_title":"ECharts Tree Chart Guide | VPasCode Text to Diagram Tool","og_description":"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-29T08:53:53+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/ru\/wp-content\/uploads\/sites\/11\/2026\/07\/img_6a66cea84c9c2.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f":"2 \u043c\u0438\u043d\u0443\u0442\u044b"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","url":"https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","name":"ECharts Tree Chart Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/ru\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/ru\/wp-content\/uploads\/sites\/11\/2026\/07\/img_6a66cea84c9c2.png","datePublished":"2026-07-27T03:20:18+00:00","dateModified":"2026-07-29T08:53:53+00:00","description":"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#breadcrumb"},"inLanguage":"ru-RU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/"]}]},{"@type":"ImageObject","inLanguage":"ru-RU","@id":"https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/ru\/wp-content\/uploads\/sites\/11\/2026\/07\/img_6a66cea84c9c2.png","contentUrl":"https:\/\/www.vpascode.com\/ru\/wp-content\/uploads\/sites\/11\/2026\/07\/img_6a66cea84c9c2.png","width":1794,"height":965},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/ru\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/ru\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"ECharts Playbook","item":"https:\/\/www.vpascode.com\/ru\/docs\/vpascode-docs\/echarts-playbook\/"},{"@type":"ListItem","position":4,"name":"Tree Chart: Hierarchical Data and Structural Relationships"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/ru\/#website","url":"https:\/\/www.vpascode.com\/ru\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/ru\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/ru\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ru-RU"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/ru\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/ru\/","logo":{"@type":"ImageObject","inLanguage":"ru-RU","@id":"https:\/\/www.vpascode.com\/ru\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/ru\/wp-content\/uploads\/sites\/11\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/ru\/wp-content\/uploads\/sites\/11\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/ru\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/ru\/wp-json\/wp\/v2\/ld_docs\/1393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/ru\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/ru\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/ru\/wp-json\/wp\/v2\/users\/3"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/ru\/wp-json\/wp\/v2\/ld_docs\/1254"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/ru\/wp-json\/wp\/v2\/media?parent=1393"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/ru\/wp-json\/wp\/v2\/ld_collection?post=1393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}