Vue实现简单可扩展甘特图的方法详解

import {GGanttChart, GGanttBar} from 'vue-ganttastic'

<g-gantt-chart
chart-start="2020-03-01 00:00"
chart-end="2020-03-03 00:00"
>
<g-gantt-row label="My row #1"/>
<g-gantt-row label="My row #2"/>
<g-gantt-row label="My row #3"/>
...
</g-gantt-chart>

export default {
...
components:{
GGanttChart,
GGanttBar
},
data(){
return{
myChartStart: "2020-03-01 00:00"
myChartEnd: "2020-03-02 00:00"
myBars: [
{
myBarStart: "2020-03-01 01:30",
myBarEnd: "2020-03-01 06:00"
},
{
myBarStart: "2020-03-01 15:10",
myBarEnd: "2020-03-01 20:00"
}
]
}
}
...
}

// start date
chartStart: {type: String, default: moment().startOf("day").format("YYYY-MM-DD HH:mm:ss")},
// end date
chartEnd: {type: String, default: moment().startOf("day").add(12,"hours").format("YYYY-MM-DD HH:mm:ss")},
// hide or show time axis
hideTimeaxis: Boolean,
// width of row labels
rowLabelWidth: {type: String, default: "10%"},
// row height
rowHeight: {type: Number, default: 40},
// local
locale: {type: String, default: "en"},
// theme name
theme: String,
// show or hide time grid
grid: Boolean,
// an array of highlighted hours
highlightedHours: {type: Array, default: () => []},
// the total width of the entire ganttastic component in %
width: {type: String, default: "100%"},
// pusn on overlap
pushOnOverlap: {type: Boolean},
// snap background on overlap
snapBackOnOverlap: {type: Boolean},
//  minimum gap between bars
minGapBetweenBars: {
type: Number,
default: 0
}