VISALL 树图 (Tree Chart) 使用文档

简介

树图组件是VISALL数据可视化库中的重要图表类型之一，用于展示具有层次结构的数据。该组件能够直观地表现节点之间的父子关系，适用于组织结构、系统架构、文件目录等多种层次数据的可视化展示。

基本用法

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

// 创建树图
const chart = render(container, {
  layers: [
    {
      type: 'tree',
      dataIndex: 0
    }
  ],
  data: [
    {
      values: {
        name: '根节点',
        children: [
          { 
            name: '子节点1',
            children: [
              { name: '孙节点1-1' },
              { name: '孙节点1-2' }
            ]
          },
          { 
            name: '子节点2',
            children: [
              { name: '孙节点2-1' }
            ]
          }
        ]
      }
    }
  ]
});

配置参数

参数	类型	默认值	说明
dataIndex	number	0	指定使用的数据集索引

数据要求

数据必须是一个包含层次结构的对象
每个节点至少需要一个name属性用于显示
子节点通过children数组属性定义
根节点必须存在
每个节点可以包含额外属性用于自定义样式和交互

数据结构示例

{
  name: '根节点',
  children: [
    { 
      name: '子节点1',
      children: [
        { name: '孙节点1-1' },
        { name: '孙节点1-2' }
      ]
    },
    { name: '子节点2' }
  ]
}

高级用法

1. 自定义节点样式

可以通过在数据中添加额外属性来自定义节点样式：

{
  name: '根节点',
  itemStyle: {
    color: '#ff0000',
    borderWidth: 2
  },
  children: [
    // ...子节点
  ]
}

2. 节点展开和折叠控制

树图支持节点的展开和折叠功能，可以通过配置初始状态：

{
  name: '根节点',
  collapsed: false, // 初始状态是否折叠
  children: [
    // ...子节点
  ]
}

潜规则与注意事项

数据结构要求：
- 树图要求数据必须是嵌套的层次结构，通常通过children数组表示子节点。
- 每个节点必须有唯一的标识，通常是name属性。
渲染机制：
- 树图默认会从数据数组中取第一个元素的值作为树的根节点。
- 实现代码中的获取方式：data: [data.values]
交互行为：
- 默认配置了鼠标悬停时显示tooltip提示。
- 通过tooltip配置项的trigger: 'item'和triggerOn: 'mousemove'实现。
图例（Legend）限制：
- 当前实现暂不支持图例的点击功能。
- 图例数据默认为空数组：legend: { data: [] }

实现原理

树图组件内部使用了直接的数据引用，主要步骤包括：

获取数据：从数据数组中获取指定索引的数据
配置基本图表选项：设置tooltip、图例等
配置树图系列：将数据直接传递给树图渲染器

树图的实现相对简单，主要依赖于echarts的内置树图功能，通过系列配置type: 'tree'实现。

兼容性问题

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

当前实现缺少layout配置，可能导致树图的布局不符合预期
在处理大量节点数据时，可能需要优化数据结构以提高渲染性能
复杂的自定义样式可能需要额外配置

示例

基础树图

{
  type: 'tree',
  dataIndex: 0
}

自定义节点树图

{
  type: 'tree',
  dataIndex: 0,
  // 可以通过在数据中添加样式属性来自定义节点外观
}

常见问题解决

树图显示不全
- 检查容器大小是否足够
- 确认数据结构是否正确，每个节点都有name属性
节点层次混乱
- 检查数据中的children属性是否正确设置
- 确保没有循环引用的情况
交互问题
- 确认tooltip配置是否正确
- 检查节点的事件绑定是否有效
自定义样式不生效
- 在节点数据中添加itemStyle属性
- 确保样式属性名称和值的格式正确

简介​

基本用法​

配置参数​

数据要求​

数据结构示例​

高级用法​

1. 自定义节点样式​

2. 节点展开和折叠控制​

潜规则与注意事项​

实现原理​

兼容性问题​

示例​

基础树图​

自定义节点树图​

常见问题解决​

简介