<template>
  <div style="padding: 10px;">
    <h2 style="text-align: center">Gantt echart</h2>
    <div class="app-container">
      <div ref="gantt" class="left-container"/>
    </div>
  </div>
</template>

<script>
import gantt from 'dhtmlx-gantt' // 引入模块
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
// import 'dhtmlx-gantt/codebase/locale/locale_cn'  // 本地化
export default {
  name: 'GanttEchart',
  data() {
    return {
      tasks: {
        data: [
          { id: 1, text: 'Task #1', start_date: '2020-12-15', personName: '张总', duration: 3, progress: 0.6, color: '#6BC172' },
          { id: 2, text: 'Task #2', start_date: '2020-12-18', personName: '李总', duration: 6, progress: 0.4, color: '#6BC172' },
          { id: 3, text: 'Task #2-1', start_date: '2020-12-18', personName: '赵总', duration: 3, progress: 0.2, parent: 2 },
          { id: 4, text: 'Task #2-2', start_date: '2020-12-21', personName: '赵总', duration: 3, progress: 0, parent: 2 }
        ],
        links: [
          { id: 1, source: 1, target: 2, type: '0' }
        ]
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // gantt.config.order_branch = true;
      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.xml_date = '%Y-%m-%d'
      gantt.config.autofit = true
      // 初始化
      gantt.init(this.$refs.gantt)
      // 数据解析
      gantt.parse(this.tasks)
    }
  }
}
</script>

<style scoped>
  .left-container {
    height: 600px;
  }
</style>

