# vue-tree-chart

> A vue2 component to display tree chart

Latest version **1.2.9** (published 2020-07-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-tree-chart
pnpm add vue-tree-chart
yarn add vue-tree-chart
bun add vue-tree-chart
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.9 |
| Published | 2020-07-09 |
| First published | 2018-08-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 348.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 592 |
| Author | refined-x [tower1229@foxmail.com] |
| Maintainers | tower1229 |
| Keywords | vue, tree, chart, tree chart |

## Links

- npm: https://www.npmjs.com/package/vue-tree-chart
- Repository: https://github.com/tower1229/Vue-Tree-Chart
- Homepage: https://github.com/tower1229/Vue-Tree-Chart/blob/master/README.md
- Issues: https://github.com/tower1229/Vue-Tree-Chart/issues
- npm.io page: https://npm.io/package/vue-tree-chart

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.11

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.2.9 (latest) — 2020-07-09
- 1.2.8 — 2020-07-09
- 1.2.7 — 2020-07-09
- 1.2.6 — 2019-07-08
- 1.2.5 — 2019-05-30
- 1.2.4 — 2018-10-17
- 1.2.3 — 2018-10-17
- 1.2.2 — 2018-10-17
- 1.2.1 — 2018-10-17
- 1.2.0 — 2018-09-19
- 1.1.1 — 2018-08-09
- 1.1.0 — 2018-08-07
- 1.0.1 — 2018-08-03
- 1.0.0 — 2018-08-03

## 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 vue2 component to display tree chart

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

## 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[Array] node`s mate
- class[Array] node`s class
- extend[Boolean] show/hide node`s children, default True
```

Example：

```
  {
    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

```
npm run serve
```

## Build

``` bash
npm run build-bundle
```

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

---
_Source: https://npm.io/package/vue-tree-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._