Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 1 month ago
JSON representation

:herb: Vue.js wrapper for OrgChart.js

Awesome Lists containing this project

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](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