Highcharts 树状图（Treemap）详解
Highcharts 的树状图（Treemap）是一种用矩形面积大小表示数值、颜色表示另一个维度的分层数据可视化图表，非常适合展示层级结构 + 占比/权重的场景。常见应用：
- 公司组织架构（部门人数/预算）
- 产品销量结构（大类 → 小类 → 单品）
- 硬盘空间占用
- 股票投资组合权重
- 网站流量来源层级
Treemap 支持多层嵌套、交互钻取（drilldown）、颜色轴（colorAxis）等强大功能。
环境配置
Treemap 是 Highcharts 核心功能之一，无需额外模块（Highcharts v7+ 已内置）：
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- 如果需要导出、钻取等功能，可额外引入对应模块 -->1. 基本单层树状图示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Highcharts 树状图示例</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 900px; height: 600px; margin: 50px auto;"></div>
<script>
Highcharts.chart('container', {
series: [{
type: 'treemap', // 关键：类型为 treemap
layoutAlgorithm: 'squarified', // 布局算法：squarified（最常用）、sliceAndDice、stripes、strip
alternateStartingDirection: true, // 交替方向，视觉更均衡
levels: [{
level: 1, // 第一层（大类）样式
borderWidth: 3,
borderColor: '#ffffff',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: { fontSize: '16px', fontWeight: 'bold' }
}
}],
data: [{
id: 'A', name: '水果', color: '#FF6B6B'
}, {
id: 'B', name: '蔬菜', color: '#4ECDC4'
}, {
id: 'C', name: '肉类', color: '#45B7D1'
}, {
name: '苹果', parent: 'A', value: 25
}, {
name: '香蕉', parent: 'A', value: 18
}, {
name: '橙子', parent: 'A', value: 15
}, {
name: '西兰花', parent: 'B', value: 20
}, {
name: '胡萝卜', parent: 'B', value: 12
}, {
name: '牛肉', parent: 'C', value: 22
}, {
name: '猪肉', parent: 'C', value: 28
}]
}],
title: { text: '超市商品销量占比（树状图）' },
tooltip: {
pointFormat: '<b>{point.name}</b><br>销量占比：{point.value}%'
}
});
</script>
</body>
</html>2. 多层嵌套 + 颜色轴（colorAxis）示例
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true, // 允许点击钻取
animationLimit: 1000,
dataLabels: { enabled: false },
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: { enabled: true, style: { fontSize: '18px' } }
}],
data: [{
id: 'root', name: '全球市场'
}, {
id: 'A', parent: 'root', name: '亚洲', value: 45
}, {
id: 'E', parent: 'root', name: '欧洲', value: 30
}, {
id: 'N', parent: 'root', name: '北美', value: 25
}, {
name: '中国', parent: 'A', value: 20, colorValue: 85 // colorValue 控制颜色
}, {
name: '印度', parent: 'A', value: 15, colorValue: 60
}, {
name: '日本', parent: 'A', value: 10, colorValue: 90
}, {
name: '德国', parent: 'E', value: 12, colorValue: 75
}, {
name: '法国', parent: 'E', value: 10, colorValue: 70
}, {
name: '美国', parent: 'N', value: 18, colorValue: 95
}, {
name: '加拿大', parent: 'N', value: 7, colorValue: 80
}]
}],
colorAxis: { // 颜色轴：根据 colorValue 着色
min: 0,
max: 100,
stops: [[0, '#ffaaaa'], [0.5, '#ffffaa'], [1, '#aaffaa']],
labels: { format: '{value} 分' }
},
title: { text: '全球市场份额（面积=份额，颜色=满意度）' }3. 交互钻取（Drilldown）示例
// 主图 data 只放第一层
data: [{
id: 'root', name: '公司部门'
}, {
id: 'IT', parent: 'root', name: 'IT部门', value: 40, drilldown: 'IT-detail'
}, {
id: 'Sales', parent: 'root', name: '销售部门', value: 35, drilldown: 'Sales-detail'
}],
drilldown: {
series: [{
id: 'IT-detail',
type: 'treemap',
data: [
{ name: '前端', parent: 'IT', value: 15 },
{ name: '后端', parent: 'IT', value: 18 },
{ name: '运维', parent: 'IT', value: 7 }
]
}, {
id: 'Sales-detail',
type: 'treemap',
data: [
{ name: '国内', parent: 'Sales', value: 20 },
{ name: '海外', parent: 'Sales', value: 15 }
]
}]
}4. 常用配置总结
| 配置项 | 说明与推荐值 |
|---|---|
series.type | 'treemap' |
layoutAlgorithm | 'squarified'（最常用，矩形比例好） |
allowDrillToNode | true（启用点击钻取） |
levels | 自定义每层样式（边框、标签） |
colorAxis + point.colorValue | 用颜色表示第三维度（如增长率、评分） |
data.parent / id | 定义层级关系 |
data.value | 控制矩形面积（必须） |
5. 布局算法对比
squarified：最常用，矩形接近正方形sliceAndDice：水平/垂直条状（适合层级清晰）stripes：条纹式strip：垂直条状
树状图是 Highcharts 中展示层级 + 数值 + 颜色三维数据的最优选择之一，交互性强、视觉冲击力大。
如果你需要：
- 带钻取的多层树状图完整示例
- 结合 Sunburst（旭日图）对比
- 动态加载数据的树状图
- 导出为图片功能
告诉我具体需求，我可以提供完整代码！
