Highcharts 矩形树图 Treemap 示列｜2025年多层级出口商品结构可视化

矩形树图（Treemap）是一种用于展示层级分类体量占比的可视化图表。通过矩形面积大小映射指标数值，支持父子层级结构，并内置区块下钻交互，非常适合产业结构、营收构成、进出口品类、资产分布等多维分类分析场景。

本次案例基于中国 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 种布局模式：

squarified【推荐】：尽可能生成接近正方形矩形，对比直观，本案例使用；
strip：横向长条排布；
stripes：纵向长条排布。

3. 层级配置 `levels`（本案例重点）

矩形树图最大优势：不同层级独立配置样式

level:1 顶层大类：粗边框、大字号、独立配色；
level:2 下钻后细分品类：细边框、小字号；

踩坑提示：不要全局直接设置 dataLabels: {enabled:false}，会覆盖层级配置，导致标签无法默认展示。

4. 交互核心配置

allowDrillToNode: true 开启下钻交互，点击一级区块自动进入二级视图；图表左上角自动生成返回顶层按钮。

适用场景

进出口商品结构、行业市场份额分层分析
企业营收、利润、成本多分类构成分析
资产分布、项目预算、流量来源占比可视化
数据大屏多层级体量对比看板
产业报告、经营分析可视化图表

拓展优化方向（Highcharts 可按需开发）

自定义下钻返回按钮文字、样式；
增加最大值 / 最小值色块高亮；
接入后端 fetch 动态加载真实海关统计数据；
增加导出图片、导出数据功能（引入 exporting 模块）；
限制最小区块尺寸，防止极小分类文字重叠。