跳到主要内容

VISALL 可下钻矩形树图 (Drillable Treemap) 使用文档

简介​

可下钻矩形树图是VISALL数据可视化库中的高级图表类型之一，用于展示具有层级结构的数据。通过可下钻功能，用户可以交互式地探索数据的不同层级，实现从整体到局部的数据分析。该组件特别适合展示具有明显父子层级关系的复杂数据结构。

基本用法​

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

// 创建可下钻矩形树图
const chart = render(container, {
  layers: [
    {
      type: 'drillableTreemap',
      dataIndex: 0,
      encoding: {
        x: 'name', // 节点名称字段
        y: 'value', // 节点值字段（决定矩形大小）
        group: 'year' // 分组字段（用于时间轴）
      }
    }
  ],
  data: [
    {
      values: [
        {
          year: '2020',
          name: '总收入',
          value: 1000,
          children: [
            { name: '产品A', value: 500, children: [/* 更深层级 */] },
            { name: '产品B', value: 300, children: [/* 更深层级 */] },
            { name: '产品C', value: 200, children: [/* 更深层级 */] }
          ]
        },
        // 更多数据...
      ]
    }
  ]
});

配置参数​

参数类型默认值说明
encoding.xstring-矩形块名称映射字段，必须提供一个字符串类型字段
encoding.ystring-矩形块大小映射字段，必须是数值类型
encoding.groupstring-时间轴分组字段，通常为年份或其他时间单位
dataIndexnumber0指定使用的数据集索引

数据要求​

  • X轴（名称）字段要求为字符串类型
  • Y轴（值）字段要求为数值类型，决定矩形块的大小
  • 分组（group）字段通常为日期或时间类型，用于时间轴展示
  • 数据必须具有层级结构，使用children属性表示子节点
  • 每个层级的数据量至少需要大于1条
  • 提供准确的字段名映射

交互功能​

可下钻矩形树图提供了丰富的交互功能：

  1. 点击下钻：点击非叶子节点可以下钻到该节点，查看其子节点详情
  2. 返回上级：点击当前视图根节点可以返回上一级
  3. 时间轴切换：通过时间轴可以切换不同时间点的数据视图
  4. 悬停提示：鼠标悬停在矩形块上会显示详细信息

样式配置​

矩形树图的样式主要通过主题配置（在token中）进行自定义：

// 样式配置示例
const theme = {
  token: {
    dvTreemapLevelStyle: {
      level_2: {
        itemStyleBorderColor: '#EBf0FA',
        upperLabelBackgroundColor: '#EBf0FA',
        upperLabelBackgroundColorE: '#E1E6F0'
      },
      level_3: {
        upperLabelBackgroundColor: '#D5DEEB',
        upperLabelBackgroundColorE: '#CED6E3'
      },
      labelColor: 'rgba(0, 0, 0, 1)',
      labelCloseIcon: 'data:image/svg+xml;base64,...',
      labelOpenIcon: 'data:image/svg+xml;base64,...'
    }
  }
};

潜规则与注意事项​

  1. 层级深度与样式：

    • 矩形树图会根据数据的层级深度自动调整样式
    • 默认为前三层提供了特殊样式，超过三层的节点使用统一的样式
    • 默认层级样式配置在getLevels方法中

  2. 节点交互机制：

    • 叶子节点（无子节点或子节点数量小于2）不可下钻
    • 点击相同节点（当前视图的根节点）会返回上一级
    • 视图切换时自动重置到第一层

  3. 标签显示规则：

    • 当矩形块足够大时，会显示名称和值
    • 不同层级的节点标签样式不同
    • 带有下钻功能的节点标签右侧有展开/收起图标

  4. 时间轴控制：

    • 切换时间轴会重置当前下钻状态
    • 时间轴数据按照升序排序展示

  5. 数据格式化：

    • 值会根据大小自动格式化（如：1000显示为1K）
    • 如果数据中包含单位信息，会自动在标签和提示框中显示

实现原理​

可下钻矩形树图基于ECharts的treemap组件实现，主要包括以下步骤：

  1. 数据预处理：解析原始数据的层级结构
  2. 时间轴创建：提取时间维度创建时间轴
  3. 层级样式定义：根据数据深度定义不同层级的样式
  4. 事件绑定：实现点击下钻和返回上级的交互功能
  5. 状态管理：管理当前视图下钻状态

示例​

基础可下钻矩形树图​

{
  type: 'drillableTreemap',
  encoding: {
    x: 'name',
    y: 'value',
    group: 'year'
  }
}

多时间点可下钻矩形树图​

{
  type: 'drillableTreemap',
  encoding: {
    x: 'category',
    y: 'sales',
    group: 'quarter'
  }
}

常见问题解决​

  1. 点击节点无法下钻

    • 检查节点是否是叶子节点（无子节点或子节点少于2个）
    • 检查数据结构是否正确

  2. 标签显示不全

    • 矩形块可能太小，可以尝试下钻到该节点查看详情
    • 考虑筛选或聚合部分数据，减少同一层级的节点数量

  3. 数据层级过深导致性能问题

    • 建议控制数据层级在3-4层以内
    • 对于过深的层级，考虑使用其他可视化方式展示
编辑此页
最后由 gongyuzhouchang 于 更新