# 树图

树图是一种用节点来表达当前节点和子节点关系的图形。

# 属性

# 基础

基本属性： 同组件管理 -> 属性 -> 基本属性
系列颜色： 改变不同系列的颜色。

# 系列

树图布局： 树图的布局，有正交和径向两种。
- 正交布局 水平和垂直方向，树图默认此选项。
- 径向布局 指以节点为圆心，每一层节点为环，一层层向外发散绘制而成的布局。
布局方向： 树图中正交布局的方向。对应有水平方向的从左到右，从右到左；以及垂直方向的从上到下，从下到上。
树边形状： 在正交布局下树边的形状，分为曲线和折线，默认为曲线。
子树折叠展开： 子树折叠和展开的交互，默认打开。由于绘图区域是有限的，而通常一个树图的节点可能会比较多，这样就会出现节点之间相互遮盖的问题。为了避免这一问题，可以将暂时无关的子树折叠收起，等到需要时再将其展开。如上面径向布局树图示例，节点中心用蓝色填充的就是折叠收起的子树，可以点击将其展开。
初始展开层级： 树图初始展开的层级（深度）。
平移缩放： 可对树图进行平移和缩放。
视区同组件管理 -> 属性 -> 视区
标记设置：4.5+
- 标记图形： 标记的图形样式，见组件管理 -> 属性 -> 图标选择器。
普通状态：
- 文本标签：
  - 显示： 是否显示文本。
  - 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
    
    字符串模板变量
    - {a} : 系列名。
    - {b} : 数据名。
    - {c} : 数据值。
    - {@xxx}：数据中名为 xxx 的维度的值，如 {@product}表示名为 'product' 的维度的值。
    - {@[n]}：数据中维度 n 的值，如{@[3]}表示维度 3 的值，从 0 开始计数。
    例如：
```
  {b}: {c}
```
    - 回调函数： 示例：
```
  return data.value[0];
```
    参数 data 是内容格式器需要的单个数据参数。格式如下：
```
  {
      //传入的原始数据项
      data:{
         name:string,
         //系列数据
         value:Array,
         //下级节点数据
         children:Array
          },
      //数据在传入的data数组中的index
      dataIndex:number|Array,
      //系列在传入的option,series中的index
      seriesIndex:number
  }
```
  - 位置： 文本的位置。
  - 文字距离： 文本间的距离，首先需要选择标签的位置，才能定义文本间的距离。
  - 文字旋转： 文字旋转角度。
  - 文字偏移： 文字相对于原本位置的偏移。
  - 水平对齐： 文字在水平方向上的对齐方式。
  - 垂直对齐： 文字在垂直方向上的对齐方式。
  - 宽高： 文本标签的宽度和高度。
  - 超出宽度： 文字超出宽度的处理方式。
  - 字体颜色： 文本标签字体颜色。
  - 字体大小： 文本标签字体大小。
  - 字体粗细： 文本标签字体粗细。
  - 字体： 文本标签字体样式。
- 图形样式：
  - 渐变色： 是否开启渐变色。
    - 渐变色方向： 渐变色方向。
    - 渐变色范围： 渐变色从起始颜色到结尾颜色的变化区间。
  - 颜色： 图形整体颜色。
  - 描边颜色： 图形描边颜色。
  - 描边线宽： 图形描边宽度。
  - 描边类型： 图形描边类型。
  - 阴影属性： 自定义散点图在垂直方向和水平方向上的阴影，同时可以设置散点图的模糊效果。
- 线样式： - 颜色： 线的颜色。 - 宽度： 线的宽度。 - 曲度： 线的曲度。
高亮状态： 鼠标放到树节点上时高亮的标记和样式。
- 关闭高亮状态： 关闭高亮状态。
- 聚焦效果： 鼠标放置在树节点时树节点高亮显示（聚焦当前所在系列）。其余属性配置与普通状态相同。
选中状态： 选中状态下树节点的样式，选择模式为单选或多选时生效。
- 关闭选中状态： 关闭选中状态。
- 选择模式：
  - 不可选
  - 单选
  - 多选其余属性配置与普通状态相同。
叶子节点：
- 普通状态：
  
  其属性配置与普通状态相同。
- 高亮状态：
  
  其属性配置与高亮状态相同。
- 选中状态：
  
  其属性配置与选中状态相同。

初始动画：
- 开启动画 是否开启初始动画。
- 动画时长（ms）： 初始动画的时长，支持回调函数，可以通过每个数据返回的不同的时长实现更戏剧化的初始动画效果。
- 缓动效果 初始动画的缓动效果。

# 数据

# 静态数据

上图中的示例JSON代码如下：

[
  {
    "source": 0,
    "target": 1,
    "name": "图表",
    "value": 35
  },
  {
    "source": 1,
    "target": 2,
    "name": "饼图",
    "value": 30
  },
  {
    "source": 1,
    "target": 3,
    "name": "柱状图",
    "value": 30
  },
  {
    "source": 1,
    "target": 4,
    "name": "折线图",
    "value": 30
  },
  {
    "source": 2,
    "target": 5,
    "name": "环形饼图",
    "value": 20
  },
  {
    "source": 2,
    "target": 6,
    "name": "玫瑰饼图",
    "value": 22
  },
  {
    "source": 3,
    "target": 7,
    "name": "条形图",
    "value": 20
  },
  {
    "source": 3,
    "target": 8,
    "name": "环形图",
    "value": 20
  },
  {
    "source": 3,
    "target": 9,
    "name": "胶囊图",
    "value": 20
  },
  {
    "source": 4,
    "target": 10,
    "name": "堆叠图",
    "value": 20
  },
  {
    "source": 4,
    "target": 11,
    "name": "区域图",
    "value": 20
  }
]

源节点
目标节点
节点数据
- name： 节点的名称。

提示：

根节点的源节点必须为 0 或者空。

# 数据资源

# 交互

勾选启用，开启组件交互功能。当单击树图节点时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# 单击节点事件

勾选启用，开启单击节点交互功能。

# 标记悬停事件

勾选启用，开启标记悬停交互功能。

# 标记移出事件

勾选启用，开启标记移出交互功能。

# 数据响应

树图支持数据响应配置。

# 节点编程

# 事件

图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
节点单击事件： 节点单击触发事件。
- 抛出的参数： 节点所携带的数据。
标记悬停事件： 鼠标在标记悬停时触发事件。
- 抛出的参数：
标记移出事件： 鼠标从标记移出时触发事件。
- 抛出的参数：

# 动作

导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。

← 集合漏斗图径向树图 →