vue 甘特图 vxe-gantt 设置每个进度条分为计划和实际两条，实现上下分布任务条，实现方式是利用子任务的子视图渲染模式，来间每条任务拆分成2条子任务，就可以利用自带的子视图渲染功能来渲染。
https://gantt.vxeui.com
由于放2行超出默认高度，所以还需要通过 cell-config.height设置一下行高，再通过树形表格的子任务来渲染
<template><div><vxe-gantt v-bind="ganttOptions"></vxe-gantt></div>
</template><script setup>
import { reactive } from 'vue'
import { VxeGanttTaskType } from 'vxe-gantt'
import XEUtils from 'xe-utils'const ganttOptions = reactive({border: true,height: 500,loading: false,cellConfig: {height: 60},treeConfig: {transform: true,rowField: 'id',parentField: 'parentId'},taskConfig: {startField: 'start',endField: 'end',typeField: 'type'},taskBarSubviewConfig: {barStyle ({ row }) {if (row.flag === 1) {return {transform: 'translateY(-24px)','--vxe-ui-gantt-view-task-bar-completed-background-color': '#409eff'}}if (row.flag === 2) {return {transform: 'translateY(1px)','--vxe-ui-gantt-view-task-bar-completed-background-color': '#31d231'}}}},taskBarConfig: {showContent: true,barStyle: {round: true}},taskViewConfig: {tableStyle: {width: 480}},columns: [{ field: 'title', title: '任务名称', minWidth: 100 },{ field: 'planStartDate', title: '计划开始时间', width: 100 },{ field: 'planEndDate', title: '计划结束时间', width: 100 },{ field: 'actualStartDate', title: '实际开始时间', width: 100 },{ field: 'actualEndDate', title: '实际结束时间', width: 100 }],data: []
})// 模拟后端接口
const loadList = () => {ganttOptions.loading = truesetTimeout(() => {const list = [{ id: 10001, parentId: null, title: 'A项目', planStartDate: '2024-03-03', planEndDate: '2024-03-15', actualStartDate: '2024-03-03', actualEndDate: '2024-03-12' },{ id: 10002, parentId: null, title: 'B项目', planStartDate: '2024-03-10', planEndDate: '2024-03-25', actualStartDate: '2024-03-08', actualEndDate: '2024-03-16' },{ id: 10003, parentId: null, title: 'C项目', planStartDate: '2024-03-20', planEndDate: '2024-04-10', actualStartDate: '2024-03-22', actualEndDate: '2024-04-01' },{ id: 10004, parentId: null, title: 'D项目', planStartDate: '2024-03-28', planEndDate: '2024-04-19', actualStartDate: '2024-03-28', actualEndDate: '2024-04-12' },{ id: 10005, parentId: null, title: 'E项目', planStartDate: '2024-04-05', planEndDate: '2024-04-28', actualStartDate: '2024-04-01', actualEndDate: '2024-04-24' }]// 转成子任务视图const ganttData = []list.forEach(item => {const currRow = XEUtils.assign({}, item, { type: VxeGanttTaskType.Subview })const planRow = XEUtils.assign({}, item, {id: 10000000 + item.id,title: '计划',parentId: item.id,start: item.planStartDate,end: item.planEndDate,flag: 1})const actualRow = XEUtils.assign({}, item, {id: 20000000 + item.id,parentId: item.id,title: '实际',start: item.actualStartDate,end: item.actualEndDate,flag: 2})ganttData.push(currRow)ganttData.push(planRow)ganttData.push(actualRow)})ganttOptions.data = ganttDataganttOptions.loading = false}, 200)
}loadList()
</script>
https://gitee.com/x-extends/vxe-gantt