甘特图gantt-elastic

想要的效果是这种，找了很多有关甘特图的插件，终于找到了一个可以看懂的插件，下面是代码，看着更简化和使用

  <div style="width:100%;height:100%;margin-top:50px">
      <div>
        <gantt-elastic :tasks="tasks" :options="options">
          <!-- <gantt-elastic-header slot="header">
          </gantt-elastic-header> -->
        </gantt-elastic>
      </div>
  </div>
import GanttElastic from "gantt-elastic";
import Header from "gantt-elastic-header";

  components: {
    'gantt-elastic-header': Header,
    'gantt-elastic': GanttElastic
  },
data(){
  return:{
     tasks: [{
        id: 1,
        label: 'Make some noise',
        start: '2023-09-27 15:20:29',
        end: '2023-09-27 16:20:29',
        type: 'project',
      },
      {
        id: 2,
        label: 'With',
        parentId: 1,//所属下级，它的上级是id为1的数据
        start: '2023-10-07 15:59:39',//开始时间
        end: '2023-10-09 15:59:39',//结束时间
        type: 'project'//项目的类型
      },
      ],
      options: {
        times: {
          // timeScale: 12,
          timeZoom: 1//时间变为每天24小时格式
        },
        maxRows: 100,
        maxHeight: 500,
        row: {
          height: 24
        },
        calendar: {
          hour: {
            display: true
          }
        },
        chart: {
          progress: {
            bar: false
          },
          expander: {
            display: true//可以有展开和折叠的效果加号
          }
        },
        taskList: {
          expander: {
            straight: false
          },
          columns: [
            {
              id: 1,
              label: "ID",
              value: "id",
              width: 40
            },
            {
              id: 2,
              label: "Description",
              value: "label",
              width: 200,
              expander: true,//可以有展开和折叠的效果加号
            },
          ]
        },
      },
    }
  }

前提需要先下载gantt-elastic，gantt-elastic-header这个可用可不用，最后展示的效果是这样的，

官网demo图网址：https://neuronet.io/gantt-elastic/#/