资源负载视图是纵轴从“任务”切换为“资源”的独立视图，需用CSS Grid或dhtmlxGantt实现，禁用ECharts；须统一时区解析以避免跨浏览器日期偏差。
资源负载视图不是甘特图的“附加功能”，而是纵轴语义彻底切换：从「任务」变成「资源」，横轴时间不变，但每个条形代表该资源在某时段的工时/负荷量。硬套普通甘特图代码会漏掉关键映射逻辑，比如把人员当任务渲染，结果是排得满屏却看不出谁超载。
用 CSS Grid 做静态资源负荷图（无交互、纯展示）
适合内部汇报页、周报嵌入、打印导出等场景，不依赖 JS，加载快，结构清晰。核心是把「资源」当行、「时间单元」当列，每个 div 表示某资源在某天的负荷强度。
- 纵轴资源列表必须用
grid-row控制顺序，别靠 HTML 顺序——JS 动态重排时会错乱 - 横轴列数由最大跨度决定，比如要展示 30 天，就写
grid-template-columns: repeat(30, minmax(80px, 1fr))，别用1fr均分再手动设列宽，否则负荷条宽度随内容撑开 - 负荷条本身是子元素，用
grid-column: 5 / span 3表达“从第 5 天开始持续 3 天”，起始列必须和真实日期对齐；若资源从 2026-05-15 开始有负荷，而网格首列为 2026-05-10，则grid-column-start应为6（不是1） - 负荷强度用背景色深浅或高度缩放表达，但别用
height: 70%—— 容器行高是minmax(40px, auto)，百分比会失效；改用height: calc(var(--load) * 1px)，配合 JS 注入style="--load: 85"
用 dhtmlxGantt 实现可拖拽的资源负荷视图
dhtmlxGantt 的 resources 模式本质是把资源当任务来渲染，但需显式启用并重写数据结构。它支持滚动、缩放、实时更新，但初始化稍敏感。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须先调用
gantt.config.resources = true，再gantt.init("gantt_here")，顺序反了会静默失败 - 任务数据里不能只有
start/end，还得带resource字段，值是资源 ID（如"dev-01"），且该 ID 必须提前注册进gantt.addResource() - 资源列表通过
gantt.parse({ collection: [...], type: "resource" })加载，collection 数组每项必须含id和text（显示名），缺一不可 - 负荷条默认不显示数值，要加文字得用模板：
gantt.templates.resource_cell_value = function(start, end, task) { return Math.round(task.duration * 8) + "h"; }，其中8是每天标准工时，别硬写死，应从配置读取
为什么 ECharts 不适合做资源负荷图？
ECharts 的 gantt 类型本质是时间轴上的条形图，纵轴只能是离散任务名，无法原生支持「同一资源多条并行负荷」或「按小时粒度叠加显示」。强行用 series.bar 拼，会遇到三个硬伤：
立即学习“前端免费学习笔记（深入）”；
- 纵轴标签无法自动去重合并：同一个工程师出现 5 次，就渲染 5 行，而不是 1 行内堆叠 5 个条
- 无法表达「部分重叠」负荷：A 资源在 9–12 点开会、13–17 点编码，ECharts 默认按单条渲染，中间空档无法保留语义
- 缩放后时间轴刻度跳变（如从“天”切到“小时”），所有
value: [start, end]都得重算毫秒戳，而 ECharts 不提供坐标映射 API，你得自己维护时间范围与像素比例
资源负荷图最易被忽略的时区陷阱
所有库都以毫秒时间戳为基准，但前端传的 "2026-05-13" 在 Chrome 解析为本地时区午夜，在 Safari 可能按 UTC 解析——同一条数据，在不同浏览器里可能差出一整天。真正稳的做法是：
- 服务端统一返回 ISO 字符串带时区偏移，如
"2026-05-13T00:00:00+08:00" - 前端解析一律用
new Date(dateStr).getTime()，别用Date.parse()（行为不一致） - 渲染前校验：取任意一个负荷条的
start时间戳，用new Date(ts).toLocaleDateString()打印出来，确认和预期日期一致
