<div ref="gantt" style="width: 100%; height: 550px" class="gantts"></div>

关于gantt的数据格式要求

官网数据格式详细：https://docs.dhtmlx.com/gantt/desktop__loading.html

<script>
import gantt from "dhtmlx-gantt"; // 引入模块
import "dhtmlx-gantt/codebase/skins/dhtmlxgantt_terrace.css"; //皮肤
export default{
	data(){
	},
	mounted(){
		this.initGantt()
		this.getData() // 获取数据
	},
	methods：{
		initGantt(){
			//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
     		gantt.config.autosize = true;
     		// 设置日期格式
      		gantt.config.date_format = "%Y-%m-%d";
      		// 工期计算的基本单位
     		gantt.config.duration_unit = "day";
     		//设置x轴日期
      		gantt.config.scale_unit = "day";
      		gantt.config.step = 1;
      		gantt.config.date_scale = "%d %M";
      		//只读模式
      		gantt.config.readonly = true;
      		// 水平或垂直滚动条尺寸
     		gantt.config.scroll_size = 10;
     		gantt.plugins({ // 提示信息
        		tooltip: true// 启用 tooltip 插件
     		})
     		// 在时间线上增加一行年份显示
      		// gantt.config.subscales = [
      		//   {
      		//     unit: "year",
      		//     step: 1,
      		//     date: "%Y",
      		//   },
      		// ];
     		// 表格列宽自适应
     		gantt.config.autofit = true;
     		// 把任务或者连线拖拽到浏览器屏幕外时，自动触发滚动效果，相当于拖动滚动条
     		gantt.config.autoscroll = true;
     		// 自定义 tooltips 显示内容
      		gantt.attachEvent("onGanttReady", () => {
        		gantt.templates.tooltip_text = function (start, end, task) {
        			return (
        				"【任务名称：" + task.name + "】" +
              			"<br/>" +
              			"【负责人：" + task.relevant_person + "】"
        			)
          		}
      		});
     		// 表格列设置
     		gantt.config.columns = [
        		{
          			name: "type",
          			align: "center",
          			tree: true, // 展示 tree 型数据结构
          			resize: true, // 允许通过拖拽的方式border改变列的宽度**(pro收费版支持)**
          			width: 150,
          			label: "任务类型",
        		},
        		{
          			name: "start_date",
          			align: "center",
          			resize: true,
          			label: "预计开始时间",
          			width: 150,
        		},
        		{
         	 		name: "end_date",
          			align: "center",
          			resize: true,
          			label: "预计结束时间",
          			width: 150,
        		},
      		];
      		// 当task的长度改变时，自动调整图标坐标轴区间用于适配task的长度
      		gantt.config.fit_tasks = true;
      		// 初始化
      		gantt.init(this.$refs.gantt);
      		// 数据解析
      		gantt.parse(this.tasks);
		}
	},
	reload() {
      gantt.clearAll();// 从甘特图中删除所有任务和其他元素（包括标记）
      gantt.parse(this.tasks); // 数据解析
      gantt.render(); // 呈现整个甘特图
    },
    getData(){
    	Api().then(res => {
    		this.tasks.data = res.data
    		// 如果需要折叠父子关系（tree）
    		this.tasks.data = [
    		{id:1,text: '123'},
    		{id:2,text: '234'},
    		{id:3,text: '345',parent: 2,}
    		]
    		this.reload()
    	})
    }
}
</script>

从后台获取数据之后，才去渲染甘特图