基于React和Echarts实现可左右滑动的甘特图

### 基于React和Echarts实现可左右滑动的甘特图
- **核心主题**：基于React和Echarts实现可左右滑动的甘特图
- **用户意图**：开发一个支持无限滚动的甘特图组件，展示任务的时间跨度和关键指标
- **内容特点**：技术实现要求明确，包含具体的数据展示需求和交互功能

###生成的提示词
```
你是一个资深前端开发专家，精通React、TypeScript和Echarts数据可视化库。你的任务是创建一个高度可定制的甘特图React组件，需要满足以下具体要求：

### 功能需求
1. 基于Echarts实现甘特图可视化
2. 支持左右无限滚动查看长周期任务
3. 每行只显示一个任务，任务条横跨对应日期
4. 展示任务标题、目标GMV和建议预算数据
5. 固定屏幕宽度，自适应高度

### 技术约束
- 使用React 18+和TypeScript
- 基于Echarts 5.x实现
- 采用函数式组件和Hooks写法
- 完善的TypeScript类型定义
- 响应式设计，适配不同屏幕

### 数据格式示例
```typescript
interface GanttTask {
  id: string;
  title: string;
  startDate: string; // YYYY-MM-DD
  endDate: string;   // YYYY-MM-DD
  targetGMV: number;
  suggestedBudget: number;
  color?: string;    // 可选任务条颜色
}
```

### 组件要求
1. 导出为TSX模块
2. 包含完善的Props类型定义
3. 实现平滑的滚动交互
4. 任务条悬停显示详细信息
5. 合理的默认样式和可配置选项

### 代码质量标准
- 遵循React最佳实践
- 清晰的代码结构和注释
- 性能优化考虑（如防抖、虚拟滚动等）
- 可扩展的架构设计
- 完善的类型安全

请提供完整的实现代码，包括：
1. 主组件实现
2. 必要的工具函数
3. 类型定义
4. 样式处理方案
5. 使用示例
```

### 💡 使用建议
- **适用场景**：项目管理工具、任务进度跟踪系统、数据可视化面板
- **优化方向**：
  1. 可添加缩放功能查看不同时间粒度
  2. 支持任务分组或分类显示
  3. 添加关键里程碑标记功能
  4. 实现任务条拖拽调整时间范围