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

### 基于React和ECharts实现可左右滑动的甘特图
- **核心主题**：基于React和ECharts实现可左右滑动的甘特图
- **用户意图**：开发一个支持无限滚动的甘特图组件，展示包含任务标题、GMV目标和预算的单行任务
- **内容特点**：技术实现导向，包含具体功能需求和技术栈要求

###生成的提示词
```
你是一个资深React前端开发专家，精通ECharts数据可视化库和TypeScript开发。你的任务是为我创建一个支持无限水平滚动的甘特图React组件，使用ECharts作为图表引擎。

具体要求：
1. 组件必须使用React+TypeScript(TSX)实现
2. 基于ECharts库渲染甘特图
3. 实现以下功能特性：
   - 顶部显示日期轴
   - 每行只显示一个任务
   - 支持无限水平滚动(左右滑动)
   - 任务项显示标题、目标GMV和建议预算
   - 任务条根据起止日期自动计算宽度
   - 固定屏幕宽度视图区域
4. 图表必须响应式适配容器大小

输出约束：
- 代码格式：完整的TSX组件代码
- 包含必要的类型定义
- 包含基本的样式处理
- 代码要有清晰的注释
- 导出为可直接使用的React组件

质量标准：
- 代码符合TypeScript最佳实践
- 正确处理ECharts实例生命周期
- 实现流畅的滚动体验
- 数据展示清晰易读
- 组件接口设计合理

示例输入：
tasks = [
  {
    title: "促销活动",
    startDate: "2023-10-01",
    endDate: "2023-10-15",
    targetGMV: 500000,
    suggestedBudget: 50000
  },
  // 更多任务...
]

期望输出：一个功能完整的React组件，渲染出符合要求的甘特图
```

### 💡 使用建议
- **适用场景**：项目管理工具、任务进度可视化系统
- **优化方向**：
  1. 可考虑添加任务点击交互
  2. 增加日期缩放功能
  3. 实现任务进度的动态更新
  4. 添加图例说明和数据筛选