A high-performance vue gantt component.
npm install jz-gantt
  
   
 
A high-performance vue gantt component, support vue2 & vue3.
!vue 3.x !animate.css
- [x] Automatically generate gantt charts based on dates
- [x] Support for multi-layer expanding
- [x] High-performance
- [x] Multi-layer linkage
- [x] Multistage selected
- [x] Custom table column content
- [x] Custom gantt row content
- [x] Custom header content
- [x] Dynamic update data
- [x] Custom any style
- [x] Support dark model
- [x] Multiple date display modes switch
- [ ] More
For resource code, see Github
For more detailed documentation, see document web
For example, see Example web
If you has any problem, please issue.
``bash`
npm install jz-gantt --save
// or
yarn add jz-gantt // recommend
`js
import Gantt from "jz-gantt";
import "jz-gantt/dist/index.css";
createApp(App).use(Gantt).mount('#app')
`
Data should be Array type, index, startDate, endDate and children are supposed in data item, they help to display the data correctly. Each field can be customized.
`js`
const dataList = [
{
index: 1,
startDate: "2020-06-05",
endDate: "2020-08-20",
ttt: {
a: "aaa",
b: "bbb"
},
name: "mydata1",
children: []
},
{
index: 2,
startDate: "2020-07-07",
endDate: "2020-09-11",
ttt: {},
name: "mydata2",
children: [
{
index: 3,
startDate: "2020-07-10",
endDate: "2020-08-15",
ttt: {
a: "aaa"
},
name: "child1",
children: []
}
]
}
];
`html`
:data="dataList"
/>
We provide a slot named JGanttColumn. Label is required, and it should match data key.
`html`
:data="dataList"
>
We provide a slot named JGanttSlider.
Only one slider whill be rendered. If you insert more than one slider, only last slider will be display.
`html``
:data="dataList"
>