可以直接放到echarts（https://echarts.apache.org/examples/zh/editor.html?c=custom-gantt-flight）里看效果，

// 转换数据为甘特图格式
const data = [
  {
    "name": "项目11",
    "startDate": "2025-01-01",
    "endDate": "2025-01-25",
    "status": "pending"
  },
  {
    "name": "N1091（63.6K散货船）",
    "startDate": "2025-01-04",
    "endDate": "2025-01-18",
    "status": "notStarted"
  },
  {
    "name": "N1092（63.6K散货船）",
    "startDate": "2025-01-04",
    "endDate": "2025-01-09",
    "status": "notStarted"
  },
  {
    "name": "N1093（63.6K散货船）",
    "startDate": "2025-01-04",
    "endDate": "2025-01-08",
    "status": "notStarted"
  },
  {
    "name": "N787（154K穿梭油轮）",
    "startDate": "2025-01-04",
    "endDate": "2025-01-22",
    "status": "notStarted"
  },
  {
    "name": "N1150（浮船坞）",
    "startDate": "2025-01-04",
    "endDate": "2025-01-24",
    "status": "notStarted"
  },
  {
    "name": "N1141（63.6K散货船）",
    "startDate": "2025-01-14",
    "endDate": "2025-01-18",
    "status": "notStarted"
  },
  {
    "name": "N1142（63.6K散货船）",
    "startDate": "2025-01-14",
    "endDate": "2025-01-21",
    "status": "notStarted"
  },
  {
    "name": "N1102（2万吨转载驳）",
    "startDate": "2025-01-24",
    "endDate": "2025-01-31",
    "status": "notStarted"
  },
  {
    "name": "N1102（2万吨转载驳）",
    "startDate": "2025-01-04",
    "endDate": "2025-01-20",
    "status": "notStarted"
  },
  {
    "name": "N1102（2万吨转载驳）",
    "startDate": "2025-01-14",
    "endDate": "2025-01-17",
    "status": "notStarted"
  }
];

// 日期范围：从2025年01月01日到2026年06月30日
let allDates = [];
const startDate = new Date("2025-01-01");
const endDate = new Date("2026-06-30");

for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
  allDates.push(formatDate(d));
}

let categories = data.map(item => item.name);

// 将日期字符串转换为可比较的时间戳
function parseDate(dateStr) {
  return new Date(dateStr).getTime();
}

// 生成年月格式的字符串
function formatDate(dateString) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 1月到12月
  const day = String(date.getDate()).padStart(2, '0'); // 日
  return `${year}年${month}月${day}日`;
}

// 根据status设置颜色
function getColorByStatus(status) {
  switch(status) {
    case 'pending': return '#f39c12'; // 灰色
    case 'notStarted': return '#bd6d6c'; // 红色
    default: return '#75d874'; // 默认绿色
  }
}

// 转换数据为甘特图格式
const transformedData = data.map(item => ({
  name: item.name,
  value: [
    categories.indexOf(item.name),  // Y轴，使用项目名称的索引
    parseDate(item.startDate), // 起始日期
    parseDate(item.endDate),   // 结束日期
  ],
  itemStyle: {
    normal: {
      color: getColorByStatus(item.status),
    },
  },
}));

// 渲染每个项目的条形
function renderItem(params, api) {
  var categoryIndex = api.value(0);  // 获取项目名称对应的Y坐标索引
  var start = api.coord([api.value(1), categoryIndex]);  // 起始日期
  var end = api.coord([api.value(2), categoryIndex]);  // 结束日期
  var height = api.size([0, 1])[1] * 0.6;  // 条形高度
  var rectShape = echarts.graphic.clipRectByRect(
    {
      x: start[0],
      y: start[1] - height / 2,
      width: end[0] - start[0],
      height: height,
    },
    {
      x: params.coordSys.x,
      y: params.coordSys.y,
      width: params.coordSys.width,
      height: params.coordSys.height,
    }
  );
  return rectShape && {
    type: 'rect',
    transition: ['shape'],
    shape: rectShape,
    style: api.style(),
  };
}

option = {
  visualMap: {
    left: 'right',
    top: 0,
    orient: 'horizontal',
    min: 0,
    max: 200,
    itemHeight: 10,
    itemWidth: 10,
    align: 'left',
    inverse: true,
  },
  tooltip: {
    formatter: function (params) {
      let str = `${params.marker + params.name}<br/>
                  开始：${formatDate(params.value[1])}<br/>
                  结束：${formatDate(params.value[2])}<br/>`;
      return str;
    },
  },
  title: {
    show: true,
    text: '项目进度甘特图',
    subtext: '',
    left: '5%',
    top: '5%',
    textStyle: {
      fontSize: 14,
      height: 40,
    },
    subtextStyle: {
      fontSize: 10,
    },
  },
  dataZoom: [
    {
      type: 'slider', // 类型为滑动条
      show: true, // 确保显示
      start: 0, // 初始缩放的开始位置（0%）
      end: 50,  // 初始缩放的结束位置（50%）
      bottom: '7%', // 将缩放条放置在图表底部
      handleSize: '10%', // 设置缩放条滑块的大小
      handleStyle: {
        color: '#1f78b4', // 缩放滑块颜色
      },
      textStyle: {
        color: '#333', // 控件文本颜色
      },
      labelFormatter: function (value) {
        // 可以自定义标签显示
        return formatDate(value);
      }
    },
    {
      type: 'inside', // 内部缩放条，鼠标滚轮缩放
      show: true, // 显示
      filterMode: 'weakFilter',
      start: 0,
      end: 50,
    }
  ],
  grid: {
    top: '10%',
    bottom: '15%',
    left: '15%',
    right: '10%',
  },
  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: function (val) {
        return formatDate(val);
      },
      interval: 5, // 设置每隔5个日期显示一个标签
      rotate: 15, // 旋转标签，避免重叠
    },
    
    boundaryGap: false,
  },
  yAxis: {
    data: categories,
    axisTick: { show: false },
    splitLine: { show: false },
    axisLine: { show: false },
  },
  series: [
    {
      type: 'custom',
      renderItem: renderItem,
      encode: {
        x: [1, 2],
        y: 0,
      },
      data: transformedData,
    },
  ],
};

效果如下，可拖拽，可缩放

截屏2025-01-03 16.03.26.png