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