基于 Highcharts 树形矩阵图实现全国省份人口层级分布
一、前言：为什么选择 Treemap 树形矩阵图
在数据可视化开发中，面对层级分类+数值体量对比场景（区域-省份数据、集团-子公司营收、产品线销量等），传统柱状图、饼图存在明显短板：柱状图无法直观体现层级关系，饼图仅适配少量分类，多数据展示拥挤混乱。
Highcharts 中的Treemap（矩形树图/树形矩阵图）是最优解决方案之一，核心优势如下：
空间利用率极高：通过矩形面积映射数值大小，可在有限画布内承载数十条分类数据；
天然支持层级嵌套：通过父子节点绑定，完美适配「大区-省份」「总公司-分公司」双层层级结构；
交互体验丰富：支持区块下钻、悬浮提示、图表导出，满足业务大屏、数据报表交互需求；
轻量易用：无需复杂配置，兼容主流浏览器，开箱即用。
本文将基于2024年全国七大行政区+各省常住人口真实数据，从零实现一套可直接商用的层级树形矩阵图，完整拆解配置逻辑、适配国内业务场景，并提供可直接复制运行的完整源码。
二、项目效果与数据说明
2.1 可视化效果概述
本次实现的图表以全国七大地理大区为一级父节点，各省市为二级子节点：
一级区块：展示七大区域名称，不同大区独立配色、加粗边框区分层级；
二级区块：各省面积对应常住人口数量，人口越多、区块占比越大；
交互功能：点击大区可下钻查看对应省份详情，悬浮展示精准人口数据，支持图表图片/PDF导出、无障碍适配。
2.2 数据源说明
图表数据采用2024年全国各省市官方常住人口统计数据（单位：万人），数据来源为国家统计局公开年鉴，涵盖华北、华东、华南、华中、西南、西北、东北七大区域，数据真实可溯源，适配政务大屏、人口统计、区域分析等业务场景。
三、完整可运行源码
代码已完成优化：修复官方笔误、新增数字千分位格式化、中文适配、配色优化、完善注释，零修改可直接部署运行。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>2024年全国各区域省份常住人口分布 - 树形矩阵图</title> <!-- 引入Highcharts核心依赖 --> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/treemap.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <style> #container { width: 100%; height: 600px; margin: 0 auto; } </style> </head> <body> <div id="container"></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}</div><div>{chartSubtitle}</div><div>' + '{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.js：Highcharts 核心基础库，提供图表渲染、数据解析、基础交互能力；
treemap.js：树形矩阵图专属模块，是实现层级嵌套、面积映射数值的核心依赖；
exporting.js：图表导出模块，支持一键下载图片、PDF、SVG，适配报表导出需求；
accessibility.js：无障碍适配模块，兼容屏幕阅读器，满足政务、企业项目合规要求。
4.2 层级数据绑定原理（核心重点）
Treemap 实现层级嵌套的核心是id + parent 绑定机制，也是区别于普通图表的关键：
一级父节点（大区）：必须配置
id、name、value、color，id 为唯一标识，value 为大区总人口（子节点数值总和）；二级子节点（省份）：配置
id、name、value、parent，parent 值对应所属大区的 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 树形矩阵图是层级分类数据可视化的最优解之一，兼具美观度、实用性与交互性。本文基于真实国内人口数据完成改造，修复原版代码缺陷，适配中文业务场景，源码可直接用于政务大屏、数据报表、后台管理系统等项目。
相比原生图表，改造后的版本更贴合国内开发习惯：中文适配完善、数据真实可信、交互人性化、可复用性极强，开发者可快速替换数据，适配各类层级数值可视化需求。