基于vue3的甘特图组件

基于vue3.x开发的精简版甘特图

如果您在使用过程中遇到任何相关问题，欢迎您提 issues,

Demo在线预览

<Gantt :data="data" itemText="项目" dateText="日期" :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: '项目1', schedule: [ { id: 333330, name: '900勇士同时在线庆祝活动', desc: '这个活动很重要，6666666营收数百万，跨部门合作的一个大项目，BOSS亲自下场坐镇指挥，大家一定要团结一心!', backgroundColor: 'rgb(253, 211, 172)', textColor: 'rgb(245, 36, 9)', days: ["2022-01-15","2022-02-05"] }, { id: 555550, name: 'XXXXXX', desc: '这个活动很重要，6666666营收数百万，跨部门合作的一个大项目，BOSS亲自下场坐镇指挥，大家一定要团结一心!', backgroundColor: '#28f', textColor: '#fff', days: ["2022-02-15","2022-02-25"] }, ], }, { type: 'normal', color: '', name: '流星蝴蝶剑', schedule: [ { id: 222221, name: '小年活动', desc: '这个活动很重要，6666666营收数百万，跨部门合作的一个大项目，BOSS亲自下场坐镇指挥，大家一定要团结一心!', backgroundColor: '#482', textColor: '#fff', days: ["2022-02-25","2022-03-10"] } ], }, ]) 组件接收参数

组件内容宽度需要自行控制把握最小宽度

为了便于业务开发，可以在以下基础上任意拓展字段

<Gantt ref="gantt" ... /> <button @click="exportImg">下载图片</button>

const gantt = ref(null) const exportImg = () => { gantt.value.exportImg({ download: true, waterValue: 'YiJio制作' }) }

exportImg 方法接收一个Object, 配置图片的导出行为, exportImg 返回一个Promise, 成功状态会接收到图片的base64值

参数名	可选值	默认值	说明
download	Boolean	true	是否自动下载图片
waterValue	String	''	图片水印文字, 为空就不添加水印,暂不支持自定义文字样式

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

const gantt = ref(null) const exportGanttExcel = () => { gantt.value.exportGanttExcel({ fileName: '测试列表' }) }

exportGanttExcel接收一个对象file，配置导出文件的信息

参数名	可选值	默认值	说明
fileName	String	'数据'	导出文件名称

组件内部有许多处理日期的方法，如有需要，可以直接导出使用，方法介绍请查看源码Util 使用示例

import { fetchTodayMonthRange } from 'vue3-gantt' 参与开发 node 版本要求16+ 使用npm run dev 启动本地项目进行调试开发，使用npm run build构建代码