Highcharts 层级矩形树图（Treemap）解析

Highcharts 层级矩形树图（Treemap）完整中文解析

一、图表整体作用

Treemap（矩形树图/树状矩阵图）利用面积大小映射数值大小，同时依靠父子ID形成层级嵌套结构。 本案例：斐济大区(一级父节点) → 下属省份(二级子节点)，用区块面积代表人口数量，支持点击下钻查看明细，适合展示层级分类+数值体量对比的数据（企业组织架构营收、产品线销售额、区域产值、资产分布都通用）。

二、引入文件说明

<script src="https://code.highcharts.com/highcharts.js"></script> // Highcharts核心库，所有图表基础
<script src="https://code.highcharts.com/modules/treemap.js"></script> // 矩形树图专属模块，必须引入
<script src="https://code.highcharts.com/modules/exporting.js"></script> // 导出功能：图片/PDF下载、打印图表
<script src="https://code.highcharts.com/modules/accessibility.js"></script> // 无障碍适配：屏幕阅读器识别、残障设备兼容
<div id="container"></div> // 图表渲染挂载容器

三、全局颜色数组

const color = ['#75E492', '#e987cf', '#75C6E4', '#9375E4', '#e49375'];

预定义5组区分色，分别分配给5个一级父节点（Central、Northern、Eastern、Western、Rotuma），子节点会自动继承父区块色系。

四、根配置项逐层拆解

1. accessibility 无障碍配置

accessibility: {
screenReaderSection: {
beforeChartFormat: 屏幕阅读器读取的图表标题、类型、副标题结构化文案
},
description: '图表文字描述，读屏软件会朗读这段说明'
}

面向视障用户，属于标准化合规配置，国内政务、企业大屏可选保留或删除。

2. series 系列核心配置（树图所有逻辑都写在这里）

series: [{
type: 'treemap', // 指定图表类型为矩形树图
layoutAlgorithm: 'squarified', // 布局算法
}]

布局算法三种常用值

基础交互配置

allowDrillToNode: true, // 开启【点击父区块下钻】，点击大区只展示该大区下所有省份；支持双击返回顶层
dataLabels: { enabled: false }, // 全局默认关闭文字标签，通过levels分层单独控制显示

levels：分层样式配置（核心分层控制）

treemap依靠levels区分不同层级的展示样式，level:1代表最外层一级父节点：

levels: [
{
level: 1, // 只作用于一级父节点（各大区）
dataLabels: {
enabled: true, // 一级块显示名称文字
style: { textOutline: false } // 关闭文字白色描边，原生字体显示
},
borderWidth: 3 // 一级区块边框粗细3px，区分层级边界
}
]

二级子节点沿用顶层dataLabels:false，默认不显示文字，鼠标悬浮依靠tooltip查看名称与数值。

data 层级数据结构（父子嵌套关键）

每条数据字段规则：

示例片段对照：

// 父节点：中部大区
{ id: 'Central', name: 'Central', value: 378148, color: color[0] },
// 子节点：奈塔西里省，归属Central大区
{ id: 'Naitasiri', name: 'Naitasiri', value: 177678, parent: 'Central' },

人口数值value = 区块面积基准，中部人口最多、区块体积最大，东部人口最少、区块最小。

3. 标题、副标题

title: { text: 'Fiji divisions and provinces by population 2017' } // 图表主标题
subtitle: {
useHTMl: true, // 开启HTML解析，支持a标签超链接
text: 'Source:<a href="xxx">Wikipedia</a>' // 数据来源链接
}

代码存在笔误：useHTMl → 标准写法是useHTML，不修正也可运行，规范开发建议改正。

4. tooltip 悬浮提示框

tooltip: {
pointFormat: '<b>{point.name}</b>: Population is <b>{point.value}</b>'
}

鼠标悬浮任意矩形块时弹出提示，{point.name}、{point.value}为Highcharts内置变量，自动读取当前数据的名称与数值。

五、图表自带功能总结

六、改造为国内业务数据的通用模板（替换即用）

// 替换data数据即可，格式完全不用改动
data: [
// 一级大区（父节点）
{id:"华东", name:"华东区域", value: 5200, color:color[0]},
{id:"华北", name:"华北区域", value: 3800, color:color[1]},
// 二级子省份
{id:"上海", name:"上海市", value:2100, parent:"华东"},
{id:"江苏", name:"江苏省", value:1800, parent:"华东"},
{id:"北京", name:"北京市", value:2200, parent:"华北"},
]
// 修改标题、tooltip文案
title:{text:"各区域营收分布矩形树图"}
tooltip:{pointFormat:"{point.name}：营收 {point.value} 万元"}

七、常见优化点（落地常用）