https://github.com/tower1229/vue-tree-chart

A Vue component to display tree chart
https://github.com/tower1229/vue-tree-chart

chart tree tree-chart vue vue-component

Last synced: 30 days ago
JSON representation

A Vue component to display tree chart

• Host: GitHub
• URL: https://github.com/tower1229/vue-tree-chart
• Owner: tower1229
• License: mit
• Created: 2018-08-03T01:30:49.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-02-08T16:05:02.000Z (9 months ago)
• Last Synced: 2024-09-19T00:13:09.206Z (about 2 months ago)
• Topics: chart, tree, tree-chart, vue, vue-component
• Language: Vue
• Homepage: https://refined-x.com/Vue-Tree-Chart/
• Size: 845 KB
• Stars: 565
• Watchers: 15
• Forks: 165
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
English | [中文](README_CN.md)

# vue-tree-chart

[![npm](https://img.shields.io/npm/v/vue-tree-chart.svg)](https://www.npmjs.com/package/vue-tree-chart/) [![license](https://img.shields.io/github/license/tower1229/Vue-Tree-Chart.svg)]()

> :deciduous_tree: A Vue component to display tree chart

![logo](https://refined-x.com/asset/vtc-logo.png)

Vue3.x version [is here](https://github.com/tower1229/Vue-Tree-Chart/tree/vue3)

## Install

```bash

npm i vue-tree-chart --save

```

## Usage

in template:

```html

```

in script:

```js

import TreeChart from "vue-tree-chart";

export default {

	components: {

    	TreeChart

	},

	data() {

		return {

			treeData: {

				...

			}

		}

	}

	...

```

## Prop

### json

Component data to support those field：

```text

- name[String] to display a node name

- image_url[String] to display a node image

- children[Array] node`s children

- mate[Array] node`s mate

- class[Array] node`s class

- extend[Boolean] show/hide node`s children, default True

```

Example：

```js

  {

    name: 'root',

    image_url: "https://static.refined-x.com/avat.jpg",

    class: ["rootNode"],

    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

```bash

npm run serve

```

## Build

```bash

npm run build-bundle

```

Copyright (c) 2017-present, [前端路上](http://refined-x.com)