Echarts如何实现甘特图进度条

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以用于生成各种图表，包括甘特图。要在 ECharts 中实现甘特图进度条，你需要遵循以下步骤：

1. 引入 ECharts 库

首先，确保你已经在项目中引入了 ECharts 库。你可以从官方网站下载 ECharts 或者使用 CDN 链接。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

2. 创建一个 HTML 元素作为图表容器

在 HTML 文件中，创建一个元素（例如 div）作为图表的容器，并为其分配一个唯一的 ID。

<div id="ganttChart" style="width: 600px; height: 400px;"></div>

3. 准备数据

准备甘特图所需的数据，包括任务名称、开始时间、结束时间和进度。

const tasks = [
  {
    name: 'Task 1',
    start: '2022-01-01',
    end: '2022-01-10',
    progress: 0.6,
  },
  {
    name: 'Task 2',
    start: '2022-01-05',
    end: '2022-01-15',
    progress: 0.8,
  },
  // ...其他任务
];

4. 初始化 ECharts 实例

使用 echarts.init() 方法初始化一个 ECharts 实例，并将其绑定到图表容器元素上。

const chart = echarts.init(document.getElementById('ganttChart'));

5. 配置图表选项

创建一个包含甘特图配置的对象。这里是一个基本的配置示例：

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  xAxis: {
    type: 'time',
    boundaryGap: false,
  },
  yAxis: {
    type: 'category',
    data: tasks.map(task => task.name),
  },
  series: [
    {
      name: '进度',
      type: 'bar',
      barWidth: '80%',
      data: tasks.map(task => ({
        value: [task.start, task.end],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' },
          ]),
        },
        progress: {
          show: true,
          width: task.progress * 100,
        },
      })),
    },
  ],
};

6. 设置图表选项

将配置对象设置为 ECharts 实例的选项。

chart.setOption(option);

现在，你应该可以在浏览器中看到一个包含进度条的甘特图。你可以根据需要调整配置选项以满足你的需求。更多关于 ECharts 和甘特图的详细信息和示例，请参考官方文档：https://echarts.apache.org/zh/option.html#series-bar。