VISALL 矩形树图 (TreeMap) 使用文档

简介

矩形树图组件是VISALL数据可视化库中的重要图表类型之一，用于展示嵌套结构的数据。矩形树图将数据项表示为层次结构化的矩形，矩形的面积与数据值成比例，可以直观地展示数据项之间的比例关系。

基本用法

import { render } from 'path/to/bundle.esm.min.js';

// 创建矩形树图
const chart = render(container, {
  layers: [
    {
      type: 'treeMap',
      dataIndex: 0,
      encoding: {
        x: '地区', // 类别字段名
        y: '销售额', // 数值字段名
        color: '增长率' // 可选的颜色映射字段
      }
    }
  ],
  data: [
    {
      values: [
        { 地区: '华东', 销售额: 320, 增长率: 15 },
        { 地区: '华南', 销售额: 220, 增长率: 10 },
        { 地区: '华北', 销售额: 180, 增长率: 8 },
        // ...更多数据
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
encoding.x	string	-	类别映射字段，必须提供一个字符串类型字段
encoding.y	string	-	数值映射字段，必须是数值类型，决定矩形面积大小
encoding.color	string	-	可选的颜色映射字段，通常为数值类型
dataIndex	number	0	指定使用的数据集索引

数据要求

• x轴字段要求为字符串类型，用于矩形区块的名称标识
• y轴字段要求为数值类型，用于确定矩形区块的大小
• color字段(可选)通常为数值类型，用于颜色映射
• 数据量至少需要大于1条
• 提供准确的字段名映射

高级用法

1. 带颜色映射的矩形树图

使用color字段进行颜色映射，可以为矩形树图添加额外的数据维度：

{
  type: 'treeMap',
  encoding: {
    x: '产品类别',
    y: '销售额',
    color: '增长率'
  }
}

2. 多层次数据展示

矩形树图特别适合展示具有层次结构的数据：

{
  type: 'treeMap',
  encoding: {
    x: '部门',
    y: '预算',
    color: '使用率'
  }
}

潜规则与注意事项

1. 标签显示规则：

   • 当矩形块过小时，标签会自动隐藏以避免重叠。
   • 实现通过labelLayout回调函数实现：当params.labelRect.height > params.rect.height时隐藏标签。

2. 布局机制：

   • 矩形树图会自动计算每个矩形的位置和大小，无需手动排序或布局。
   • 矩形大小与数据的y字段值成正比。

3. 交互限制：

   • 默认禁用了节点点击功能(nodeClick: false)和地图漫游功能(roam: false)。
   • 面包屑导航功能也被禁用(breadcrumb: { show: false })。

4. 数据值格式化：

   • 标签内容会自动包含名称和格式化后的数值。
   • 如果数据中包含单位信息，会自动在标签和提示框中显示单位。
   • 单位信息通过dataMetaInfo[字段名].unit获取。

5. 标签格式化机制：

   • 标签格式为${name}\n\n${value}${unit}，确保名称和数值有足够的分隔。

实现原理

矩形树图组件内部实现了以下主要功能：

1. 数据处理：将原始数据转换为矩形树图所需的格式
2. 自适应布局：根据数据值自动计算矩形大小和位置
3. 智能标签：根据矩形大小动态显示或隐藏标签
4. 提示框定制：根据数据特性提供友好的数据展示

类型兼容性问题

使用本组件时，需要注意以下类型兼容性问题：

1. x字段必须是字符串类型，用于矩形区块的名称标识
2. y字段必须是数值类型，用于确定矩形区块的大小
3. color字段(可选)通常为数值类型，但也支持分类数据

示例

基础矩形树图

{
  type: 'treeMap',
  encoding: {
    x: '地区',
    y: '销售额'
  }
}

带颜色映射的矩形树图

{
  type: 'treeMap',
  encoding: {
    x: '产品类别',
    y: '销售额',
    color: '增长率'
  }
}

市场份额分析矩形树图

{
  type: 'treeMap',
  encoding: {
    x: '品牌',
    y: '市场份额',
    color: '同比变化'
  }
}

常见问题解决

1. 矩形树图标签显示不全

   • 这是正常现象，矩形树图会根据矩形大小自动控制标签显示
   • 可以通过减少数据量或增加容器大小来改善显示效果

2. 颜色映射不明显

   • 确保color字段的数值范围合适
   • 可以考虑对数据进行归一化处理

3. 数据呈现不直观

   • 矩形树图最适合展示有明显层级关系或占比关系的数据
   • 对于时间序列或精确比较的数据，考虑使用其他图表类型

4. 单位显示问题

   • 确保在数据元信息中正确设置了单位信息
   • 单位信息将自动显示在标签和提示框中