itzvinoth/vue-orgchart

:herb: Vue.js wrapper for OrgChart.js

A Vue wrapper for OrgChart.js.

Intro

• First of all, thanks a lot for dabeng's great work -- OrgChart.js
• If you prefer the Vue.js Wrapper for Orgchart.js,you could try my project

Links

• Documentation

Feature

• Support import and export JSON
• Supports exporting chart as a picture
• draggable Orgchart
• Editable Orgchart

...

Install

npm install vue-orgchart -S

Quick Start

In main.js

import 'vue-orgchart/dist/style.min.css'

In *.vue

<template>
  <div>
    <vo-basic :data="chartData"></vo-basic>
  </div>
</template>

<script>
import { VoBasic } from 'vue-orgchart'
export default {
  components: { VoBasic }
  created () {
    this.chartData = {
      name: 'JavaScript',
        children: [
          { name: 'Angular' },
          {
            name: 'React',
            children: [{ name: 'Preact' }]
          },
          {
            name: 'Vue',
            children: [{ name: 'Moon' }]
          }
        ]
    }
}
</script>

Development

# install dependencies
npm install

# serve with hot reload at localhost:8999
npm run dev

# unit test
npm run test

# build by rollup
npm run rollup

License

MIT