一、前言为什么选择 Treemap 树形矩阵图在数据可视化开发中面对层级分类数值体量对比场景区域-省份数据、集团-子公司营收、产品线销量等传统柱状图、饼图存在明显短板柱状图无法直观体现层级关系饼图仅适配少量分类多数据展示拥挤混乱。Highcharts 中的Treemap矩形树图/树形矩阵图是最优解决方案之一核心优势如下空间利用率极高通过矩形面积映射数值大小可在有限画布内承载数十条分类数据天然支持层级嵌套通过父子节点绑定完美适配「大区-省份」「总公司-分公司」双层层级结构交互体验丰富支持区块下钻、悬浮提示、图表导出满足业务大屏、数据报表交互需求轻量易用无需复杂配置兼容主流浏览器开箱即用。本文将基于2024年全国七大行政区各省常住人口真实数据从零实现一套可直接商用的层级树形矩阵图完整拆解配置逻辑、适配国内业务场景并提供可直接复制运行的完整源码。二、项目效果与数据说明2.1 可视化效果概述本次实现的图表以全国七大地理大区为一级父节点各省市为二级子节点一级区块展示七大区域名称不同大区独立配色、加粗边框区分层级二级区块各省面积对应常住人口数量人口越多、区块占比越大交互功能点击大区可下钻查看对应省份详情悬浮展示精准人口数据支持图表图片/PDF导出、无障碍适配。2.2 数据源说明图表数据采用2024年全国各省市官方常住人口统计数据单位万人数据来源为国家统计局公开年鉴涵盖华北、华东、华南、华中、西南、西北、东北七大区域数据真实可溯源适配政务大屏、人口统计、区域分析等业务场景。三、完整可运行源码代码已完成优化修复官方笔误、新增数字千分位格式化、中文适配、配色优化、完善注释零修改可直接部署运行。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title2024年全国各区域省份常住人口分布 - 树形矩阵图/title !-- 引入Highcharts核心依赖 -- script srchttps://code.highcharts.com/highcharts.js/script script srchttps://code.highcharts.com/modules/treemap.js/script script srchttps://code.highcharts.com/modules/exporting.js/script script srchttps://code.highcharts.com/modules/accessibility.js/script style #container { width: 100%; height: 600px; margin: 0 auto; } /style /head body div idcontainer/div script // 自定义大区配色适配国内可视化大屏风格低饱和高区分度 const areaColor [#75E492, #e987cf, #75C6E4, #9375E4, #e49375, #FFB875, #75E4D1]; // 初始化树形矩阵图 Highcharts.chart(container, { // 全局字体中文适配 chart: { fontFamily: Microsoft YaHei, SimHei, sans-serif }, // 无障碍适配屏幕阅读器兼容 accessibility: { screenReaderSection: { beforeChartFormat: {headingTagName}{chartTitle}/{headingTagName}div {typeDescription}/divdiv{chartSubtitle}/divdiv {chartLongdesc}/div }, description: 本图表展示2024年全国七大区域及各省份常住人口分布情况华东、华南地区人口体量领先西北、东北地区人口相对较少。 }, // 图表标题副标题 title: { text: 2024年全国各区域、省份常住人口分布统计 }, subtitle: { useHTML: true, text: 数据来源国家统计局2024年常住人口统计年鉴 }, // 悬浮提示框千分位格式化人口数据中文文案优化 tooltip: { pointFormat: b{point.name}/b常住人口 b{point.value:,.0f}/b 万人 }, // 核心系列配置树形矩阵图 series: [ { type: treemap, layoutAlgorithm: squarified, // 正方形最优布局视觉最舒适 allowDrillToNode: true, // 开启区块下钻交互 animationLimit: 1000, // 开启动画过渡 // 分层样式配置仅一级大区显示名称二级省份悬浮查看 levels: [ { level: 1, dataLabels: { enabled: true, style: { fontSize: 14px, fontWeight: bold, textOutline: false } }, borderWidth: 4, borderColor: #ffffff } ], // 2024全国七大区域省份真实人口数据 data: [ // 华北地区 { id: Huabei, name: 华北地区, value: 7378 2183 1364 3446 2388, color: areaColor[0] }, { id: Hebei, name: 河北省, value: 7378, parent: Huabei }, { id: Beijing, name: 北京市, value: 2183, parent: Huabei }, { id: Tianjin, name: 天津市, value: 1364, parent: Huabei }, { id: Shanxi, name: 山西省, value: 3446, parent: Huabei }, { id: Neimenggu, name: 内蒙古, value: 2388, parent: Huabei }, // 华东地区 { id: Huadong, name: 华东地区, value: 10080 8526 6670 6123 4502 4193 2480, color: areaColor[1] }, { id: Shandong, name: 山东省, value: 10080, parent: Huadong }, { id: Jiangsu, name: 江苏省, value: 8526, parent: Huadong }, { id: Zhejiang, name: 浙江省, value: 6670, parent: Huadong }, { id: Anhui, name: 安徽省, value: 6123, parent: Huadong }, { id: Jiangxi, name: 江西省, value: 4502, parent: Huadong }, { id: Fujian, name: 福建省, value: 4193, parent: Huadong }, { id: Shanghai, name: 上海市, value: 2480, parent: Huadong }, // 华南地区 { id: Huanan, name: 华南地区, value: 12780 5013 1048, color: areaColor[2] }, { id: Guangdong, name: 广东省, value: 12780, parent: Huanan }, { id: Guangxi, name: 广西, value: 5013, parent: Huanan }, { id: Hainan, name: 海南省, value: 1048, parent: Huanan }, // 华中地区 { id: Huazhong, name: 华中地区, value: 9785 6539 5834, color: areaColor[3] }, { id: Henan, name: 河南省, value: 9785, parent: Huazhong }, { id: Hunan, name: 湖南省, value: 6539, parent: Huazhong }, { id: Hubei, name: 湖北省, value: 5834, parent: Huazhong }, // 西南地区 { id: Xinan, name: 西南地区, value: 8364 4655 3860 3190 370, color: areaColor[4] }, { id: Sichuan, name: 四川省, value: 8364, parent: Xinan }, { id: Yunnan, name: 云南省, value: 4655, parent: Xinan }, { id: Guizhou, name: 贵州省, value: 3860, parent: Xinan }, { id: Chongqing, name: 重庆市, value: 3190, parent: Xinan }, { id: Xizang, name: 西藏, value: 370, parent: Xinan }, // 西北地区 { id: Xibei, name: 西北地区, value: 3953 2623 2458 729 593, color: areaColor[5] }, { id: Shaanxi, name: 陕西省, value: 3953, parent: Xibei }, { id: Xinjiang, name: 新疆, value: 2623, parent: Xibei }, { id: Gansu, name: 甘肃省, value: 2458, parent: Xibei }, { id: Ningxia, name: 宁夏, value: 729, parent: Xibei }, { id: Qinghai, name: 青海省, value: 593, parent: Xibei }, // 东北地区 { id: Dongbei, name: 东北地区, value: 4155 3029 2317, color: areaColor[6] }, { id: Liaoning, name: 辽宁省, value: 4155, parent: Dongbei }, { id: Heilongjiang, name: 黑龙江省, value: 3029, parent: Dongbei }, { id: Jilin, name: 吉林省, value: 2317, parent: Dongbei } ] } ], // 导出按钮汉化 exporting: { buttons: { contextButton: { menuItems: [downloadPNG, downloadJPEG, downloadPDF, downloadSVG] } }, filename: 2024全国人口分布树形图 } }); /script /body /html四、核心配置逐行技术解析4.1 依赖模块作用拆解项目引入4个核心JS文件各司其职缺一不可highcharts.jsHighcharts 核心基础库提供图表渲染、数据解析、基础交互能力treemap.js树形矩阵图专属模块是实现层级嵌套、面积映射数值的核心依赖exporting.js图表导出模块支持一键下载图片、PDF、SVG适配报表导出需求accessibility.js无障碍适配模块兼容屏幕阅读器满足政务、企业项目合规要求。4.2 层级数据绑定原理核心重点Treemap 实现层级嵌套的核心是id parent 绑定机制也是区别于普通图表的关键一级父节点大区必须配置id、name、value、colorid 为唯一标识value 为大区总人口子节点数值总和二级子节点省份配置id、name、value、parentparent 值对应所属大区的 id自动挂载至对应层级子节点无需单独配置 color会自动继承父大区色系保证视觉层级统一。4.3 关键交互与样式配置layoutAlgorithm: squarified最优正方形布局自动适配画布大小区块规整美观是业务项目首选布局allowDrillToNode: true开启下钻交互点击大区自动放大展示下属省份双击空白处返回总览提升数据查看层级感分层标签控制仅一级大区显示名称二级省份隐藏默认标签通过悬浮 tooltip 展示详情避免页面文字拥挤千分位格式化通过{point.value:,.0f}自动给人口数值加分隔符大幅提升数据可读性。五、业务适配与二次优化方案5.1 通用数据替换模板该图表可无缝适配所有二级层级数值场景只需替换 data 数据即可模板如下// 父节点一级分类 { id: 分类ID, name: 分类名称, value: 数值, color: 自定义配色 }, // 子节点二级分类 { id: 子项ID, name: 子项名称, value: 数值, parent: 对应父节点ID }适用场景区域营收分布、行业产值统计、产品销量排行、用户层级分布等。5.2 常用个性化优化子节点显示名称在 levels 中新增 level:2 配置开启二级区块 dataLabels关闭下钻功能将allowDrillToNode改为 false固定展示全量数据自定义配色修改 areaColor 数组适配项目大屏主题色隐藏导出按钮添加exporting: { enabled: false }关闭导出功能。六、数据可视化结论基于本图表数据通过树形矩阵图的面积对比可直观得出2024年全国人口分布核心特征人口集聚效应显著华东、华南、华中地区区块面积最大是全国人口核心承载区其中广东、山东、河南为人口前三大省区域差异明显西北、西南、东北地区整体人口体量偏小西藏、青海、海南等省份人口规模垫底人口增长集中结合数据背景仅广东、浙江、福建等8省人口正增长人口持续向东部、南部沿海发达区域集聚。七、总结Highcharts Treemap 树形矩阵图是层级分类数据可视化的最优解之一兼具美观度、实用性与交互性。本文基于真实国内人口数据完成改造修复原版代码缺陷适配中文业务场景源码可直接用于政务大屏、数据报表、后台管理系统等项目。相比原生图表改造后的版本更贴合国内开发习惯中文适配完善、数据真实可信、交互人性化、可复用性极强开发者可快速替换数据适配各类层级数值可视化需求。