#头条创作挑战赛#

今天给大家推荐一款超不错的 vue3 甘特图组件vue3gantt。

vue3-gantt 运用 vue3 构建的甘特图组件，支持重叠日程展示，支持导出gantt img和gantt Excel文件。

安装

npm i vue3-gantt -S

快速使用

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

参数配置

组件事件

非常nice的一款vue3甘特图组件，感兴趣的可以去看看。

// 预览地址
https://blog.ddamy.com/assets/demo/gantt/
// 仓库地址
https://github.com/ddmy/vue3-gantt

Okie，今天就先分享到这里。