矩形树图

概述

矩形树图是一种层次结构可视化图表，它使用矩形表示嵌套数据，其中每个矩形的大小对应一个数据值，层次关系通过嵌套显示。Apache ECharts 提供了一个全面的矩形树图实现，具有丰富的配置选项，用于表示层次数据结构。

本文档涵盖了 ECharts 中矩形树图的实现、其配置选项、数据格式要求和自定义能力。有关其他层次数据可视化的信息，请参阅图和树图或桑基图和流程图。

来源: test/treemap-obama.html325-361 test/treemap-disk.html185-210

矩形树图架构

ECharts 中的矩形树图作为一种图表类型实现，利用了框架的核心渲染和数据处理能力。

与 ECharts 核心组件的关系

来源: test/treemap-obama.html306-364

矩形树图组件结构

来源: test/treemap-obama.html325-361 test/treemap-disk.html185-210

数据结构

ECharts 中的矩形树图需要具有特定属性的层次数据才能正确渲染。

基本数据格式

[
  {
    name: 'NodeA',
    id: 'node-a',   // Optional unique identifier
    value: 10,      // Numeric value determining rectangle size
    children: [     // Optional array of child nodes
      {
        name: 'NodeA1',
        value: 4,
      },
      {
        name: 'NodeA2',
        value: 6
      }
    ]
  },
  {
    name: 'NodeB',
    value: 20
  }
]

扩展数据格式

矩形树图节点也可以使用数组来存储多个维度的数据

{
  name: 'NodeA',
  value: [10, 20, 5],  // Multiple dimensions
  children: [...]
}

当使用多个维度时，visualDimension 属性控制用于视觉编码的维度。

来源: test/treemap-obama.html178-219 test/treemap-disk.html60-84

配置选项

矩形树图有许多配置选项，用于控制外观、行为和交互。

基本配置

属性	类型	描述
`类型`	字符串	必须设置为`'treemap'`
`名称`	字符串	在工具提示和图例中显示的系列名称
`数据`	数组	矩形树图的层次数据
`宽度`	数字/字符串	矩形树图组件的宽度
`高度`	数字/字符串	矩形树图组件的高度
`顶部`	数字/字符串	距顶部的距离
`底部`	数字/字符串	距底部的距离

层次控制

属性	类型	描述
`叶子深度`	数字	节点被视为叶子的深度
`子节点最小可见值`	数字	子节点可见的最小值
`最小可见值`	数字	节点可见的最小值

来源: test/treemap-disk.html105-128

层级配置

levels 选项允许为树的不同深度设置不同的视觉配置。这是一个强大的功能，可以为每个层次级别实现独特的视觉编码。

来源: test/treemap-disk.html131-158 test/treemap-obama.html223-262

视觉样式

矩形树图提供了丰富的样式选项，可以自定义节点的外观。

项目样式选项

属性	类型	描述
`itemStyle.borderColor`	字符串	矩形的边框颜色
`itemStyle.borderWidth`	数字	矩形的边框宽度
`itemStyle.gapWidth`	数字	矩形之间的间隙宽度
`itemStyle.borderRadius`	数字	矩形的边框圆角
`itemStyle.shadowBlur`	数字	阴影模糊大小
`itemStyle.shadowColor`	字符串	阴影颜色

颜色映射

矩形树图支持多种颜色映射方法

属性	值	描述
`colorMappingBy`	'index'	根据节点索引映射颜色
`colorMappingBy`	'value'	根据节点值映射颜色
`colorMappingBy`	'id'	根据节点id映射颜色
`colorSaturation`	[min, max]	颜色饱和度范围
`visualDimension`	数字	用于视觉映射的数据维度

来源: test/treemap-disk.html73-76 test/treemap-obama.html223-262

标签和文本显示

矩形树图提供了各种选项，用于在节点上显示文本信息。

基本标签配置

上部标签配置

上部标签显示在矩形上方，对于父节点特别有用

动态标签布局

来源: test/treemap-obama.html331-348

交互功能

ECharts 中的矩形树图提供了多种交互功能，用于探索层次数据。

ECharts 提供了一个 treemapZoomToNode 动作以编程方式导航到特定节点

事件

来源: test/treemap-obama.html131-152 test/treemap-disk.html213-215 test/treemap-disk.html168-182

使用示例

基本矩形树图

带有视觉编码的高级矩形树图

来源: test/treemap-disk.html185-210 test/treemap-obama.html315-363

常见用例

矩形树图对于以下场景特别有效：

层次比例 - 可视化嵌套的层次数据，其中大小代表重要性或数量
空间利用率 - 显示文件/磁盘使用情况，其中矩形表示文件和目录
预算分配 - 显示带有类别和子类别的财务数据
产品类别 - 可视化带有嵌套类别的产品目录
组织结构 - 表示公司或组织层次结构

来源: test/treemap-disk.html91 test/treemap-obama.html111

性能考量

处理大型层次数据集时，请考虑以下事项：

使用childrenVisibleMin限制可见节点的数量
设置合适的leafDepth来控制渲染深度
使用visibleMin过滤掉不可见的小节点
考虑使用labelLayout禁用小矩形的标签

来源: test/treemap-disk.html65-84 test/treemap-obama.html339-347