vue使用甘特图dhtmlxgantt + gantt.addTaskLayer

效果图：

甘特图

• 官网地址

gantt安装与使用

vue版---部分功能收费

1. 安装gantt  或  引入文件

   npm install dhtmlx-gantt -save
   
   或
   
   import gantt from "/public/static/dhtmlxgantt/dhtmlxgantt.js";
   import "/public/static/dhtmlxgantt/locale/locale_cn.js";

2. 引入---组件

 借鉴

1. css文件地址 examples/dhtmlx_gantt/dhtmlxgantt.css · 残星落影/博客 - 码云 - 开源中国 (gitee.com)
2. js文件地址 examples/dhtmlx_gantt/dhtmlx · 残星落影/博客 - 码云 - 开源中国 (gitee.com)

定义渲染数据 

let tasks = ref({
  data: [
    {
      id: 1,
      text: "计划#1",
      start_date: "2023-09-28",
      end_date: "2023-10-28",
      sj_start_date: "2023-09-29",
      sj_end_date: "2023-10-25",
      open: true,
    },
    {
      id: 2,
      text: "已完成",
      start_date: "2023-09-28",
      end_date: "2023-10-28",
      sj_start_date: "2023-09-29",
      sj_end_date: "2023-10-25",
      parent: 1,
    },
    {
      id: 3,
      text: "计划#2",
      start_date: "2023-03-10",
      end_date: "2023-5-20",
      sj_start_date: "2023-03-10",
      sj_end_date: "2023-5-18",
      open: true,
    },
    {
      id: 4,
      text: "已完成",
      start_date: "2023-03-10",
      end_date: "2023-5-20",
      sj_start_date: "2023-03-10",
      sj_end_date: "2023-5-18",
      parent: 3,
    },
  ],
});

 完整代码

css样式