矩形树图(Treemap Chart)

## 什么是矩形树图？
Treemap 图表（或 Treemap 图表）是一种数据可视化方法，它将分层（树结构）数据显示为一组嵌套图形 - 矩形。这些数字通过颜色和大小的变化呈现，使您能够更轻松地识别类别或数据值之间的模式和趋势。由于 Treemap 图表是线性的，因此它们提供了一种快速阅读的视觉信息摘要，使复杂的数据易于理解。

## 如何使用矩形树图？
在此 JavaScript Treemap 图表指南中，我们将向您展示如何使用和配置 Treemaps，并将介绍用于绘制 ApexCharts 中可用的不同 Treemap 图表的所有可用选项。

### 数据格式
矩形树图的数据格式应为 XY 格式，如下所示。

```javascript
  options = {
    chart: {
      height: 350,
      type: "treemap",
    },
    series: [
      {
        data: [
          {
            x: "New Delhi",
            y: 218,
          },
          {
            x: "Kolkata",
            y: 149,
          },
          {
            x: "Mumbai",
            y: 184,
          },
          {
            x: "Ahmedabad",
            y: 55,
          },
          {
            x: "Bangaluru",
            y: 84,
          },
          {
            x: "Pune",
            y: 31,
          },
          {
            x: "Chennai",
            y: 70,
          }
        ],
      },
    ]
  }
```

如上面的代码所示，您只需将 `chart.type` 设置为 `treemap`，然后通过该系列将获得基本的矩形树图。

## 颜色范围
Treemap 的单元格填充有默认调色板的颜色。树状图单元格中的每种颜色对应于该系列中的值。

通过指定颜色范围，您可以覆盖默认行为并使每个单元格根据单元格值响应不同的颜色。下面是如何指定颜色范围的示例。

```javascript
  options = {
    plotOptions: {
      treemap: {
        colorScale: {
          ranges: [
            {
              from: -6,
              to: 0,
              color: '#CD363A'
            },
            {
              from: 0.001,
              to: 6,
              color: '#52B12C'
            }
          ]
        }
      }
    }
  }
```

在上面的代码中，请注意 `ranges` 数组。它由 3 个属性组成。

- from : 范围的上限
- to : 范围的下限
- color：在此范围内的单元格的颜色

上面的代码产生了这个输出。

## 启用/禁用阴影
您可以通过此选项切换树状图的颜色阴影行为。如果关闭此选项，矩形的颜色将不受单元格值的影响。

```javascript
  plotOptions: {
    treemap: {
      enableShades: false
    }
  }
```

`enableShades` 更改选项时的颜色差异。

![](/uploads/images/20221227/09c4e3c631f6b0ed180b4e2d4a6908a0.png)

## 附加选项
### 每个单元格的分布式/不同颜色
单元格颜色的默认行为对每个单元格使用相同的颜色并按值对其进行着色。如果你想改变这种行为，你可以这样做

```javascript
  options = {
    plotOptions: {
      treemap: {
        distributed: true
      }
    }
  }
```

## 矩形树图的用途是什么？
有几种常见的场景，适合何时使用 Treemaps。

- 处理向下钻取场景。
- 说明按类别销售的数字。
- 处理和显示大型分层数据集，同时解决空间限制。
- 以快速且易于理解的方式总结一个或多个类别（分支）和子类别（子分支）之间的比较值。
- 进行节省空间的数据可视化。
- 在没有精确值的情况下提供一目了然的数据分析。
- 同时在屏幕上播种数千个项目。

## 矩形树图与饼图
饼图通常被分成许多小部件，这使得信息更难处理。而矩形树图比饼图更有效，因为它们可以更好地对数据点进行分类，并以节省空间的方式呈现值的相对差异。

更多特定于 JavaScript Treemap 图表的配置可以在此[页面](http://www.bixiaguangnian.com/manual/apexcharts/320.html "页面")访问。