vue3-gantt

Vue3 Gantt Chart Component

简体中文

Introduction

A simplified Gantt chart component developed based on vue3.x:

• [x] Supports exporting the Gantt chart to an Excel file.
• [x] Supports exporting the Gantt chart as an image.
• [x] Supports displaying overlapping schedules.
• [x] Supports dynamic configuration for responsive updates.
• [x] Responsive layout, compatible with small screens.

If you encounter any issues during use, feel free to raise issues 😊.

Demo Online Preview

Usage

  <Gantt
    :data="data"
    itemText="Project"
    dateText="Date"
    :dateRangeList="dateRangeList"
  />

import { ref } from 'vue'
import Gantt from 'vue3-gantt'
import 'vue3-gantt/dist/style.css'
const dateRangeList = ref(['2022-01-01', '2022-03-05'])
const data = ref([
  {
    type: 'normal',
    color: '',
    name: 'Project 1',
    schedule: [
      {
        id: 333330,
        name: '900 Warriors Simultaneous Online Celebration Event',
        desc: 'This event is very important, generating millions of revenue. It is a cross-departmental collaboration and a major project with the CEO personally present to command. Everyone must work together!',
        backgroundColor: 'rgb(253, 211, 172)',
        textColor: 'rgb(245, 36, 9)',
        days: ["2022-01-15","2022-02-05"]
      },
      {
        id: 555550,
        name: 'XXXXXX',
        desc: 'This event is very important, generating millions of revenue. It is a cross-departmental collaboration and a major project with the CEO personally present to command. Everyone must work together!',
        backgroundColor: '#28f',
        textColor: '#fff',
        days: ["2022-02-15","2022-02-25"]
      },
    ],
  },
  {
    type: 'normal',
    color: '',
    name: 'Meteor Butterfly Sword',
    schedule: [
      {
        id: 222221,
        name: 'Chinese New Year Event',
        desc: 'This event is very important, generating millions of revenue. It is a cross-departmental collaboration and a major project with the CEO personally present to command. Everyone must work together!',
        backgroundColor: '#482',
        textColor: '#fff',
        days: ["2022-02-25","2022-03-10"]
      }
    ],
  },
])

Component Props

Key	Type	Default	Description
data	Array[Object]	[]	antt chart data
dateRangeList	Array	[]	The date range within the current chart. This array should have a length of 2, with elements as the start and end date in the format 'YYYY-MM-DD'.
itemText	String	null	The header description for the items in the Gantt chart.
dateText	String	null	The header description for the dates in the Gantt chart.
activeDate	String	Today	The day to be highlighted on the timeline (does not override schedule styles). Format: 'YYYY-MM-DD'.
repeatMode	Object	See below	Configuration for handling overlapping schedules.
itemWidth	Number	40	-
itemHeight	Number	40	-
scheduleTitle	Function	null	-
borderColor	String	'#eee'	-

The content width of the component needs to be controlled manually to ensure the minimum width.

Component Events

Event	Type	Description
scheduleClick	Function	Callback event when clicking on a schedule. Receives the schedule details as a parameter.
scrollXEnd	Function	Event triggered when the horizontal scrollbar reaches the end.
scrollYEnd	Function	Event triggered when the vertical scrollbar reaches the end.

Data Configuration: data Array[Object]

Key	Value	Description
type	'alike'||'normal'	The project type (display style).
color	CSS color format	Background color for the current project. Applicable when the type is 'alike'.
name	String	The name of the current project.
schedule	Array[Object]	The project schedules.

Schedule Configuration: schedule Object

For easier development, you can extend additional fields based on the following.

Key	Description
id	A globally unique ID for the schedule.
name	The name of the schedule.
desc	Description of the schedule.
backgroundColor	Background color for the schedule.
textColor	Text color for the schedule name.
days	Array of Schedule Dates

repeatMode Configuration: Object

Key	Options	Default	说Description明
mode	'cover'||'extract'	'cover'	Handling mode for overlapping schedules. 'cover' will simply overlap schedules, while 'extract' will extract and group overlapping schedules separately.
backgroundColor	CSS color format	'#FFFFCC'	Background color for the extracted schedules in 'extract' mode.
textColor	CSS color format	'#336666'	Text color for the extracted schedules in 'extract' mode.
name	String||Function	'Overlapping Schedules'	Text to display for overlapping schedules. If it's a function, it receives a list of overlapping schedules as a parameter.
desc	String||Function	'These are multiple schedules.'	Description to display for overlapping schedules. If it's a function, it receives a list of overlapping schedules as a parameter.

Component Instance Methods

Export Full Snapshot Image of the Current Gantt Chart

<Gantt
    ref="gantt"
    ...
/>
<button @click="exportImg">Download Image</button>

const gantt = ref(null)

const exportImg = () => {
  gantt.value.exportImg({ download: true, waterValue: 'Made by YiJio' })
}

The exportImg method accepts an Object to configure the behavior of exporting the image. It returns a Promise, and upon successful completion, it receives the base64 value of the image.

Parameter	Optional Values	Default Value	Description
download	Boolean	true	Whether to automatically download the image.
waterValue	String	''	Watermark text to be added to the image. If empty, no watermark will be added. Customizing the text style is not supported at the moment.

Exporting Current Gantt Chart to Excel

<Gantt
    ref="gantt"
    ...
/>
<button @click="exportGanttExcel">Export Excel</button>

const gantt = ref(null)

const exportGanttExcel = () => {
  gantt.value.exportGanttExcel({ fileName: 'TestList' })
}

The exportGanttExcel method receives an Object named file to configure the export file information.

Parameter	Optional Values	Default Value	Description
fileName	String	'数据'	The name of the exported file.