矩形树图（Treemap）是一种用于展示层级分类体量占比的可视化图表。通过矩形面积大小映射指标数值，支持父子层级结构，并内置区块下钻交互，非常适合产业结构、营收构成、进出口品类、资产分布等多维分类分析场景。
本次案例基于Highcharts图表库组件和中国 2025 出口商品结构构建，直观展示各大类出口商品占总体出口份额，点击大类区块可下钻查看二级细分品类，适配管理大屏与分析报告。
技术栈：Highcharts JS + treemap 模块 核心特性：均衡方块布局、层级样式差异化、区块下钻、分层标签自动展示
完整HTML源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中国2025年出口商品结构矩形树图</title>
<!– 核心依赖：Highcharts核心库 + 矩形树图扩展模块 –>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<style>
#container {
width: 100%;
height: 85vh;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// 分层结构化数据源：支持父子层级下钻
const dataJson = [
{ name: '机电产品', value: 42.5, id: '0' },
{ name: '通用机械设备', value: 8.2, parent: '0' },
{ name: '家用电器', value: 6.7, parent: '0' },
{ name: '工程机械', value: 5.3, parent: '0' },
{ name: '船舶装备', value: 3.1, parent: '0' },
{ name: '汽车及零部件', value: 9.2, parent: '0' },
{ name: '其他机电设备', value: 10.0, parent: '0' },
{ name: '高新技术产品', value: 28.3, id: '1' },
{ name: '集成电路', value: 7.5, parent: '1' },
{ name: '通信设备（手机/基站）', value: 6.8, parent: '1' },
{ name: '光伏储能新能源', value: 6.2, parent: '1' },
{ name: '锂电池', value: 4.1, parent: '1' },
{ name: '其他高新电子产品', value: 3.7, parent: '1' },
{ name: '纺织服装轻工', value: 9.6, id: '2' },
{ name: '服装及面料', value: 4.5, parent: '2' },
{ name: '鞋类箱包', value: 2.3, parent: '2' },
{ name: '玩具、家具、塑料制品', value: 2.8, parent: '2' },
{ name: '化工及塑料制品', value: 6.4, id: '3' },
{ name: '基础化工原料', value: 2.4, parent: '3' },
{ name: '塑料橡胶制品', value: 2.1, parent: '3' },
{ name: '医药原料药/制剂', value: 1.9, parent: '3' },
{ name: '农产品及食品', value: 3.2, id: '4' },
{ name: '水产品', value: 0.9, parent: '4' },
{ name: '蔬菜水果', value: 1.1, parent: '4' },
{ name: '粮油加工制品', value: 1.2, parent: '4' },
{ name: '建材、钢铁有色金属', value: 4.1, id: '5' },
{ name: '钢材及制品', value: 1.8, parent: '5' },
{ name: '铝材有色金属', value: 1.3, parent: '5' },
{ name: '水泥玻璃建材', value: 1.0, parent: '5' },
{ name: '其他杂项出口', value: 5.9, id: '6' }
];
// 自定义配色池
const colors = [
'#E59866','#F8C471','#F7DC6F','#82E0AA',
'#73C6B6','#85C1E9','#BB8FCE','#F1948A','#B2BABB'
];
Highcharts.chart('container', {
accessibility: {
description: '矩形树图展示中国2025年出口商品结构。机电产品占比最高，其次为高新技术产品，支持点击区块下钻查看细分品类。'
},
colors: colors,
series: [{
name: '出口占比',
type: 'treemap',
// 布局算法：squarified 均衡矩形排布（视觉最优）
layoutAlgorithm: 'squarified',
// 开启区块点击下钻功能
allowDrillToNode: true,
borderColor: 'black',
// levels：分层配置，实现一级、二级样式差异化
levels: [
{
level: 1,
colorByPoint: true,
dataLabels: {
enabled: true,
format: '{point.name} {point.value:.0f}%',
style: { textOutline: false, fontSize: 18 }
},
borderWidth: 3
},
{
level: 2,
dataLabels: {
enabled: true,
style: { fontSize: 13 }
},
borderWidth: 1
}
],
data: dataJson
}],
title: {
text: '中国2025年出口商品结构'
},
subtitle: {
text: '模拟统计数据 · 单位：占出口总额百分比'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<b>{point.name}</b>：<b>{point.value} %</b>'
}
});
</script>
</body>
</html>
Highcharts案例讲解
1. Treemap 数据规范
树形结构依靠 id 与 parent 建立父子关系：
- 一级父节点：定义 name、value、唯一id
- 二级子节点：定义 name、value、parent（值等于父节点 id）
特点：不需要嵌套数组，扁平化一维数组即可构建层级，后端接口输出非常友好。
2. 布局算法 layoutAlgorithm
Highcharts treemap 支持 3 种布局模式：
3. 层级配置 levels（本案例重点）
矩形树图最大优势：不同层级独立配置样式
- level:1 顶层大类：粗边框、大字号、独立配色；
- level:2 下钻后细分品类：细边框、小字号；
踩坑提示：不要全局直接设置 dataLabels: {enabled:false}，会覆盖层级配置，导致标签无法默认展示。
4. 交互核心配置
allowDrillToNode: true 开启下钻交互，点击一级区块自动进入二级视图；图表左上角自动生成返回顶层按钮。
矩形树图的特点与适用场景
1. 核心特点
- 面积即数值：矩形面积与指标数值成正比，一眼就能看出各分类的体量差距，比饼图更适合分类多、占比悬殊的场景。
- 天然支持层级：父子节点通过 id / parent 组织，一级大类内部再切分二级细分，层级关系与占比关系同时呈现。
- 空间利用率高：相比旭日图、树形图，矩形树图能在一屏内铺满更多节点，适合几十甚至上百个分类的密集展示。
- 支持下钻交互：点击父区块进入子层级，配合返回按钮逐层浏览，兼顾总览与细节。
- 分层样式可定制：不同层级可独立配置边框、字号、配色与标签，视觉层次清晰。
- 数据格式扁平友好：一维数组即可构建树形结构，后端接口输出简单，无需递归嵌套。
2. 局限性提示
- 分类过多且数值接近时，小区块文字容易重叠，需要限制最小区块尺寸或隐藏标签。
- 不适合展示时间趋势和变化过程，趋势类分析应优先选择折线图。
- 精确比较相邻区块面积不如条形图直观，需要配合 tooltip 查看具体数值。
