解密ECharts甘特图

vue实现甘特图效果

🏗️ 架构设计

在开始编码之前，我们需要先设计好整体架构。一个好的甘特图组件应该包含以下几个核心部分：

1. 数据层设计

首先定义清晰的数据结构，这是整个组件的基础：

// 一级任务数据结构（父任务）
parentTask: {
taskId: String, // 任务ID
taskName: String, // 任务名称
projectId: String, // 所属项目ID
projectName: String, // 所属项目名称
createTimeMills: Number, // 创建时间戳
deadlineMills: Number, // 截止时间戳
status: Number, // 任务状态 (1:进行中, 2:已完成, 3:已取消)
progress: Number, // 整体进度百分比
isParent: true, // 标识为父任务
children: Array<Task>, // 子任务列表
expanded: Boolean // 是否展开显示子任务
}

// 二级任务数据结构（子任务）
childTask: {
taskId: String, // 任务ID
taskName: String, // 任务名称
parentTaskId: String, // 父任务ID
documentName: String, // 文档名称
createTimeMills: Number, // 创建时间戳
deadlineMills: Number, // 截止时间戳
status: Number, // 任务状态 (1:进行中, 2:已完成, 3:已取消)
stageName: String, // 阶段名称
progress: Number, // 进度百分比
assignee: String, // 负责人
isParent: false, // 标识为子任务
level: 2 // 任务层级
}

// 层级任务树结构
taskTree: {
projectId: String,
projectName: String,
tasks: Array<ParentTask> // 一级任务列表（包含子任务）
}

2. 时间轴算法
时间轴是甘特图的核心，我们需要实现灵活的时间范围计算：

🕐 多时间周期支持
甘特图支持三种时间周期，满足不同的查看需求（也可自行修改为时间范围）：

本周视图: 从周一到周日，适合查看短期任务
本月视图: 从月初到月末，适合月度规划
本季视图: 从季度初到季度末，适合长期项目管理