{"id":2060,"date":"2026-07-27T02:16:13","date_gmt":"2026-07-27T02:16:13","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/docs\/uncategorized\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/"},"modified":"2026-07-27T02:16:13","modified_gmt":"2026-07-27T02:16:13","slug":"heatmap-chart-grid-based-density-and-pattern-mapping-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","title":{"rendered":"Wykres ciep\u0142a: mapowanie g\u0119sto\u015bci i wzorc\u00f3w oparte na siatce"},"content":{"rendered":"

Podczas analizy g\u0119sto\u015bci aktywno\u015bci, ci\u0105g\u0142ych trend\u00f3w lub korelacji mi\u0119dzy dwiema dyskretnymi wymiarami, Wykres ciep\u0142a<\/strong> zapewnia pot\u0119\u017cne rozwi\u0105zanie wizualne. Przyporz\u0105dkowuj\u0105c warto\u015bci danych do dynamicznego skali kolor\u00f3w na dwuwymiarowej siatce, wykresy ciep\u0142a pozwalaj\u0105 u\u017cytkownikom natychmiast zauwa\u017cy\u0107 godziny szczytowego u\u017cytkowania, sezonowe zatory lub relacje macierzowe<\/em> natychmiast \u2014 na przyk\u0142ad obci\u0105\u017cenie serwera w godzinach i dni tygodnia, dzienniki aktywno\u015bci u\u017cytkownik\u00f3w lub macierze korelacji mi\u0119dzy kategoriami.<\/p>\n

Zasada dzia\u0142ania wykres\u00f3w ciep\u0142a<\/h2>\n

W Apache ECharts wykresy ciep\u0142a u\u017cywaj\u0105 type: 'heatmap'<\/code> na dwuwymiarowej siatce kartezja\u0144skiej. Ka\u017cdy punkt danych oczekuje tablicy trzyelementowej w formacie [xAxisIndex, yAxisIndex, value]<\/code>. Wymagany visualMap<\/code> komponent mapuje warto\u015bci numeryczne na ci\u0105g\u0142y lub kawa\u0142kowy gradient kolor\u00f3w.<\/p>\n

1. Podstawowa konfiguracja<\/h3>\n

Aby stworzy\u0107 podstawowy wykres ciep\u0142a, zadeklaruj osie kategoryczne dla poziomej (xAxis<\/code>) oraz pionowej (yAxis<\/code>) skal, przeka\u017c [xIndex, yIndex, value]<\/code> tablice do danych serii i skonfiguruj komponent visualMap<\/code> komponent:<\/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 
const hours = ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'];\r\nconst days = ['Poniedzia\u0142ek', 'Wtorek', '\u015aroda', 'Czwartek', 'Pi\u0105tek'];\r\n\r\n\/\/ Format danych: [xIndex, yIndex, value]\r\nconst data = [\r\n    [0, 0, 5], [1, 0, 1], [2, 0, 0], [3, 0, 0], [4, 0, 12], [5, 0, 24], [6, 0, 38], [7, 0, 42], [8, 0, 35], [9, 0, 20], [10, 0, 10], [11, 0, 6],\r\n    [0, 1, 3], [1, 1, 0], [2, 1, 0], [3, 1, 1], [4, 1, 15], [5, 1, 28], [6, 1, 45], [7, 1, 50], [8, 1, 40], [9, 1, 22], [10, 1, 12], [11, 1, 4],\r\n    [0, 2, 2], [1, 2, 1], [2, 2, 0], [3, 2, 0], [4, 2, 11], [5, 2, 26], [6, 2, 41], [7, 2, 48], [8, 2, 38], [9, 2, 19], [10, 2, 8],  [11, 2, 3],\r\n    [0, 3, 4], [1, 3, 2], [2, 3, 0], [3, 3, 1], [4, 3, 14], [5, 3, 30], [6, 3, 49], [7, 3, 55], [8, 3, 42], [9, 3, 25], [10, 3, 15], [11, 3, 5],\r\n    [0, 4, 6], [1, 4, 3], [2, 4, 1], [3, 4, 2], [4, 4, 10], [5, 4, 20], [6, 4, 32], [7, 4, 36], [8, 4, 28], [9, 4, 18], [10, 4, 9],  [11, 4, 2]\r\n];\r\n\r\noption = {\r\n    tooltip: {\r\n        position: 'top'\r\n    },\r\n    grid: {\r\n        height: '50%',\r\n        top: '10%'\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: hours,\r\n        splitArea: { show: true }\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: days,\r\n        splitArea: { show: true }\r\n    },\r\n    visualMap: {\r\n        min: 0,\r\n        max: 60,\r\n        calculable: true,\r\n        orient: 'horizontal',\r\n        left: 'center',\r\n        bottom: '15%'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Obci\u0105\u017cenie systemu',\r\n            type: 'heatmap',\r\n            data: data,\r\n            label: {\r\n                show: true\r\n            },\r\n            emphasis: {\r\n                itemStyle: {\r\n                    shadowBlur: 10,\r\n                    shadowColor: 'rgba(0, 0, 0, 0.5)'\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
Zaawansowane techniki strukturalne<\/h2>\n
Wykresy ciep\u0142a mo\u017cna dostosowa\u0107 za pomoc\u0105 dyskretnych krok\u00f3w kolor\u00f3w, wyra\u017anych odst\u0119p\u00f3w mi\u0119dzy kom\u00f3rkami lub po\u0142\u0105czy\u0107 z wsp\u00f3\u0142rz\u0119dnymi kalendarzowymi w celu \u015bledzenia aktywno\u015bci przez ca\u0142y rok.<\/p>\n
1. Mapowanie kolor\u00f3w kawa\u0142kowe i niestandardowe odst\u0119py kom\u00f3rek<\/h3>\n
Zamiast ci\u0105g\u0142ego gradientu kolor\u00f3w, u\u017cyj kawa\u0142kowegovisualMap<\/code> aby grupowa\u0107 warto\u015bci w wyra\u017ane pasma operacyjne (np. Niski, \u015aredni, Wysoki):<\/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: { position: 'top' },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['Produkt A', 'Produkt B', 'Produkt C']\r\n    },\r\n    visualMap: {\r\n        type: 'piecewise',\r\n        min: 0,\r\n        max: 100,\r\n        left: 'center',\r\n        bottom: '5%',\r\n        orient: 'horizontal',\r\n        pieces: [\r\n            { min: 80, label: 'Wysoka wydajno\u015b\u0107', color: '#16a34a' },\r\n            { min: 40, max: 79, label: '\u015arednia', color: '#f59e0b' },\r\n            { max: 39, label: 'Wymaga uwagi', color: '#dc2626' }\r\n        ]\r\n    },\r\n    series: [\r\n        {\r\n            type: 'heatmap',\r\n            data: [\r\n                [0, 0, 85], [1, 0, 92], [2, 0, 78], [3, 0, 88],\r\n                [0, 1, 45], [1, 1, 55], [2, 1, 62], [3, 1, 35],\r\n                [0, 2, 25], [1, 2, 30], [2, 2, 18], [3, 2, 42]\r\n            ],\r\n            label: { show: true },\r\n            itemStyle: {\r\n                borderColor: '#ffffff',\r\n                borderWidth: 2\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
Dok\u0142adna dostosowanie uk\u0142adu i gradient\u00f3w kolor\u00f3w<\/h2>\n
Wybieranie czytelnych punkt\u00f3w kolor\u00f3w oraz w\u0142\u0105czanie obszar\u00f3w podzia\u0142u u\u0142atwia szybkie przegl\u0105danie du\u017cych siatek macierzy.<\/p>\n
1. Dostosowanie gradientu i wyr\u00f3wnanie etykiet<\/h3>\n
Skonfiguruj niestandardowe gradienty kolor\u00f3w z wieloma punktami wvisualMap.inRange<\/code> aby dopasowa\u0107 do motywu platformy:<\/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    grid: { containLabel: true },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['W\u0119ze\u0142 1', 'W\u0119ze\u0142 2', 'W\u0119ze\u0142 3', 'W\u0119ze\u0142 4']\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['Us\u0142uga X', 'Us\u0142uga Y', 'Us\u0142uga Z']\r\n    },\r\n    visualMap: {\r\n        min: 0,\r\n        max: 100,\r\n        calculable: true,\r\n        orient: 'horizontal',\r\n        left: 'center',\r\n        bottom: '0%',\r\n        inRange: {\r\n            color: ['#f0f9ff', '#0284c7', '#0f172a'] \/\/ Delikatny niebieski do ciemnego szaro-zielonego gradientu\r\n        }\r\n    },\r\n    series: [\r\n        {\r\n            type: 'heatmap',\r\n            data: [\r\n                [0, 0, 12], [1, 0, 45], [2, 0, 78], [3, 0, 95],\r\n                [0, 1, 34], [1, 1, 67], [2, 1, 89], [3, 1, 23],\r\n                [0, 2, 56], [1, 2, 78], [2, 2, 12], [3, 2, 88]\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
  • Zawsze dodajvisualMap<\/code>:<\/strong> Mapa cieplna bez legendy wizualnej zmusza u\u017cytkownik\u00f3w do zgadywania, co oznaczaj\u0105 kolory. Zawsze umieszczaj ci\u0105g\u0142\u0105 lub kawa\u0142kow\u0105visualMap<\/code> wyra\u017anie w pobli\u017cu kraw\u0119dzi p\u0142\u00f3tna.<\/li>\n
  • U\u017cyj obramowa\u0144 siatki do oddzielenia:<\/strong> Zastosuj cienkie bia\u0142e obramowania za pomoc\u0105itemStyle.borderColor: '#fff'<\/code> orazborderWidth: 1<\/code> lub 2<\/code> aby zachowa\u0107 wizualn\u0105 r\u00f3\u017cnorodno\u015b\u0107 poszczeg\u00f3lnych kom\u00f3rek w g\u0119stych macierzach.<\/li>\n
  • Upewnij si\u0119, \u017ce tekst ma wysok\u0105 kontrastowo\u015b\u0107:<\/strong> Je\u015bli etykiety numeryczne kom\u00f3rek s\u0105 aktywne (label.show: true<\/code>), sprawd\u017a, czy kolor tekstu nadal jest czytelny w stosunku do najja\u015bniejszych i najciemniejszych odcieni w paletzie kolor\u00f3w.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Podczas analizy g\u0119sto\u015bci aktywno\u015bci, ci\u0105g\u0142ych trend\u00f3w lub korelacji mi\u0119dzy dwiema dyskretnymi wymiarami, Wykres ciep\u0142a zapewnia pot\u0119\u017cne rozwi\u0105zanie wizualne. Przyporz\u0105dkowuj\u0105c warto\u015bci danych do dynamicznego skali kolor\u00f3w na dwuwymiarowej siatce, wykresy ciep\u0142a pozwalaj\u0105 u\u017cytkownikom natychmiast zauwa\u017cy\u0107 godziny szczytowego u\u017cytkowania, sezonowe zatory lub…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":15,"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-2060","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Heatmap Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Render matrix activity grids and density maps using ECharts heatmap scripts 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\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Heatmap Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Render matrix activity grids and density maps using ECharts heatmap scripts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-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\/img_6a66bf9404a54.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\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/\",\"name\":\"ECharts Heatmap Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bf9404a54.png\",\"datePublished\":\"2026-07-27T02:16:13+00:00\",\"description\":\"Render matrix activity grids and density maps using ECharts heatmap scripts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bf9404a54.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66bf9404a54.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-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 ciep\u0142a: mapowanie g\u0119sto\u015bci i wzorc\u00f3w oparte na siatce\"}]},{\"@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 Heatmap Guide | VPasCode Text to Diagram Tool","description":"Render matrix activity grids and density maps using ECharts heatmap scripts 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\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","og_locale":"pl_PL","og_type":"article","og_title":"ECharts Heatmap Guide | VPasCode Text to Diagram Tool","og_description":"Render matrix activity grids and density maps using ECharts heatmap scripts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bf9404a54.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\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","url":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","name":"ECharts Heatmap Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bf9404a54.png","datePublished":"2026-07-27T02:16:13+00:00","description":"Render matrix activity grids and density maps using ECharts heatmap scripts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bf9404a54.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66bf9404a54.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-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 ciep\u0142a: mapowanie g\u0119sto\u015bci i wzorc\u00f3w oparte na siatce"}]},{"@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\/2060","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=2060"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_collection?post=2060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}