{"id":2050,"date":"2026-07-27T03:20:18","date_gmt":"2026-07-27T03:20:18","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/docs\/uncategorized\/tree-chart-hierarchical-data-and-structural-relationships-guide\/"},"modified":"2026-07-27T03:20:18","modified_gmt":"2026-07-27T03:20:18","slug":"tree-chart-hierarchical-data-and-structural-relationships-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","title":{"rendered":"Wykres drzewa: dane hierarchiczne i relacje strukturalne"},"content":{"rendered":"

Podczas prezentowania danych strukturalnych z jasnymi relacjami rodzic-dziecko \u2013 takimi jak wykresy organizacyjne, katalogi systemu plik\u00f3w, drzewa decyzyjne lub klasyfikacje taksonomiczne \u2013 Wykres drzewa<\/strong> zapewnia intuicyjny uk\u0142ad wizualny. Ustawiaj\u0105c w\u0119z\u0142y danych wzd\u0142u\u017c ga\u0142\u0119zi, wykresy drzewa pozwalaj\u0105 u\u017cytkownikom na eksploracj\u0119 zagnie\u017cd\u017conych hierarchii i \u015bledzenie po\u0142\u0105cze\u0144 od g\u0142\u00f3wnego w\u0119z\u0142a centralnego poprzez podga\u0142\u0119zie.<\/p>\n

Zasady dzia\u0142ania wykres\u00f3w drzewa<\/h2>\n

W Apache ECharts wykresy drzewa u\u017cywaj\u0105 type: 'tree'<\/code>. W przeciwie\u0144stwie do standardowych wykres\u00f3w z jawnymi osiami X i Y, wykresy drzewa automatycznie tworz\u0105 po\u0142o\u017cenie uk\u0142adu na podstawie zagnie\u017cd\u017conego obiektu JavaScript zawieraj\u0105cego name<\/code> oraz opcjonalny children<\/code>tablic\u0119.<\/p>\n

1. Podstawowa konfiguracja<\/h3>\n

Aby stworzy\u0107 podstawowy wykres drzewa, zdefiniuj swoj\u0105 zagnie\u017cd\u017con\u0105 struktur\u0119 danych i ustaw type: 'tree'<\/code> wewn\u0105trz tablicy series:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj ECharts w 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        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: 'Wiceprezes ds. Produktu',\r\n                        children: [\r\n                            { name: 'Menad\u017cer Produktu' },\r\n                            { name: 'Dy\u017curny Projektant UX' }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: 'Wiceprezes ds. In\u017cynierii',\r\n                        children: [\r\n                            { name: 'Kierownik Techniczny' },\r\n                            { name: 'In\u017cynier DevOps' }\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><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdytuj ECharts w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Zaawansowane orientacje uk\u0142adu<\/h2>\n
Wykresy drzewa mog\u0105 dostosowywa\u0107 si\u0119 do r\u00f3\u017cnych ogranicze\u0144 przestrzeni i wymaga\u0144 projektowych poprzez zmian\u0119 kierunku uk\u0142adu lub prze\u0142\u0105czenie na wy\u015bwietlanie okr\u0105g\u0142e.<\/p>\n
1. Uk\u0142ad drzewa okr\u0105g\u0142ego<\/h3>\n
Ustaw layout: 'radial'<\/code> aby rozprowadzi\u0107 ga\u0142\u0119zie na zewn\u0105trz od punktu centralnego, co jest idealne dla szerokich hierarchii z wieloma w\u0119z\u0142ami li\u015bciowymi:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj ECharts w 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        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: 'Pocz\u0105tek',\r\n                children: [\r\n                    {\r\n                        name: 'Ga\u0142\u0105\u017a 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: 'Ga\u0142\u0105\u017a B',\r\n                        children: [\r\n                            { name: 'B1' },\r\n                            { name: 'B2' }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: 'Ga\u0142\u0105\u017a 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><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdytuj ECharts w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Dostosowywanie uk\u0142adu i stylizacji<\/h2>\n
Dostosowywanie symboli w\u0119z\u0142\u00f3w, krzywizn linii oraz formatowania specyficznego dla poziomu pomaga wyr\u00f3\u017cni\u0107 kluczowe poziomy strukturalne na du\u017cych diagramach.<\/p>\n
1. \u0141agodne po\u0142\u0105czenia i stylizacja w\u0119z\u0142\u00f3w zgodnie z poziomem<\/h3>\n
U\u017cyj lineStyle.curveness<\/code> aby wyr\u00f3wna\u0107 linie po\u0142\u0105cze\u0144, oraz zdefiniuj poziomy<\/code>konfiguracje tablicy, aby stylizowa\u0107 w\u0119z\u0142y zgodnie z ich g\u0142\u0119boko\u015bci\u0105 w hierarchii:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj ECharts w 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        trigger: 'item'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'tree',\r\n            orient: 'TB', \/\/ Kierunek od g\u00f3ry do do\u0142u\r\n            data: [{\r\n                name: 'Korze\u0144 projektu',\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', \/\/ U\u017cywa ostrej prostok\u0105tnej po\u0142\u0105czenia zamiast krzywych\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><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdytuj ECharts w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Strategiczne najlepsze praktyki<\/h2>\n
    \n
  • Kontroluj g\u0142\u0119boko\u015b\u0107 pocz\u0105tkowego zwini\u0119cia:<\/strong> Ustaw initialTreeDepth<\/code> (np. 1<\/code> lub 2<\/code>) na du\u017cych zestawach danych, aby utrzyma\u0107 wykres czysty podczas pocz\u0105tkowego \u0142adowania, pozwalaj\u0105c u\u017cytkownikom klikn\u0105\u0107 w w\u0119z\u0142y, aby rozwin\u0105\u0107 szczeg\u00f3\u0142y.<\/li>\n
  • Wybierz odpowiedni kierunek:<\/strong> U\u017cyj poziomych (`LR`) lub promieniowych (`radial`) uk\u0142ad\u00f3w dla g\u0142\u0119boko zagnie\u017cd\u017conych struktur z d\u0142ugimi etykietami, a pionowych (`TB`) uk\u0142ad\u00f3w dla powierzchniowych, szerokich struktur organizacyjnych.<\/li>\n
  • Rozr\u00f3\u017cnianie w\u0119z\u0142\u00f3w li\u015bciowych:<\/strong> U\u017cyj leaves<\/code> w\u0142a\u015bciwo\u015bci, aby inaczej stylizowa\u0107 w\u0119z\u0142y ko\u0144cowe ni\u017c w\u0119z\u0142y nadrz\u0119dne, dzi\u0119ki czemu u\u017cytkownicy mog\u0105 \u0142atwo rozr\u00f3\u017cni\u0107 ga\u0142\u0119zie od ko\u0144c\u00f3w.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Podczas prezentowania danych strukturalnych z jasnymi relacjami rodzic-dziecko \u2013 takimi jak wykresy organizacyjne, katalogi systemu plik\u00f3w, drzewa decyzyjne lub klasyfikacje taksonomiczne \u2013 Wykres drzewa zapewnia intuicyjny uk\u0142ad wizualny. Ustawiaj\u0105c w\u0119z\u0142y danych wzd\u0142u\u017c ga\u0142\u0119zi, wykresy drzewa pozwalaj\u0105 u\u017cytkownikom na eksploracj\u0119 zagnie\u017cd\u017conych…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"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-2050","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\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\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\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-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_6a66cea84c9c2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/\",\"name\":\"ECharts Tree Chart Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66cea84c9c2.png\",\"datePublished\":\"2026-07-27T03:20:18+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\\\/pl\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66cea84c9c2.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66cea84c9c2.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wykres drzewa: dane hierarchiczne i relacje strukturalne\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/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\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","og_locale":"pl_PL","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\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cea84c9c2.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Szacowany czas czytania":"2 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","url":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","name":"ECharts Tree Chart Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cea84c9c2.png","datePublished":"2026-07-27T03:20:18+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\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cea84c9c2.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cea84c9c2.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pl\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Wykres drzewa: dane hierarchiczne i relacje strukturalne"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pl\/#website","url":"https:\/\/www.vpascode.com\/pl\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pl\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs\/2050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/media?parent=2050"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_collection?post=2050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}