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: ['Task 1', 'Task 2'] },
  { name: 'Resource 2', tasks: ['Task 3'] },
];

3. 初始化 ECharts 实例

在 HTML 文件中创建一个用于显示甘特图的 div 元素，并设置其宽度和高度。然后，使用 echarts.init() 方法初始化 ECharts 实例。

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

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

4. 配置 ECharts 选项

创建一个包含甘特图配置的对象。主要配置项包括：

• grid：设置图表的边距和间距。
• xAxis：设置 x 轴的类型、边界和刻度。
• yAxis：设置 y 轴的类型和刻度。
• series：设置甘特图的系列数据，包括任务的名称、开始时间、结束时间和资源。

const option = {
  grid: {
    left: '10%',
    right: '10%',
    top: '10%',
    bottom: '10%',
  },
  xAxis: {
    type: 'time',
    boundaryGap: false,
    min: new Date('2022-01-01'),
    max: new Date('2022-01-31'),
  },
  yAxis: {
    type: 'category',
    data: resources.map((resource) => resource.name),
  },
  series: [
    {
      type: 'bar',
      barWidth: '50%',
      data: tasks.map((task) => ({
        name: task.name,
        value: [new Date(task.start), new Date(task.end)],
        resource: task.resource,
      })),
      encode: {
        x: [1, 2],
        y: 0,
      },
    },
  ],
};

5. 设置 ECharts 选项

使用 setOption() 方法将配置应用到 ECharts 实例。

chart.setOption(option);

现在，你应该可以在浏览器中看到一个简单的甘特图。你可以根据需要调整配置项，以实现更复杂的功能和样式。更多关于 ECharts 和甘特图的配置选项，请参考 ECharts 官方文档：

• ECharts 官方文档：https://echarts.apache.org/zh/index.html
• 甘特图示例：https://echarts.apache.org/examples/zh/editor.html?c=gantt-simple