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 😊.
<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"]
}
],
},
])| 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.
| 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. |
| 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. |
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 |
| 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. |
<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 BooleantrueWhether 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.
<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.
