{"id":2063,"date":"2026-07-27T02:16:13","date_gmt":"2026-07-27T02:16:13","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","title":{"rendered":"Graphique de cartographie thermique : cartographie de densit\u00e9 et de motifs bas\u00e9e sur une grille"},"content":{"rendered":"

Lors de l’analyse de la densit\u00e9 d’activit\u00e9, des tendances continues ou des corr\u00e9lations sur deux dimensions discr\u00e8tes, le Graphique de cartographie thermique<\/strong> fournit une solution visuelle puissante. En cartographiant les valeurs de donn\u00e9es sur une \u00e9chelle de couleur dynamique \u00e0 travers une grille bidimensionnelle, les cartographies thermiques permettent aux utilisateurs d’identifier instantan\u00e9ment les heures de pointe d’utilisation, les goulets d’\u00e9tranglement saisonniers ou les relations matricielles<\/em> instantan\u00e9ment, par exemple la charge du serveur par heure et par jour de la semaine, les journaux d’activit\u00e9 des utilisateurs ou les matrices de corr\u00e9lation intercat\u00e9gorielles.<\/p>\n

Le fonctionnement des cartographies thermiques<\/h2>\n

Dans Apache ECharts, les cartographies thermiques utilisent type : 'heatmap'<\/code> sur une grille cart\u00e9sienne bidimensionnelle. Chaque point de donn\u00e9es attend un tableau \u00e0 trois \u00e9l\u00e9ments format\u00e9 comme [indexAxeX, indexAxeY, valeur]<\/code>. Un composant requis visualMap<\/code> map les valeurs num\u00e9riques \u00e0 un gradient de couleur continu ou par morceaux.<\/p>\n

1. Configuration essentielle<\/h3>\n

Pour cr\u00e9er un graphique de cartographie thermique de base, d\u00e9clarez des axes cat\u00e9goriels pour les \u00e9chelles horizontale (xAxis<\/code>) et verticale (yAxis<\/code>) et passez [xIndex, yIndex, valeur]<\/code> des tableaux dans vos donn\u00e9es de s\u00e9rie, et configurez un composant visualMap<\/code> :<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
const heures = ['12h', '2h', '4h', '6h', '8h', '10h', '12h', '14h', '16h', '18h', '20h', '22h'];\r\nconst jours = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi'];\r\n\r\n\/\/ Format des donn\u00e9es : [indexAxeX, indexAxeY, valeur]\r\nconst donnees = [\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: heures,\r\n        splitArea: { show: true }\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: jours,\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: 'Charge du syst\u00e8me',\r\n            type: 'heatmap',\r\n            data: donnees,\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>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Techniques structurelles avanc\u00e9es<\/h2>\n
Les cartographies thermiques peuvent \u00eatre personnalis\u00e9es avec des \u00e9tapes de couleur discr\u00e8tes, des espacements distincts entre les cellules, ou combin\u00e9es avec des coordonn\u00e9es calendaires pour suivre l’activit\u00e9 sur une ann\u00e9e enti\u00e8re.<\/p>\n
1. Mappage de couleur par morceaux et espacement personnalis\u00e9 des cellules<\/h3>\n
Au lieu d’un d\u00e9grad\u00e9 de couleur continu, utilisez un d\u00e9grad\u00e9 par morceauxvisualMap<\/code> pour regrouper les valeurs en bandes op\u00e9rationnelles distinctes (par exemple : Faible, Moyen, \u00c9lev\u00e9) :<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    tooltip: { position: 'top' },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['T1', 'T2', 'T3', 'T4']\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['Produit A', 'Produit B', 'Produit 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: 'Haute performance', color: '#16a34a' },\r\n            { min: 40, max: 79, label: 'Mod\u00e9r\u00e9', color: '#f59e0b' },\r\n            { max: 39, label: '\u00c0 surveiller', 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>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Affinage du layout et des d\u00e9grad\u00e9s de couleur<\/h2>\n
Le choix de points de couleur lisibles et l’activation des zones divis\u00e9es rendent le balayage des grandes grilles matricielles sans effort.<\/p>\n
1. Personnalisation du d\u00e9grad\u00e9 et alignement des \u00e9tiquettes<\/h3>\n
Configurez des rampes de couleur personnalis\u00e9es \u00e0 plusieurs points dansvisualMap.inRange<\/code> pour correspondre au th\u00e8me de votre plateforme :<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    grid: { containLabel: true },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['N\u0153ud 1', 'N\u0153ud 2', 'N\u0153ud 3', 'N\u0153ud 4']\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['Service X', 'Service Y', 'Service 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'] \/\/ D\u00e9grad\u00e9 doux bleu \u00e0 bleu fonc\u00e9\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>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Meilleures pratiques strat\u00e9giques<\/h2>\n
    \n
  • Incluez toujours unvisualMap<\/code>:<\/strong>Un heatmap sans l\u00e9gende visuelle oblige les utilisateurs \u00e0 deviner la signification des couleurs. Placez toujours unvisualMap<\/code>clairement pr\u00e8s du bord du canevas.<\/li>\n
  • Utilisez des bordures de grille pour la s\u00e9paration :<\/strong>Appliquez des bordures fines blanches en utilisantitemStyle.borderColor: '#fff'<\/code>etborderWidth: 1<\/code> ou 2<\/code> pour maintenir les cellules individuelles visuellement distinctes dans les matrices denses.<\/li>\n
  • Assurez-vous que le texte pr\u00e9sente un fort contraste :<\/strong> Si les \u00e9tiquettes num\u00e9riques des cellules sont activ\u00e9es (label.show : true<\/code>), v\u00e9rifiez que la couleur du texte reste lisible contre les \u00e9tapes les plus claires et les plus fonc\u00e9es de votre d\u00e9grad\u00e9 de couleurs.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Lors de l’analyse de la densit\u00e9 d’activit\u00e9, des tendances continues ou des corr\u00e9lations sur deux dimensions discr\u00e8tes, le Graphique de cartographie thermique fournit une solution visuelle puissante. En cartographiant les valeurs de donn\u00e9es sur une \u00e9chelle de couleur dynamique \u00e0…<\/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-2063","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\/fr\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/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\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Graphique de cartographie thermique : cartographie de densit\u00e9 et de motifs bas\u00e9e sur une grille\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts 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\/fr\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","og_locale":"fr_FR","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\/fr\/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":{"Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/","url":"https:\/\/www.vpascode.com\/fr\/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\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/heatmap-chart-grid-based-density-and-pattern-mapping-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/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\/fr\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/fr\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Graphique de cartographie thermique : cartographie de densit\u00e9 et de motifs bas\u00e9e sur une grille"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/fr\/#website","url":"https:\/\/www.vpascode.com\/fr\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/fr\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs\/2063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/media?parent=2063"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}