Treemap是一种可视化技术，它可以将复杂的数据结构转换为易于理解的图形。它使用嵌套的矩形来表示数据，并使用不同的颜色来表示不同的层次。Treemap底层是一个树形数据结构，它由一个根节点和多个子节点组成。根节点代表整体，而子节点则代表其中的部分。
Treemap底层使用了一些常用的数据结构，如链表、栈、队列、二叉树、图形、堆以及其他相关数据结构。这些数据结构都有助于Treemap在处理大量数据时保证性能。例如，链表可以帮助Treemap快速地遍历大量数据；栈可以帮助Treemap快速地存储和读取大量数据；而二叉树则可以帮助Treemap快速地对大量数据进行分割和合并操作。
// 一个 Treemap 的例子
class TreeMap {
// 根节点
Node root;
// 树中所有节点
List nodes;
// 添加新节点
void addNode(Node node) {
// 如果是新树（即无根节点）
if (root == null) {
root = node;
} else {
// 否则将新节点作为子节点加入树中
root.addChild(node);
}
nodes.add(node);
}
}
配置 ECharts 图表中 Treemap 的多个层级。
treemap 中采用『三级配置』：
『每个节点』->『每个层级』->『每个系列』。即我们可以对每个节点进行配置，也可以对树的每个层级进行配置，也可以 series 上设置全局配置。节点上的设置，优先级最高。
最常用的是『每个层级进行配置』，levels 配置项就是每个层级的配置。例如：
// 注意，这个数据结构实际不是"tree"而是"forest"
data: [
{
name: 'nodeA',
children: [
{name: 'nodeAA'},
{name: 'nodeAB'},
]
},
{
name: 'nodeB',
children: [
{name: 'nodeBA'}
]
}
],
levels: [
{...}, // "forest"的顶层配置。即含有 'nodeA', 'nodeB' 的这层。
{...}, // 下一层配置，即含有 'nodeAA', 'nodeAB', 'nodeBA' 的这层。
{...}, // 再下一层配置。
...
]treemap 中首要关注的是如何在视觉上较好得区分『不同层级』、『同层级中不同类别』。这需要合理得设置不同层级的『矩形颜色』、『边界粗细』、『边界颜色』甚至『矩形颜色饱和度』等。
参见这个例子，最顶层级用颜色区分，分成了『红』『绿』『蓝』等大块。每个颜色块中是下一个层级，使用颜色的饱和度来区分（参见 colorSaturation）。最外层的矩形边界是『白色』，下层级的矩形边界是当前区块颜色加上饱和度处理（参见 borderColorSaturation）。
treemap 是通过这样的规则来支持这种配置的：每个层级计算用户配置的 color、colorSaturation、borderColor、colorSaturation等视觉信息（在levels中配置）。如果子节点没有配置，则继承父的配置，否则使用自己的配置）。
这样，可以做到：父层级配置 color 列表，子层级配置 colorSaturation。父层级的每个节点会从 color 列表中得到一个颜色，子层级的节点会从 colorSaturation 中得到一个值，并且继承父节点得到的颜色，合成得到自己的最终颜色。
例子：每一个 value 字段是一个 Array，其中每个项对应一个维度（dimension）。
[
{
value: [434, 6969, 8382],
children: [
{
value: [1212, 4943, 5453],
id: 'someid-1',
name: 'description of this node',
children: [...]
},
{
value: [4545, 192, 439],
id: 'someid-2',
name: 'description of this node',
children: [...]
},
...
]
},
{
value: [23, 59, 12],
children: [...]
},
...
]treemap 默认把第一个维度（Array 第一项）映射到『面积』上。而如果想表达更多信息，用户可以把其他的某一个维度（series-treemap.visualDimension），映射到其他的『视觉元素』上，比如颜色明暗等。参见例子中，legend选择 Growth时的状态。
如果统一用一种颜色设置矩形的缝隙（gap），那么当不同层级的矩形同时展示时可能会出现混淆。
参见 例子，注意其中红色的区块中的子矩形其实是更深层级，和其他用白色缝隙区分的矩形不是在一个层级。所以，红色区块中矩形的分割线的颜色，我们在 borderColorSaturation 中设置为『加了饱和度变化的红颜色』，以示区别。
visualDimensiontreemap 中支持对数据其他维度进行视觉映射。
首先，treemap 的数据格式（参见 series-treemap.data）中，每个节点的 value 都可以是数组。数组每项是一个『维度』（dimension）。visualDimension 指定了额外的『视觉映射』使用的是数组的哪一项。默认为第 0 项。
关于视觉设置，详见 series-treemap.levels。
注：treemap中 visualDimension 属性可能在多处地方存在：
visualMin当前层级的最小 value 值。如果不设置则自动统计。
手动指定 visualMin、visualMax ，即手动控制了 visual mapping 的值域（当 colorMappingBy 为 'value' 时有意义）。
visualMax当前层级的最大 value 值。如果不设置则自动统计。
手动指定 visualMin、visualMax ，即手动控制了 visual mapping 的值域（当 colorMappingBy 为 'value' 时有意义）。
color这是一个 Array 值，表示同一层级的节点的颜色选取列表（选择规则见 colorMappingBy）。默认为空时，选取系统 color 列表。
关于视觉设置，详见 series-treemap.levels。
注：treemap中 color 属性可能在多处地方存在：
colorAlpha表示同一层级的节点的 颜色透明度 选取范围。数值范围 0 ~ 1。
例如, colorAlpha 可以是 [0.3, 1].
关于视觉设置，详见 series-treemap.levels。
注：treemap中 colorAlpha 属性可能在多处地方存在：
colorSaturation表示同一层级的节点的颜色饱和度的选取范围。数值范围 0 ~ 1。
例如, colorSaturation 可以是 [0.3, 1].
关于视觉设置，详见 series-treemap.levels。
注：treemap中 colorSaturation 属性可能在多处地方存在：
colorMappingBy表示同一层级节点，在颜色列表中（参见 color 属性）选择时，按照什么来选择。可选值：
将节点的值（即 series-treemap.data.value）映射到颜色列表中。
这样得到的颜色，反应了节点值的大小。
可以使用 visualDimension 属性来设置，用 data 中哪个纬度的值来映射。
将节点的 index（序号）映射到颜色列表中。即同一层级中，第一个节点取颜色列表中第一个颜色，第二个节点取第二个。
这样得到的颜色，便于区分相邻节点。
将节点的 id（即 series-treemap.data.id）映射到颜色列表中。id 是用户指定的，这样能够使得，在treemap 通过 setOption 变化数值时，同一 id 映射到同一颜色，保持一致性。参见 例子。
关于视觉设置，详见 series-treemap.levels。
注：treemap中 colorMappingBy 属性可能在多处地方存在：
visibleMin如果某个节点的矩形的面积，小于这个数值（单位：px平方），这个节点就不显示。
如果不加这个限制，很小的节点会影响显示效果。
关于视觉设置，详见 series-treemap.levels。
注：treemap中 visibleMin 属性可能在多处地方存在：
childrenVisibleMin如果某个节点的矩形面积，小于这个数值（单位：px平方），则不显示这个节点的子节点。
这能够在矩形面积不足够大时候，隐藏节点的细节。当用户用鼠标缩放节点时，如果面积大于此阈值，又会显示子节点。
关于视觉设置，详见 series-treemap.levels。
注：treemap中 childrenVisibleMin 属性可能在多处地方存在：
labellabel 描述了每个矩形中，文本标签的样式。
注：treemap中 label 属性可能在多处地方存在：
upperLabelupperLabel 用于显示矩形的父节点的标签。当 upperLabel.normal.show 为 true 的时候，『显示父节点标签』功能开启。
同 series-treemap.label 一样，upperLabel 可以存在于 series-treemap 的根节点，或者 series-treemap.level 中，或者 series-treemap.data 的每个数据项中。
series-treemap.label 描述的是，当前节点为叶节点时标签的样式；upperLabel 描述的是，当前节点为非叶节点（即含有子节点）时标签的样式。（此时标签一般会被显示在节点的最上部）
参见：
点击编辑实例 》》
itemStyle注：treemap中 itemStyle 属性可能在多处地方存在：
eries[i]-boxplot.markArea用于设置 ECharts 箱形图的标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告。ECha...
本节将介绍 ECharts 平行坐标系系列的属性以及这些属性分别有什么作用。平行坐标系属性type在平行坐标系中 type 值为'parall...
Highcharts 标示区曲线图Highcharts 曲线图以下实例演示了标示区曲线图。我们在前面的章节已经了解了 Highcharts 配置语法。接下...
Highcharts 渐变饼图Highcharts 饼图以下实例演示了渐变饼图。我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我...
AngularComponents概述组件是Angular应用的主要构造块。每个组件包括如下部分：一个HTML模板，用于声明页面要渲染的内容一个用于...
Angular元素（Elements）概览Angular元素就是打包成自定义元素的Angular组件。所谓自定义元素就是一套与具体框架无关的用于定义...
双向绑定双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。包含...
测试测试你的Angular应用可以帮助你检查此应用是否正常运行。如果你要试用本指南中所讲的应用，请在浏览器中运行它或下载并在本...
前提条件对下列知识有基本的了解：生产环境下的ServiceWorker配置文件ngsw-config.json指定了AngularServiceWorker应该缓存...
