{"id":2057,"date":"2026-07-27T02:21:52","date_gmt":"2026-07-27T02:21:52","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/docs\/uncategorized\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/"},"modified":"2026-07-27T02:21:52","modified_gmt":"2026-07-27T02:21:52","slug":"treemap-chart-hierarchical-volumes-and-nested-proportions-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/","title":{"rendered":"Gr\u00e1fico de Treemap: Volumes Hier\u00e1rquicos e Propor\u00e7\u00f5es Aninhadas"},"content":{"rendered":"

Quando apresentar conjuntos de dados hier\u00e1rquicos de m\u00faltiplos n\u00edveis ou exibir grandes an\u00e1lises visuais onde o espa\u00e7o \u00e9 escasso, o Gr\u00e1fico de Treemap<\/strong> fornece uma solu\u00e7\u00e3o visual eficiente. Ao organizar ret\u00e2ngulos aninhados em uma \u00e1rea delimitadora unificada, os treemaps codificam valores num\u00e9ricos pelo tamanho da \u00e1rea do ret\u00e2ngulo, permitindo que os usu\u00e1rios avaliem propor\u00e7\u00f5es relativas em estruturas aninhadas complexas<\/em>\u2014como o uso de espa\u00e7o em disco, receita de cat\u00e1logo de produtos ou aloca\u00e7\u00e3o de or\u00e7amento entre departamentos pais e filhos.<\/p>\n

Os Mecanismos dos Gr\u00e1ficos de Treemap<\/h2>\n

No Apache ECharts, os treemaps usam type: 'treemap'<\/code>. A s\u00e9rie espera um array estruturado em \u00e1rvore data<\/code> onde cada objeto cont\u00e9m um name<\/code>, um valor quantitativo value<\/code>, e um array opcional children<\/code> para n\u00edveis aninhados mais profundos.<\/p>\n

1. Configura\u00e7\u00e3o B\u00e1sica<\/h3>\n

Para construir um treemap b\u00e1sico, defina um array de dados hier\u00e1rquico com children<\/code> e defina type: 'treemap'<\/code> dentro da configura\u00e7\u00e3o da s\u00e9rie:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite o ECharts no 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        formatter: '{b}: ${c}'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'treemap',\r\n            data: [\r\n                {\r\n                    name: 'Eletr\u00f4nicos',\r\n                    value: 400,\r\n                    children: [\r\n                        { name: 'Celulares', value: 240 },\r\n                        { name: 'Notebooks', value: 160 }\r\n                    ]\r\n                },\r\n                {\r\n                    name: 'Vestu\u00e1rio',\r\n                    value: 300,\r\n                    children: [\r\n                        { name: 'Camisas', value: 180 },\r\n                        { name: 'Sapatos', value: 120 }\r\n                    ]\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>
\nEdite o ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
T\u00e9cnicas Estruturais Avan\u00e7adas<\/h2>\n
Os treemaps podem ser configurados com regras de estiliza\u00e7\u00e3o de m\u00faltiplos n\u00edveis, mapeamentos de gradientes de cor e controles interativos de navega\u00e7\u00e3o para \u00e1rvores de dados profundas.<\/p>\n
1. Navega\u00e7\u00e3o por Caminho com V\u00e1rias N\u00edveis<\/h3>\n
Habilite as legendas superiores e a navega\u00e7\u00e3o por caminho para permitir que os usu\u00e1rios identifiquem categorias de n\u00edvel superior e naveguem suavemente em diret\u00f3rios aninhados:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite o ECharts no 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        formatter: '{b}: {c} GB'\r\n    },\r\n    legend: {\r\n        top: '5%',\r\n        left: 'center',\r\n        data: ['Unidade do Sistema (C:)', 'Unidade de Dados (D:)']\r\n    },\r\n    series: [\r\n        {\r\n            type: 'treemap',\r\n            top: '18%',\r\n            bottom: '12%',\r\n            leafDepth: 1, \/\/ Mostra um n\u00edvel por vez com clique para navegar para baixo\r\n            breadcrumb: {\r\n                show: true,\r\n                left: 'center',\r\n                bottom: '2%'\r\n            },\r\n            levels: [\r\n                {\r\n                    itemStyle: {\r\n                        borderColor: '#555',\r\n                        borderWidth: 2,\r\n                        gapWidth: 2\r\n                    }\r\n                },\r\n                {\r\n                    colorSaturation: [0.3, 0.6],\r\n                    itemStyle: {\r\n                        borderWidth: 1,\r\n                        gapWidth: 1,\r\n                        borderColorSaturation: 0.7\r\n                    }\r\n                }\r\n            ],\r\n            data: [\r\n                {\r\n                    name: 'Unidade do Sistema (C:)',\r\n                    value: 500,\r\n                    children: [\r\n                        { name: 'Windows', value: 120 },\r\n                        { name: 'Arquivos de Programas', value: 230 },\r\n                        { name: 'Usu\u00e1rios', value: 150 }\r\n                    ]\r\n                },\r\n                {\r\n                    name: 'Unidade de Dados (D:)',\r\n                    value: 800,\r\n                    children: [\r\n                        { name: 'M\u00eddia', value: 450 },\r\n                        { name: 'Backup', value: 250 },\r\n                        { name: 'Projetos', value: 100 }\r\n                    ]\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>
\nEdite o ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Ajuste Preciso de Layout e Estilo<\/h2>\n
Aplicar larguras de espa\u00e7amento, bordas limpas e cores distintas para cada n\u00edvel mant\u00e9m os ret\u00e2ngulos aninhados organizados e visualmente leg\u00edveis.<\/p>\n
1. Bordas de C\u00e9lula Personalizadas e Alinhamento de R\u00f3tulos<\/h3>\n
Ajuste gapWidth<\/code> e label<\/code>configura\u00e7\u00f5es para manter limites distintos entre cont\u00eaineres pais e segmentos filhos:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite o ECharts no 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    series: [\r\n        {\r\n            type: 'treemap',\r\n            roam: false, \/\/ Desativa o zoom e deslocamento manuais\r\n            label: {\r\n                show: true,\r\n                formatter: '{b}n{c}'\r\n            },\r\n            itemStyle: {\r\n                borderColor: '#ffffff',\r\n                borderWidth: 2,\r\n                gapWidth: 2\r\n            },\r\n            data: [\r\n                {\r\n                    name: 'Am\u00e9rica do Norte',\r\n                    value: 520,\r\n                    itemStyle: { color: '#5470c6' }\r\n                },\r\n                {\r\n                    name: 'Europa',\r\n                    value: 380,\r\n                    itemStyle: { color: '#91cc75' }\r\n                },\r\n                {\r\n                    name: '\u00c1sia-Pac\u00edfico',\r\n                    value: 450,\r\n                    itemStyle: { color: '#fac858' }\r\n                },\r\n                {\r\n                    name: 'Am\u00e9rica Latina',\r\n                    value: 190,\r\n                    itemStyle: { color: '#ee6666' }\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>
\nEdite o ECharts no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Melhores Pr\u00e1ticas Estrat\u00e9gicas<\/h2>\n
    \n
  • Use gapWidth<\/code> para visibilidade de aninhamento:<\/strong>Adicionar um pequeno gapWidth<\/code> (por exemplo, 2px a 4px) entre ret\u00e2ngulos aninhados cria espa\u00e7amento claro entre categorias pai e itens filhos.<\/li>\n
  • Habilite o caminho de navega\u00e7\u00e3o para hierarquias profundas:<\/strong> Quando exibindo 3 ou mais n\u00edveis aninhados, habilite `breadcrumb: { show: true }` para que os usu\u00e1rios possam rastrear facilmente sua localiza\u00e7\u00e3o e navegar de volta.<\/li>\n
  • Mantenha os r\u00f3tulos concisos:<\/strong>O texto pode facilmente transbordar em ret\u00e2ngulos folha pequenos. Combine nomes curtos com dicas de ferramenta ou use leafDepth<\/code> para ocultar pequenos sub-ret\u00e2ngulos at\u00e9 o zoom ser aplicado.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Quando apresentar conjuntos de dados hier\u00e1rquicos de m\u00faltiplos n\u00edveis ou exibir grandes an\u00e1lises visuais onde o espa\u00e7o \u00e9 escasso, o Gr\u00e1fico de Treemap fornece uma solu\u00e7\u00e3o visual eficiente. Ao organizar ret\u00e2ngulos aninhados em uma \u00e1rea delimitadora unificada, os treemaps codificam…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":17,"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-2057","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Treemap Chart Guide | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your 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\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Treemap Chart Guide | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your free text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-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_6a66c1310caac.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/\",\"name\":\"ECharts Treemap Chart Guide | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1310caac.png\",\"datePublished\":\"2026-07-27T02:21:52+00:00\",\"description\":\"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your free text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1310caac.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1310caac.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gr\u00e1fico de Treemap: Volumes Hier\u00e1rquicos e Propor\u00e7\u00f5es Aninhadas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Treemap Chart Guide | VPasCode Text to Diagram Guide","description":"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your 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\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/","og_locale":"pt_PT","og_type":"article","og_title":"ECharts Treemap Chart Guide | VPasCode Text to Diagram Guide","og_description":"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your free text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1310caac.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tempo estimado de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/","url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/","name":"ECharts Treemap Chart Guide | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1310caac.png","datePublished":"2026-07-27T02:21:52+00:00","description":"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your free text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1310caac.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1310caac.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pt\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Gr\u00e1fico de Treemap: Volumes Hier\u00e1rquicos e Propor\u00e7\u00f5es Aninhadas"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pt\/#website","url":"https:\/\/www.vpascode.com\/pt\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pt\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs\/2057","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/media?parent=2057"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_collection?post=2057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}