04egypt-orgchart

<p align="center"> <a href="https://spiritree.github.io/vue-orgchart"> <img src="/assets/vue-orgchart.jpg" alt="vue-orgchart logo"> </a> </p>

Usage no npm install needed!

<script type="module">
  import 4egyptOrgchart from 'https://cdn.skypack.dev/04egypt-orgchart';
</script>

README

vue-orgchart logo

A Vue wrapper for OrgChart.js.

Travis Status npm

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

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