Echarts如何实现甘特图展示

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

1. 引入 ECharts 库

在你的 HTML 文件中，通过 script 标签引入 ECharts 库。你可以从 ECharts 官网下载库文件，或者使用 CDN 链接。

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

2. 准备数据

甘特图需要以下数据：

• 任务列表：包含任务的名称、开始时间和结束时间。
• 资源分配：表示每个任务分配给哪些资源。

例如：

const tasks = [
  { name: 'Task 1', start: '2022-01-01', end: '2022-01-10' },
  { name: 'Task 2', start: '2022-01-05', end: '2022-01-15' },
  { name: 'Task 3', start: '2022-01-10', end: '2022-01-20' },
];

const resources = [
  { name: 'Resource 1', tasks: [0, 1] },
  { name: 'Resource 2', tasks: [2] },
];

3. 初始化 ECharts 实例

在 HTML 文件中创建一个 div 元素，用于容纳甘特图。然后，在 JavaScript 中初始化 ECharts 实例。

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

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

4. 配置 ECharts 选项

设置 ECharts 的配置项，包括图表类型、数据、坐标轴等。

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    top: '10%',
    bottom: '10%',
  },
  xAxis: {
    type: 'time',
    boundaryGap: false,
  },
  yAxis: {
    type: 'category',
    data: resources.map((resource) => resource.name),
    inverse: true,
  },
  series: [
    {
      name: 'Tasks',
      type: 'bar',
      barWidth: '50%',
      data: tasks.map((task, index) => ({
        name: task.name,
        value: [new Date(task.start).getTime(), new Date(task.end).getTime()],
        resourceIndex: index % resources.length,
      })),
      encode: {
        x: [1],
        y: [0],
      },
    },
  ],
};

5. 设置 ECharts 配置项并渲染图表

将配置项设置到 ECharts 实例中，并渲染图表。

chart.setOption(option);

现在，你应该可以在浏览器中看到一个简单的甘特图。你可以根据需要调整配置项，以实现更复杂的功能和样式。更多关于 ECharts 和甘特图的详细信息，请参考 ECharts 官方文档：https://echarts.apache.org/zh/index.html