Vue实现简单可扩展甘特图的方法详解

甘特图作为一种流行的进度管理工具，已经广泛应用于IT、建筑、工程等领域。在Vue框架下，实现简单可扩展甘特图的方法是比较简单的。

第一步：安装并引入依赖

需要安装npm包vue-gantt-echarts，使用npm或者yarn进行安装，然后在Vue文件中引入。示例如下：

<template>
  <div>
    <gantt :data="chartData"></gantt>
  </div>
</template>

<script>
import Gantt from "vue-gantt-echarts";

export default {
  name: "GanttChart",
  components: {
    Gantt,
  },
  data() {
    return {
      chartData: [
        {
          id: 1,
          name: "任务1",
          start: "2021-08-01",
          end: "2021-08-07",
        },
        {
          id: 2,
          name: "任务2",
          start: "2021-08-08",
          end: "2021-08-14",
        },
      ],
    };
  },
};
</script>

第二步：配置数据

配置数据包括任务的名称、起始时间、结束时间、进度等。示例如下：

{
  id: 3,
  name: "任务3",
  start: "2021-08-15",
  end: "2021-08-21",
  progress: 30
}

第三步：自定义样式

可以通过属性配置或者自定义样式表来自定义甘特图的样式，包括任务栏、进度条、文本等。例如：

<gantt 
  :data="chartData"
  bar-height="20"
  bar-width="30%"
  bar-text-offset="5"
  bar-style="{backgroundColor: '#f1f1f1', borderRadius: '5px', borderColor: '#ccc'}"
  progress-style="{backgroundColor: '#52c41a'}"
></gantt>

示例一：简单甘特图

下面是一个简单的甘特图示例，展示了两个任务：

<template>
  <div>
    <gantt :data="chartData"></gantt>
  </div>
</template>

<script>
import Gantt from "vue-gantt-echarts";

export default {
  name: "SimpleGantt",
  components: {
    Gantt,
  },
  data() {
    return {
      chartData: [
        {
          id: 1,
          name: "任务1",
          start: "2021-08-01",
          end: "2021-08-07",
        },
        {
          id: 2,
          name: "任务2",
          start: "2021-08-08",
          end: "2021-08-14",
        },
      ],
    };
  },
};
</script>

该甘特图包含两个任务，任务1从2021年8月1日开始，到8月7日结束；任务2从8月8日开始，到8月14日结束。

示例二：自定义样式的甘特图

下面是一个自定义样式的甘特图示例，包含三个任务：

<template>
  <div>
    <gantt 
      :data="chartData"
      bar-height="20"
      bar-width="30%"
      bar-text-offset="5"
      bar-style="{backgroundColor: '#f1f1f1', borderRadius: '5px', borderColor: '#ccc'}"
      progress-style="{backgroundColor: '#52c41a'}"
    ></gantt>
  </div>
</template>

<script>
  import Gantt from "vue-gantt-echarts";

  export default {
    name: "CustomizedGantt",
    components: {
      Gantt,
    },
    data() {
      return {
        chartData: [
          {
            id: 1,
            name: "任务1",
            start: "2021-08-01",
            end: "2021-08-07",
            progress: 50
          },
          {
            id: 2,
            name: "任务2",
            start: "2021-08-08",
            end: "2021-08-14",
            progress: 70
          },
          {
            id: 3,
            name: "任务3",
            start: "2021-08-15",
            end: "2021-08-21",
            progress: 30
          },
        ],
      };
    },
  };
</script>

该甘特图包含三个任务，每个任务的进度分别为50%、70%、30%。通过bar-height、bar-width等属性自定义了任务栏和进度条的样式。

以上是 示例一 和 示例二 的示例代码和演示效果。通过以上步骤，我们可以轻松实现简单可扩展的甘特图。