vue-tree-chart用法

Vue-Tree-Chart 是一个基于 Vue.js 和 D3.js 的可视化树形结构组件，可以用于展示复杂的层级关系。下面是使用 Vue-Tree-Chart 的基本步骤：

1. 安装 Vue-Tree-Chart：

npm install vue-tree-chart --save

2. 在 Vue 组件中引入并注册 Vue-Tree-Chart：

import VueTreeChart from 'vue-tree-chart'

export default {
  name: 'MyComponent',
  components: {
    VueTreeChart
  },
  // ...
}

3. 在模板中使用 Vue-Tree-Chart：

<vue-tree-chart :data="treeData"></vue-tree-chart>

其中，`treeData` 是一个对象数组，每个对象代表一个节点，包含以下属性：

- `id`：节点的唯一标识符。
- `name`：节点显示的名称。
- `children`：子节点数组，每个子节点也是一个对象。

例如：

[
  {
    id: 1,
    name: 'Node 1',
    children: [
      {
        id: 2,
        name: 'Node 2'
      },
      {
        id: 3,
        name: 'Node 3',
        children: [
          {
            id: 4,
            name: 'Node 4'
          },
          {
            id: 5,
            name: 'Node 5'
          }
        ]
      }
    ]
  }
]

除了 `data` 属性外，Vue-Tree-Chart 还提供了许多其他属性，例如：

- `width`：图表宽度。
- `height`：图表高度。
- `expandAll`：是否默认展开所有节点。
- `nodeWidth`：节点宽度。
- `nodeHeight`：节点高度。
- `nodeSpacing`：节点间距。
- `linkLineType`：连线类型。

更多属性详细请参考官方文档：https://lucas-leung.github.io/vue-tree-chart/。