vue-treecharts

Tree chart component based on Vue 2.0

Introduction

高度可定制的树图表组件组件，支持 vue slot 特性自定义树节点 DOM，实现动态可编辑的树图表，如决策树。

实现思路：树节点（TreeChartNode）组件基于递归实现，先序遍历以自上向下（DOM）计算子树高度，自底向顶（树结构）计算子树宽度。随后用 svg path d 计算并绘制贝塞尔曲线以连接父子节点

Contact me for any questions: [e-mail]

Install

npm install vue-treecharts --save

Example

<template>
  <div id="app">
    <TreeChart
      ref="treechart"
      :data="treedata"
      :childrenKey="'children'"
      :lineColor="'#0006'"
      :lineWidth="1"
      :lineOffset="20"
      :transition="0.3"
      :nodeKey="item => item.data.name"
    >
      <template v-slot="{node, childrenVisible}">
        <div :style="{ background: node.data.bgcolor }">
          <span>{{node.data.name}}</span>
          <span v-if="node.data.editable">
            <button>append</button>
            <button>remove</button>
            <button @click="childrenVisible(true)">showChildren</button>
            <button @click="childrenVisible(false)">hideChildren</button>
          </span>
        </div>
      </template>
    </TreeChart>
  </div>
</template>
 
<script>
  import TreeChart from 'vue-treecharts'
  export default {
    components: {
      TreeChart
    },
    data() {
      return {
        treedata: {
          data: { name: 'root', bgcolor: '#1890ff' },
          children: [
            {
              data: { name: 'L1#1', bgcolor: '#1890ff' },
              children: [
                {
                  data: { name: 'L2#1 - ANJINSHUO', bgcolor: '#1890ff' }
                },
                {
                  data: {
                    name: 'L2#2 - [e-mail]',
                    bgcolor: '#f5222d'
                  }
                },
                {
                  data: { name: 'L2#3 - i58000 @ github', bgcolor: '#52c41a' }
                },
                {
                  data: { name: 'L2#4 - anjs @ npm', bgcolor: '#faad14' }
                }
              ]
            },
            {
              data: {
                name: 'L1#2-loooooooooooooong loooooooooooooong ago',
                bgcolor: '#1890ff'
              }
            },
            {
              data: {
                name: 'L1#3',
                bgcolor: '#1890ff',
                editable: true
              },
              children: [
                {
                  data: { name: 'children 1', bgcolor: '#1890ff' }
                },
                {
                  data: { name: 'children 2', bgcolor: '#1890ff' }
                },
                {
                  data: { name: 'children 3', bgcolor: '#1890ff' }
                }
              ]
            }
          ]
        }
      }
    }
  }
</script> 

Document

props

• data 数据源

  type: Object

• nodeKey 子节点数组中元素的唯一 key（如 ID）

  type: String | Number | Function | Boolean

  default: undefined

  若为静态数据可无需设置该值，若需支持数据节点的增删改则必须为数组中每个元素设置唯一 key 值，否则可能导致 dom 更新错误，参考 Vue key

• childrenKey 子节点数组所在的属性键名

  type: String

  default: "children"

• transition 节点增删改动画时间

  type: Number

  default: 0

• lineColor 父子节点连线颜色

  type: String

  default: "#666"

• lineOffset 父子节点连线偏移量

  type: Number

  default: 20

• lineWidth 父子节点连线宽度

  type: Number

  default: 2

slots

• default 节点自定义内容

  slotProps: { node, childrenVisible }

  • node: 数据节点对象

  • childrenVisible: Function，控制当前节点的子节点是否显示的函数，参数必须为 boolean 类型，返回值为子节点是否显示。