vue3 甘特图（二）：甘特图时间轴切换

vue3 甘特图（二）：gantt时间轴切换　　1.固定时间轴缩放级别　　

    gantt.config.scale_unit = "month"; //时间轴单位    gantt.config.step = 1;//单位数    gantt.config.date_scale = "%Y年%M";//时间轴展现方式

　　2.动态改变时间轴缩放　　　　点击不同按钮，切换时间轴状态　　　　2.1 配置时间轴参数

　　　　levels里可配置多个级别。

　　　scales展示时间轴对应多少行，下的format可自定展现方式，css属性方法可判断是否为轴，给周末添加上高亮属性。

const zoomConfig = {  levels: [    {      name: 'day',      scale_height: 60,      scales: [{ unit: 'day', step: 1, format: '%d %M' }]    },    {      name: 'week',      scale_height: 60,      scales: [        {          unit: 'week',          step: 1,          format: function (date) {            let dateToStr = gantt.date.date_to_str('%m-%d')            let endDate = gantt.date.add(date, -6, 'day')            let weekNum = gantt.date.date_to_str('%W')(date) //第几周            return dateToStr(endDate) + ' 至 ' + dateToStr(date)          }        },        {          unit: 'day',          step: 1,          format: '%d', // + "周%D"          css: function (date) {            if (date.getDay() == 0 || date.getDay() == 6) {              return 'day-item weekend weekend-border-bottom'            } else {              return 'day-item'            }          }        }      ]    },    {      name: 'month',      scale_height: 60,      min_column_width: 18,      scales: [        { unit: 'month', format: '%Y-%m' },        {          unit: 'day',          step: 1,          format: '%d',          css: function (date) {            if (date.getDay() == 0 || date.getDay() == 6) {              return 'day-item weekend weekend-border-bottom'            } else {              return 'day-item'            }          }        }      ]    },    {      name: 'quarter',      height: 60,      min_column_width: 110,      scales: [        {          unit: 'quarter',          step: 1,          format: function (date) {            let yearStr = new Date(date).getFullYear() + '年'            let dateToStr = gantt.date.date_to_str('%M')            let endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day')            return yearStr + dateToStr(date) + ' - ' + dateToStr(endDate)          }        },        {          unit: 'week',          step: 1,          format: function (date) {            let dateToStr = gantt.date.date_to_str('%m-%d')            let endDate = gantt.date.add(date, 6, 'day')            let weekNum = gantt.date.date_to_str('%W')(date)            return dateToStr(date) + ' 至 ' + dateToStr(endDate)          }        }      ]    },    {      name: 'year',      scale_height: 50,      min_column_width: 150,      scales: [        { unit: 'year', step: 1, format: '%Y年' },        { unit: 'month', format: '%Y-%m' }      ]    }  ]}

　　2.2 初始化时间轴配置

  gantt.ext.zoom.init(zoomConfig) //配置初始化扩展  gantt.ext.zoom.setLevel('month') //切换到指定的缩放级别

　　2.3 改变时间轴

const changeTime = () => {  gantt.ext.zoom.setLevel(data.timeState)}　

　　2.4 周末或特殊日期高亮

.weekend {      background: #ff9e2f;      color: #fff;    }

　　3. 完整示例代码

  
    
              {{ time.name }}              
  
import { reactive, toRefs, onBeforeMount, onMounted, watchEffect, defineExpose } from 'vue'import { gantt } from 'dhtmlx-gantt'import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'import demoData from './ganttData.json'const data = reactive({  timeList: [    // {    //     name: "周",    //     code: "week",    // },    {      name: '月',      code: 'month'    },    {      name: '季',      code: 'quarter'    },    {      name: '年',      code: 'year'    }  ],  timeState: 'month'})const zoomConfig = {  levels: [    {      name: 'day',      scale_height: 60,      scales: [{ unit: 'day', step: 1, format: '%d %M' }]    },    {      name: 'week',      scale_height: 60,      scales: [        {          unit: 'week',          step: 1,          format: function (date) {            let dateToStr = gantt.date.date_to_str('%m-%d')            let endDate = gantt.date.add(date, -6, 'day')            let weekNum = gantt.date.date_to_str('%W')(date) //第几周            return dateToStr(endDate) + ' 至 ' + dateToStr(date)          }        },        {          unit: 'day',          step: 1,          format: '%d', // + "周%D"          css: function (date) {            if (date.getDay() == 0 || date.getDay() == 6) {              return 'day-item weekend weekend-border-bottom'            } else {              return 'day-item'            }          }        }      ]    },    {      name: 'month',      scale_height: 60,      min_column_width: 18,      scales: [        { unit: 'month', format: '%Y-%m' },        {          unit: 'day',          step: 1,          format: '%d',          css: function (date) {            if (date.getDay() == 0 || date.getDay() == 6) {              return 'day-item weekend weekend-border-bottom'            } else {              return 'day-item'            }          }        }      ]    },    {      name: 'quarter',      height: 60,      min_column_width: 110,      scales: [        {          unit: 'quarter',          step: 1,          format: function (date) {            let yearStr = new Date(date).getFullYear() + '年'            let dateToStr = gantt.date.date_to_str('%M')            let endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day')            return yearStr + dateToStr(date) + ' - ' + dateToStr(endDate)          }        },        {          unit: 'week',          step: 1,          format: function (date) {            let dateToStr = gantt.date.date_to_str('%m-%d')            let endDate = gantt.date.add(date, 6, 'day')            let weekNum = gantt.date.date_to_str('%W')(date)            return dateToStr(date) + ' 至 ' + dateToStr(endDate)          }        }      ]    },    {      name: 'year',      scale_height: 50,      min_column_width: 150,      scales: [        { unit: 'year', step: 1, format: '%Y年' },        { unit: 'month', format: '%Y-%m' }      ]    }  ]}//初始化甘特图const initGantt = () => {  gantt.config.grid_width = 350  gantt.config.add_column = false //添加符号  //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。  gantt.config.autofit = false  gantt.config.row_height = 60  gantt.config.bar_height = 34  // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务  gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务  // gantt.config.xml_date = '%Y-%m-%d' //甘特图时间数据格式  gantt.config.readonly = true //是否只读  gantt.i18n.setLocale('cn') //设置语言  gantt.init('gantt_here') //初始化  gantt.parse(demoData) //填充数据  gantt.ext.zoom.init(zoomConfig) //配置初始化扩展  gantt.ext.zoom.setLevel('month') //切换到指定的缩放级别}const changeTime = () => {  gantt.ext.zoom.setLevel(data.timeState)}onBeforeMount(() => {})onMounted(() => {  initGantt()})watchEffect(() => {})defineExpose({  ...toRefs(data)}).my-gantt {  height: 800px;  width: 100vw;  .time-box {    text-align: center;    margin-bottom: 20px;  }  ::v-deep .gantt-container {    width: 100%;    height: 100%;    .weekend {      background: #ff9e2f;      color: #fff;    }  }}

　　4. 示例数据

　　　　见：vue3 甘特图（一）：选择与初始化甘特图 – 根号九九 – 博客园 (cnblogs.com)