A vue2 component to display tree chart
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs update Oct 17, 2018
public
src update Oct 17, 2018
.gitignore
.npmignore update Oct 17, 2018
LICENSE Initial commit Aug 3, 2018
README.md update Aug 8, 2018
README_CN.md
babel.config.js
package-lock.json update Oct 17, 2018
package.json update Oct 17, 2018
vue.config.js

README.md

English | 中文

vue-tree-chart

npm license

🌳 A vue2 component to display tree chart

logo

Install

npm i vue-tree-chart --save

Usage

in template:

<TreeChart :json="treeData" />

in script:

import TreeChart from "vue-tree-chart";

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

Prop

json

Component data to support those field:

- 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:

  {
    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

npm run serve

Build

npm run build-bundle

Copyright (c) 2017-present, 前端路上