矩形树图Treemap是一种用于展示层级分类体量占比的可视化图表。通过矩形面积大小映射指标数值支持父子层级结构并内置区块下钻交互非常适合产业结构、营收构成、进出口品类、资产分布等多维分类分析场景。本次案例基于中国 2025 出口商品结构构建直观展示各大类出口商品占总体出口份额点击大类区块可下钻查看二级细分品类开箱即用、适配管理大屏与分析报告。技术栈Highcharts JS treemap 模块 核心特性均衡方块布局、层级样式差异化、区块下钻、分层标签自动展示完整可运行源码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title中国2025年出口商品结构矩形树图/title !-- 核心依赖Highcharts核心库 矩形树图扩展模块 -- script srchttps://code.highcharts.com/highcharts.js/script script srchttps://code.highcharts.com/modules/treemap.js/script style #container { width: 100%; height: 85vh; } /style /head body div idcontainer/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}/bb{point.value} %/b } }); /script /body /html案例概念讲解Highcharts1. Treemap 数据规范树形结构依靠id与parent建立父子关系一级父节点定义name、value、唯一id二级子节点定义name、value、parent值等于父节点 id特点不需要嵌套数组扁平化一维数组即可构建层级后端接口输出非常友好。2. 布局算法layoutAlgorithmHighcharts treemap 支持 3 种布局模式squarified【推荐】尽可能生成接近正方形矩形对比直观本案例使用strip横向长条排布stripes纵向长条排布。3. 层级配置levels本案例重点矩形树图最大优势不同层级独立配置样式level:1顶层大类粗边框、大字号、独立配色level:2下钻后细分品类细边框、小字号踩坑提示不要全局直接设置dataLabels: {enabled:false}会覆盖层级配置导致标签无法默认展示。4. 交互核心配置allowDrillToNode: true开启下钻交互点击一级区块自动进入二级视图图表左上角自动生成返回顶层按钮。适用场景进出口商品结构、行业市场份额分层分析企业营收、利润、成本多分类构成分析资产分布、项目预算、流量来源占比可视化数据大屏多层级体量对比看板产业报告、经营分析可视化图表拓展优化方向Highcharts 可按需开发自定义下钻返回按钮文字、样式增加最大值 / 最小值色块高亮接入后端 fetch 动态加载真实海关统计数据增加导出图片、导出数据功能引入 exporting 模块限制最小区块尺寸防止极小分类文字重叠。