# Vue-Tree-Chart

**Repository Path**: flxe/Vue-Tree-Chart

## Basic Information

- **Project Name**: Vue-Tree-Chart
- **Description**: Vue2树形图组件 A vue2 component to display tree chart
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 56
- **Forks**: 14
- **Created**: 2019-07-30
- **Last Updated**: 2025-05-27

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

中文 | [English](README.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: Vue2树形图组件

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

## 安装

```bash
npm i vue-tree-chart --save
```

## 使用

in template: 

```html
<TreeChart :json="treeData" />
```

in script:

```js
import TreeChart from "vue-tree-chart";

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

## 属性

### json

组件数据，支持字段：

```text
- name[String] 节点名称
- image_url[String] 节点图片
- children[Array] 节点后代
- mate[Array] 节点配偶
- class[Array] 节点自定义class，字符串数组
- extend[Boolean] 展开/收起节点后代，默认展开
```

示例：

```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"
      }
    ]
  }
```

## 事件

### click-node(node)

点击节点触发，接收当前节点数据为参数

## 演示

```bash
npm run serve
```

## 构建

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

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