vue3-ganttchart
v1.0.3
Published
一个适用于 Vue.js 的简单、交互式且高度可定制的甘特图组件
Downloads
15
Readme
安装
npm install vue3-ganttchart
使用实例
<template>
<div class="">
<GanttChart :rows="rows" />
</div>
</template>
<script setup>
import dayjs from 'dayjs'
import { v4 as uuidv4 } from 'uuid'
import GanttChart from 'vue3-ganttchart/GanttChart.vue'
const rows = [
{
label: '自定义标题',
highlightOnHover: true,
bars: [
{
beginDate: dayjs().hour(1).startOf('hour').format('YYYY-MM-DD HH:mm'),
endDate: dayjs().add(2, 'day').hour(19).startOf('hour').format('YYYY-MM-DD HH:mm'),
ganttBarConfig: {
id: uuidv4(),
// label: "I'm in a bundle",
bundle: 'bundle2',
html: '<h5>作为科技</h5>',
hasHandles: true,
},
// drop: (e) => {
// console.log(e)
// },
},
],
},
{
label: '自定义标题2',
highlightOnHover: true,
bars: [
{
beginDate: dayjs().hour(1).startOf('hour').format('YYYY-MM-DD HH:mm'),
endDate: dayjs().add(2, 'day').hour(19).startOf('hour').format('YYYY-MM-DD HH:mm'),
ganttBarConfig: {
id: uuidv4(),
label: '遥遥领先',
bundle: 'bundle2',
hasHandles: true,
style: {
background: '#ccc',
},
},
// drop: (e) => {
// console.log(1111, e)
// },
},
{
beginDate: dayjs().add(4, 'day').hour(0).startOf('hour').format('YYYY-MM-DD HH:mm'),
endDate: dayjs().add(6, 'day').hour(19).startOf('hour').format('YYYY-MM-DD HH:mm'),
ganttBarConfig: {
id: uuidv4(),
label: 'Lorem ipsum dolor',
hasHandles: true,
style: {
background: '#b74b52',
},
},
},
{
beginDate: dayjs().add(7, 'day').hour(4).startOf('hour').format('YYYY-MM-DD HH:mm'),
endDate: dayjs().add(9, 'day').hour(16).startOf('hour').format('YYYY-MM-DD HH:mm'),
ganttBarConfig: {
id: uuidv4(),
label: 'Oh hey',
style: {
background: '#69e064',
borderRadius: '15px',
color: 'blue',
fontSize: '10px',
},
},
},
],
},
{
label: '自定义标题3',
highlightOnHover: true,
bars: [
{
beginDate: dayjs().add(1, 'day').hour(5).startOf('hour').format('YYYY-MM-DD HH:mm'),
endDate: dayjs().add(3, 'day').hour(10).startOf('hour').format('YYYY-MM-DD HH:mm'),
ganttBarConfig: {
id: uuidv4(),
label: 'Oh hey',
style: {
background: '#69e064',
borderRadius: '15px',
color: 'blue',
fontSize: '10px',
},
},
},
{
beginDate: '2024-1-15 08:30',
endDate: '2024-2-20 16:45',
ganttBarConfig: {
id: uuidv4(),
label: 'Updated Bundle',
bundle: 'bundle3',
style: {
background: 'cyan',
},
},
},
{
beginDate: '20.02.2024 12:00',
endDate: '10.03.2024 18:30',
ganttBarConfig: {
id: uuidv4(),
label: 'New Task',
hasHandles: true,
style: {
background: '#f79466',
},
},
},
{
beginDate: '25.04.2024 09:15',
endDate: '30.04.2024 21:00',
ganttBarConfig: {
id: uuidv4(),
label: 'Greetings',
style: {
background: '#aabbcc',
borderRadius: '8px',
color: 'white',
fontSize: '12px',
},
},
},
],
},
]
</script>
<style lang="scss" scoped></style>