vue 使用组件vue-tree-chart


http://acconpit.com/1UcC

vue-tree-chart

A vue2 component to display tree chart.

Install

1
npm i vue-tree-chart --save

Usage

in template:

1
<TreeChart :json="treeData" />

in script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import TreeChart from "vue-tree-chart";

export default {
    components: {
        TreeChart
    },
    data() {
        return {
            treeData: {
                ...
            }
        }
    }
    ...

Prop

json

Component data to support those field：

1
2
3
4
5
- name[String] to display a node name
- image_url[String] to display a node image
- children[Array] node`s children
- mate[Object] node`s mate
- extend[Boolean] show/hide node`s children, default True

Example：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
  {
    name: 'root',
    image_url: "https://static.refined-x.com/avat.jpg",
    children: [
      {
        name: 'children1',
        image_url: "https://static.refined-x.com/avat1.jpg"
      },
      {
        name: 'children2',
        image_url: "https://static.refined-x.com/avat2.jpg",
        mate: {
          name: 'mate',
          image_url: "https://static.refined-x.com/avat3.jpg"
        },
        children: [
          {
            name: 'grandchild',
            image_url: "https://static.refined-x.com/avat.jpg"
          },
          {
            name: 'grandchild2',
            image_url: "https://static.refined-x.com/avat1.jpg"
          },
          {
            name: 'grandchild3',
            image_url: "https://static.refined-x.com/avat2.jpg"
          }
        ]
      },
      {
        name: 'children3',
        image_url: "https://static.refined-x.com/avat.jpg"
      }
    ]
  }

Event

click-node(node)

Click on the node triggered, receive the current node data as a parameter

Run a demo

1
npm run serve

Build

1
npm run build-bundle