ECharts 甘特图实战：从数据映射到视觉定制的完整指南

1. 为什么选择ECharts实现甘特图？

最近在做一个项目管理大屏的需求，客户要求用甘特图直观展示项目进度。我调研了DHTMLX、普加等专业甘特图库，发现要么定制化程度不够，要么体积太大影响性能。最后选择了ECharts这个轻量级可视化库，原因很简单：它既能满足基础功能，又支持深度定制。

ECharts的核心优势在于：

• 轻量灵活：压缩后仅几百KB，不增加页面负担
• 配置化开发：通过JSON配置就能实现复杂图表
• 扩展性强：支持自定义系列和视觉映射
• 社区活跃：遇到问题容易找到解决方案

实测下来，用ECharts实现甘特图需要解决三个关键问题：

1. 如何把日期数据转换为坐标数值？
2. 怎样用柱状图模拟甘特图的时间跨度效果？
3. 如何处理未开工时段的视觉呈现？

2. 数据转换：从日期到坐标的魔法

2.1 日期差值计算原理

甘特图的本质是时间跨度可视化，但ECharts的坐标系只认数值。我们需要把开始/结束日期转换为天数差值。这里有个坑：直接使用时间戳相减会得到毫秒数，需要转换单位：

javascript复制function dateToDays(start, end) {
  // 86400000 = 24*60*60*1000（毫秒/天）
  return Math.round((end.getTime() - start.getTime()) / 86400000) 
}

比如2023-04-01到2023-04-15的差值是14天。这个数字将成为柱状图的宽度值。

2.2 坐标系的双轴映射技巧

为了让X轴显示真实日期而非天数，需要玩个"障眼法"：

1. 主X轴：隐藏的数值轴（type: 'value'）
   • 范围从0到总天数（如项目周期456天）
2. 副X轴：显示的类目轴（type: 'category'）
   • 显示格式化后的月份标签（如['2023.04', '2023.05']）

关键配置示例：

javascript复制xAxis: [
  { // 真实坐标轴
    type: 'value',
    min: 0,
    max: totalDays,
    show: false