插件地址：https://dhtmlx.com/docs/

我二次封装的dhtmlx-gantt 的组件如下：

// 配置参考： 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 `${task[fields.user]}${task[fields.text]}计划开始时间 ${format(task[fields.start_date], 'YYYY-MM-DD')}计划结束时间 ${format(task[fields.end_date], 'YYYY-MM-DD')}`

}

gantt.init(this.$refs.gantt)

gantt.parse(this.tasks)

}

}

}

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

后端返回数据参考{

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 的配置不太熟悉，以及官方文档又是英文的，找起来比较吃力，所以想来问问有没有改善的方法

需要改进的地方，支持时间戳，就是 start_date 和 end_date 如果是时间戳的话，要怎么配置(后端返回的时间戳，总不能在前端这边遍历修改吧)

支持结束时间 end_date，end_date好像默认是不支持的，得用 duration 这个字段，(后端返回的是 start_date 和 end_date 两个字段，总不能手动计算吧)

不想要下图中多出来的时间点，要怎么配置