甘特图依赖线连错的根本原因是时间映射未对齐：字符串日期如"2026-05-10"被JS按本地时区解析，而需统一转为ISO格式或毫秒时间戳确保跨浏览器一致。
甘特图依赖线为什么总连错位置
依赖线连不上、偏移、断开，根本原因不是画线逻辑错，而是起点和终点的时间映射没对齐。所有库（gantt-elastic、ECharts、GanttMaster）都默认把 start 和 end 解析为毫秒时间戳，但如果你传的是字符串 "2026-05-10"，JS 会按本地时区解析；而 "2026-05-10T00:00:00" 或 new Date("2026-05-10").toISOString().slice(0,10) 才能确保跨浏览器一致。
常见错误现象：
- 同一条依赖线，在 Chrome 正常，在 Safari 断在半路
- 任务 A 结束于 5 月 10 日，任务 B 开始于 5 月 11 日，连线却从 A 的 5 月 10 日中午连到 B 的 5 月 10 日凌晨
- 依赖线画出来了，但鼠标 hover 不触发 tooltip —— 因为线的 DOM 节点没挂载到正确容器，或 z-index 被甘特块遮住
gantt-elastic 中依赖字段怎么写才不静默失败
gantt-elastic 的依赖靠 depends 字段驱动，但它不校验格式，错就错，不报错。必须严格满足三个条件：
-
depends值必须是字符串，不能是数组或对象，例如："2:0,5"（表示依赖任务 ID 2 的第 0 个里程碑 + 任务 ID 5 的结束） - ID 必须与
tasks数组中每个对象的id完全一致（类型也要一致：都是 number 或都是 string） - 里程碑索引用冒号分隔，多个依赖用英文逗号分隔，中间**不能有空格**，写成
"2:0, 5"或"2:0 ,5"都会失效
如果依赖线没出现，先检查控制台有没有 Invalid dependency format for task X 类似警告——它其实会打在 console.warn 里，但容易被忽略。
立即学习“前端免费学习笔记（深入）”；
ECharts 甘特图里画依赖线要绕过哪些坑
ECharts 本身没有原生甘特依赖线，得用 series[1] 单独加一个 lines 类型系列来模拟。关键不是“怎么画”，而是“怎么对齐”：
- 必须把所有任务的
start/end统一转成毫秒时间戳，再喂给xAxis.type = 'time'，否则lines的coords坐标算不准 -
lines系列的coordinateSystem: 'cartesian2d'是必须项，漏了就画在左上角不动 - 每条线的
coords是二维数组：[[x1, y1], [x2, y2]]，其中y1和y2对应任务在纵轴上的行号（从 0 开始），不是 DOM 位置；行号必须和series[0].data的顺序严格对应 - 别试图用
label给依赖线加文字说明——ECharts 的 line label 渲染位置极难控制，建议用 tooltip formatter 动态拼接依赖描述
CSS Grid 静态甘特图里手动画依赖线可行吗
可行，但只适合固定数据、无交互、纯展示场景。本质是用绝对定位的 <div class="dependency-line"> 叠在 grid 容器上，靠 JS 计算起点终点坐标。
核心难点在坐标换算：
- 起点 x =
(startDay - baseDay) * colWidth + colWidth / 2，其中baseDay是网格第一列代表的日期，colWidth是每列 CSS 宽度（不能用getBoundingClientRect()直接取，要算 CSS 计算值） - 起点 y =
taskIndex * rowHeight + rowHeight / 2，rowHeight必须是固定值（如40px），不能是minmax(32px, auto)，否则文字撑高后 y 偏移 - 依赖线必须设
pointer-events: none，否则会拦截下方任务块的 hover 事件 - 缩放或窗口 resize 时，必须重算所有线的位置——CSS Grid 本身不触发 resize observer，得手动监听并调用重绘函数
真正容易被忽略的是：IE11 下 transform: rotate() 画斜线会糊，得 fallback 到 SVG <line>，但 SVG 坐标系和 CSS 像素又不一致，得额外做比例映射。
