<!--
  模板: 甘特图 (gantt / range bar)
  引擎: ApexCharts
  数据形态: S14 时间区间/进度
  DOM ID: chart-gantt
  说明: 横向条形，x 轴=时间，条长度=区间，适合项目进度、监察计划执行窗口
  前置: HTML 需内联 apexcharts.min.js
-->
(function() {
  const dom = document.getElementById('chart-gantt');
  const options = {
    chart: { type: 'rangeBar', height: 400 },
    series: [
      {
        name: '任务A',
        data: [{ x: '阶段1', y: [new Date('2026-01-05').getTime(), new Date('2026-01-20').getTime()] }]
      },
      {
        name: '任务B',
        data: [{ x: '阶段1', y: [new Date('2026-01-10').getTime(), new Date('2026-01-28').getTime()] }]
      },
      {
        name: '任务C',
        data: [{ x: '阶段1', y: [new Date('2026-01-18').getTime(), new Date('2026-02-05').getTime()] }]
      },
      {
        name: '任务D',
        data: [{ x: '阶段1', y: [new Date('2026-01-25').getTime(), new Date('2026-02-15').getTime()] }]
      }
    ],
    plotOptions: {
      bar: { horizontal: true, borderRadius: 4 }
    },
    xaxis: { type: 'datetime' },
    tooltip: {
      x: { format: 'yyyy-MM-dd' }
    },
    colors: ['#3b82f6', '#22c55e', '#f59e0b', '#a855f7']
  };
  const chart = new ApexCharts(dom, options);
  chart.render();
  window.addEventListener('resize', () => chart.render());
})();