Skip to content

ddmy/vue3-gantt

Repository files navigation

Vue3 Gantt Chart Component

gantt

简体中文

Introduction

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

  • Supports exporting the Gantt chart to an Excel file.
  • Supports exporting the Gantt chart as an image.
  • Supports displaying overlapping schedules.
  • Supports dynamic configuration for responsive updates.
  • 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.