tree
树图组件，包括矩形、圆形等常见的树图。
如何使用？
首先，需要安装npm包（目前我们仅支持npm方式管理）：
npm install --save clunch @clunch/tree
然后注册组件：
import Clunch from 'clunch';
import tree from '@clunch/tree';
Clunch.series('ui-tree',tree);然后，你就可以使用这个组件了：
<ui-tree data='json' />- data:数据，可以是任意格式（比如：
[{name:"",children:[...]},...]默认支持，别的格式需要额外配置解析方法）
除了上面的必输项外，还有下列可选项：
| 属性 | 类型 | 描述 | 默认值 | 可选值 |
|---|---|---|---|---|
| format | json | 配置数据格式（详情见下面） | （见下面） | |
| type | string | 树图类型 | TB | LR | RL | TB | BT | circle |
| x | number | 图形左上角的横坐标（type不为circle时有效） | 10 | |
| y | number | 图形左上角的纵坐标（type不为circle时有效） | 10 | |
| width | number | 图形宽（type不为circle时有效） | 画布宽减20 | |
| height | number | 图形高（type不为circle时有效） | 画布高减20 | |
| cx | number | 图形中心的横坐标（type为circle时有效） | 画布中心横坐标 | |
| cy | number | 图形中心的纵坐标（type为circle时有效） | 画布中心纵坐标 | |
| radius | number | 图形半径（type为circle时有效） | 50%的画布宽(高)减100 | |
| begin-deg | number | 图形开始弧度（type为circle时有效） | 0 | |
| deg | number | 图形跨越的弧度（type为circle时有效） | 2PI |
【数据格式format】
因为用户提供的原始数据可能不是按照我们设计的格式提供，为了兼容所有的数据格式，我们提供了format配置项用以告诉组件你的数据应该如何解析：
format:{
"root":function(initTree){ /*返回根结点*/ },
"id":function(treedata){ /*返回id*/ },
"child":function(parentTree, initTree){ /*返回孩子结点*/ }
}你一共可以配置三项，分别用以告诉我们哪个是根节点、一个结点的唯一标识如何生成和如何获取孩子结点。
比如我们内置数据格式的话，可以这样配置：
// 默认配置
format:{
"root":function(initTree){ return initTree; },
"id":function(treedata){ return treedata.name; },
"child":function(parentTree, initTree){ return parentTree.children; }
}上面三项均可选，你只需要配置和默认数据格式解析不一样的项即可，无需全部配置。
由于此组件是基于Clunch开发的，我们默认你已经掌握了相关知识。
开源协议
Copyright (c) 2021 hai2007 走一步，再走一步。