{"id":21115576,"url":"https://github.com/ddmy/vue3-gantt","last_synced_at":"2025-04-12T23:52:57.646Z","repository":{"id":36983417,"uuid":"469569486","full_name":"ddmy/vue3-gantt","owner":"ddmy","description":"Vue3 Gantt Chart Component. 基于Vue3的甘特图组件","archived":false,"fork":false,"pushed_at":"2024-06-20T07:59:15.000Z","size":6180,"stargazers_count":113,"open_issues_count":5,"forks_count":21,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T23:52:26.238Z","etag":null,"topics":["excel","export-excel","gantt","vue","vue-gantt","vue3","vue3-gantt"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ddmy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-14T03:38:28.000Z","updated_at":"2025-03-20T02:58:10.000Z","dependencies_parsed_at":"2024-06-20T20:00:12.487Z","dependency_job_id":"fc1ae106-764d-47a6-96aa-68457774de94","html_url":"https://github.com/ddmy/vue3-gantt","commit_stats":null,"previous_names":["ddmy/vue-gantt"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddmy%2Fvue3-gantt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddmy%2Fvue3-gantt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddmy%2Fvue3-gantt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddmy%2Fvue3-gantt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ddmy","download_url":"https://codeload.github.com/ddmy/vue3-gantt/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647240,"owners_count":21139082,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["excel","export-excel","gantt","vue","vue-gantt","vue3","vue3-gantt"],"created_at":"2024-11-20T02:01:05.549Z","updated_at":"2025-04-12T23:52:57.617Z","avatar_url":"https://github.com/ddmy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Vue3 Gantt Chart Component\n\n![gantt](https://blog.ddamy.com/assets/img/gantt.jpeg)\n\n[简体中文](https://github.com/ddmy/vue3-gantt/blob/master/docs/README_zh.md)\n\n### Introduction\nA simplified Gantt chart component developed based on vue3.x:\n- [x] Supports exporting the Gantt chart to an Excel file.\n- [x] Supports exporting the Gantt chart as an image.\n- [x] Supports displaying overlapping schedules.\n- [x] Supports dynamic configuration for responsive updates.\n- [x] Responsive layout, compatible with small screens.\n\n\u003e If you encounter any issues during use, feel free to raise issues 😊.\n\n[Demo Online Preview](https://blog.ddamy.com/assets/demo/gantt/)\n\n### Usage\n```html\n  \u003cGantt\n    :data=\"data\"\n    itemText=\"Project\"\n    dateText=\"Date\"\n    :dateRangeList=\"dateRangeList\"\n  /\u003e\n```\n```js\nimport { ref } from 'vue'\nimport Gantt from 'vue3-gantt'\nimport 'vue3-gantt/dist/style.css'\nconst dateRangeList = ref(['2022-01-01', '2022-03-05'])\nconst data = ref([\n  {\n    type: 'normal',\n    color: '',\n    name: 'Project 1',\n    schedule: [\n      {\n        id: 333330,\n        name: '900 Warriors Simultaneous Online Celebration Event',\n        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!',\n        backgroundColor: 'rgb(253, 211, 172)',\n        textColor: 'rgb(245, 36, 9)',\n        days: [\"2022-01-15\",\"2022-02-05\"]\n      },\n      {\n        id: 555550,\n        name: 'XXXXXX',\n        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!',\n        backgroundColor: '#28f',\n        textColor: '#fff',\n        days: [\"2022-02-15\",\"2022-02-25\"]\n      },\n    ],\n  },\n  {\n    type: 'normal',\n    color: '',\n    name: 'Meteor Butterfly Sword',\n    schedule: [\n      {\n        id: 222221,\n        name: 'Chinese New Year Event',\n        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!',\n        backgroundColor: '#482',\n        textColor: '#fff',\n        days: [\"2022-02-25\",\"2022-03-10\"]\n      }\n    ],\n  },\n])\n```\n\n### Component Props\n\n| Key | Type | Default | Description |\n| ------ | ------ | -------- | ------------ |\n| data | Array[Object] | [] | antt chart data |\n| 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'. |\n| itemText | String | null | The header description for the items in the Gantt chart. |\n| dateText | String | null | The header description for the dates in the Gantt chart. |\n| activeDate | String | Today | The day to be highlighted on the timeline (does not override schedule styles). Format: 'YYYY-MM-DD'. |\n| repeatMode | Object | See below | Configuration for handling overlapping schedules. |\n| itemWidth | Number | 40 | - | The width of date cells, minimum 40. |\n| itemHeight | Number | 40 | - | The height of date cells, minimum 40. |\n| scheduleTitle | Function | null | - | A function to display custom text above the schedule. It receives the schedule information as a parameter and should return the text to be rendered. |\n| borderColor | String | '#eee' | - | The color of the table borders. |\n\n\u003e The content width of the component needs to be controlled manually to ensure the minimum width.\n\n### Component Events\n\n| Event | Type | Description |\n| ------ | ------ | ------------ |\n| scheduleClick | Function | Callback event when clicking on a schedule. Receives the schedule details as a parameter. |\n| scrollXEnd | Function | Event triggered when the horizontal scrollbar reaches the end. |\n| scrollYEnd | Function | Event triggered when the vertical scrollbar reaches the end. |\n\n### Data Configuration: data Array[Object]\n\n| Key | Value  | Description |\n| ------ | ------ | ------ |\n| type | 'alike'\\|\\|'normal' | The project type (display style). |\n| color | CSS color format | Background color for the current project. Applicable when the type is 'alike'. |\n| name | String | The name of the current project. |\n| schedule | Array[Object] | The project schedules. |\n\n### Schedule Configuration: schedule Object\n\n\u003e For easier development, you can extend additional fields based on the following.\n\n| Key | Description |\n| ------ | -------------------- |\n| id | A globally unique ID for the schedule. |\n| name | The name of the schedule. |\n| desc | Description of the schedule. |\n| backgroundColor | Background color for the schedule. |\n| textColor | Text color for the schedule name. |\n| days | Array of Schedule Dates | The array contains valid and consecutive dates in the format YYYY-MM-DD. Alternatively, it can be represented as an array of two elements denoting the start and end dates. |\n\n### repeatMode Configuration: Object\n\n| Key | Options | Default | 说Description明 |\n| ------ | ------ | -------- | ---------- |\n| mode | 'cover'\\|\\|'extract' | 'cover' | Handling mode for overlapping schedules. 'cover' will simply overlap schedules, while 'extract' will extract and group overlapping schedules separately. |\n| backgroundColor | CSS color format | '#FFFFCC' | Background color for the extracted schedules in 'extract' mode. |\n| textColor | CSS color format | '#336666' | \tText color for the extracted schedules in 'extract' mode. |\n| 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. |\n| 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. |\n\n\n### Component Instance Methods\n\n#### Export Full Snapshot Image of the Current Gantt Chart\n\n```html\n\u003cGantt\n    ref=\"gantt\"\n    ...\n/\u003e\n\u003cbutton @click=\"exportImg\"\u003eDownload Image\u003c/button\u003e\n```\n\n```js\nconst gantt = ref(null)\n\nconst exportImg = () =\u003e {\n  gantt.value.exportImg({ download: true, waterValue: 'Made by YiJio' })\n}\n```\n\u003e 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.\n\u003e | Parameter | Optional Values | Default Value | Description |\n\u003e | ------ | ------ | -------- | ---------- |\n\u003e | download | `Boolean` | `true` | Whether to automatically download the image. |\n\u003e | 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. |\n\n\n#### Exporting Current Gantt Chart to Excel\n\n```html\n\u003cGantt\n    ref=\"gantt\"\n    ...\n/\u003e\n\u003cbutton @click=\"exportGanttExcel\"\u003eExport Excel\u003c/button\u003e\n```\n```js\nconst gantt = ref(null)\n\nconst exportGanttExcel = () =\u003e {\n  gantt.value.exportGanttExcel({ fileName: 'TestList' })\n}\n```\n\u003e The exportGanttExcel method receives an Object named file to configure the export file information.\n\u003e | Parameter | Optional Values | Default Value | Description |\n\u003e | ------ | ------ | -------- | ---------- |\n\u003e | fileName | `String` | '数据' | The name of the exported file. |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fddmy%2Fvue3-gantt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fddmy%2Fvue3-gantt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fddmy%2Fvue3-gantt/lists"}