关于 dhtmlx-gantt （Vue.js版本封装），有什么优化配置？

Question

插件地址：https://dhtmlx.com/docs/
我二次封装的dhtmlx-gantt 的组件如下：

<template>
  <div class="custom-gantt" ref="gantt" />
</template>

<script>
// 配置参考： https://blog.csdn.net/qq_18209125/article/details/100552720
// 官方文档： https://dhtmlx.com/docs/products/dhtmlxGantt/

import { gantt } from 'dhtmlx-gantt'
import { format, diffDay } from '@common/utils/moment'

export default {
  name: 'Custom_Gantt',

  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    replaceFields: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    fields() {
      const defaultFields = {
        'id': 'id',
        'text': 'text',
        'start_date': 'start_date',
        'end_date': 'end_date',
        'user': 'user'
      }
      return { ...defaultFields, ...this.replaceFields }
    },
    tasks() {
      const { fields, dataSource } = this
      const source = dataSource.map(item => {
        return {
          ...item,
          id: item[fields.id],
          text: item[fields.text],
          start_date: format(item[fields.start_date], 'DD-MM-YYYY'),
          duration: diffDay(item[fields.start_date], item[fields.end_date]) + 1
        }
      })
      return {
        data: source,
        links: []
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const { fields } = this

      gantt.i18n.setLocale('cn') // 国际化

      gantt.config.autofit = true // 表格列宽自适应
      gantt.config.autoscroll = true// 自动滚动
      gantt.config.autoscroll_speed = 50 // 定义将任务或链接拖出当前浏览器屏幕时自动滚动的速度（以毫秒为单位）
      gantt.config.autosize = true // 自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
      gantt.config.readonly = true // 只读模式
      gantt.config.fit_tasks = true // 当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
      gantt.config.round_dnd_dates = true // 将任务开始时间和结束时间自动“四舍五入”, 从而对齐坐标轴刻度
      gantt.config.select_task = false // 任务是否可以点击选中
      gantt.config.smart_scales = true // 仅仅渲染在屏幕可见的那部分时间轴。在处理时间轴非常长的时候，可以提升性能
      gantt.config.smart_rendering = true // 按需渲染, 仅仅渲染在屏幕可见的那部分任务和依赖线。这个在显示大量的任务时，性能比较高。

      gantt.config.date_scale = '%Y-%m-%d' // 设置x轴的日期格式
      gantt.config.duration_unit = 'day' // 工期计算的基本单位
      gantt.config.scale_unit = 'day' // 设置时间坐标轴单位

      // gantt.config.start_date = new Date(2020, 9, 1);
      // gantt.config.end_date = new Date(2020, 9, 31);
      gantt.config.show_tasks_outside_timescale = true

      gantt.plugins({
        tooltip: true// 启用 tooltip 插件
      })
      gantt.config.columns = [ // 配置左边的表格项
        {
          name: 'text',
          label: '任务名',
          width: 120
        }
      ]
      gantt.templates.tooltip_text = (start, end, task) => {
        return `<span>${task[fields.user]}</span><br><span>${task[fields.text]}</span><br><span>计划开始时间 ${format(task[fields.start_date], 'YYYY-MM-DD')}</span><br><span>计划结束时间 ${format(task[fields.end_date], 'YYYY-MM-DD')}</span>`
      }

      gantt.init(this.$refs.gantt)
      gantt.parse(this.tasks)
    }
  }
}
</script>

<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

后端返回数据参考

{
 createTime: 1599792987000,
createUser: "qchentao",
 delay: null,
delayDay: null,
 deleted: false,
 demandName: null,
demandSourceId: null,
endTime: 1600012800000,
  estimateHour: 6,
  isDelay: null,
  operateType: 1,
  planId: "626ba3cff3da11eab3540242ac110004",
  receiverId: null,
  reportStatus: null,
 sort: 1,
startTime: 1600012800000,
 status: null,
 taskDesc: null,
 taskExecutor: "邱晨涛",
 taskExecutorId: "7b098bcc780c4306ae1cc8862f8a3734",
 taskId: "626cd10bf3da11eab3540242ac110004",
 taskName: "api/router/store模块配置",
  taskType: "165b3bed38f84722aa96581732e0e5ac",
  taskTypeName: "common-frontend",
 updateTime: 1600220469000,
 updateUser: "qchentao",
  updated: true,
  version: null
}

由于对dhtmlx-gantt 的配置不太熟悉，以及官方文档又是英文的，找起来比较吃力，所以想来问问有没有改善的方法

需要改进的地方，

1. 支持时间戳，就是 start_date 和 end_date 如果是时间戳的话，要怎么配置（后端返回的时间戳，总不能在前端这边遍历修改吧）
2. 支持结束时间 end_date，end_date好像默认是不支持的，得用 duration 这个字段，（后端返回的是 start_date 和 end_date 两个字段，总不能手动计算吧）
3. 不想要下图中多出来的时间点，要怎么配置

Answer 1

问题3 已解决，解决方案:

// 在上方的组件封装方法中新增以下代码
      this.$nextTick(() => {
        // 重置甘特图显示的开始时间和结束时间
        gantt.config.start_date = moment(gantt.getState().min_date).add(1, 'days').valueOf()
        gantt.config.end_date = moment(gantt.getState().max_date).subtract(2, 'days').valueOf()
      })