https://spiritree.github.io/vue-orgchart/

:herb: Vue.js wrapper for OrgChart.js
https://spiritree.github.io/vue-orgchart/

chart orgchart vue vuejs vuejs2

Last synced: 3 months ago
JSON representation

:herb: Vue.js wrapper for OrgChart.js

• Host: GitHub
• URL: https://spiritree.github.io/vue-orgchart/
• Owner: spiritree
• License: mit
• Archived: true
• Created: 2017-11-27T08:51:45.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-15T02:29:58.000Z (over 6 years ago)
• Last Synced: 2024-05-21T13:45:03.543Z (6 months ago)
• Topics: chart, orgchart, vue, vuejs, vuejs2
• Language: JavaScript
• Homepage: https://spiritree.github.io/vue-orgchart
• Size: 305 KB
• Stars: 176
• Watchers: 11
• Forks: 67
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-docsify - vue-orgchart - Vue.js wrapper for OrgChart.js. (Showcase)

README

        


  

    

  





A Vue wrapper for OrgChart.js.











## Intro

- First of all, thanks a lot for dabeng's great work -- [OrgChart.js](https://github.com/dabeng/OrgChart.js)

- If you prefer the Vue.js Wrapper for Orgchart.js,you could try [my project](https://github.com/spiritree/vue-orgchart)

## Links

- [Documentation](https://spiritree.github.io/vue-orgchart)

### Feature

- Support import and export JSON

- Supports exporting chart as a picture

- draggable Orgchart

- Editable Orgchart

...

## Install

```shell

npm install vue-orgchart -S

```

## Quick Start

> In `main.js`

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

> In `*.vue`

```javascript

  


    

  


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' }]

          }

        ]

    }

}

```

## Development

``` bash

# 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