vue3 甘特图

<template>
  <div ref="ganttChart" style="height: 400px;"></div>
</template>

<script>
import * as d3 from 'd3';
import { onMounted, ref } from 'vue';

export default {
  name: 'GanttChart',
  setup() {
    const ganttChart = ref(null);

    onMounted(() => {
      // Sample data for the Gantt chart
      const data = [
        { task: "Task 1", start: new Date(2023, 0, 1), end: new Date(2023, 0, 7) },
        { task: "Task 2", start: new Date(2023, 0, 5), end: new Date(2023, 0, 12) },
        { task: "Task 3", start: new Date(2023, 0, 8), end: new Date(2023, 0, 15) }
      ];

      const margin = { top: 20, right: 30, bottom: 30, left: 40 };
      const width = 800 - margin.left - margin.right;
      const height = 400 - margin.top - margin.bottom;

      const svg = d3.select(ganttChart.value)
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);

      const x = d3.scaleTime()
        .domain(d3.extent(data, d => d.start))
        .range([0, width]);

      const y = d3.scaleBand()
        .domain(data.map(d => d.task))
        .range([0, height])
        .padding(0.1);

      svg.append("g")
        .attr("transform", `translate(0,${height})`)
        .call(d3.axisBottom(x));

      svg.append("g")
        .call(d3.axisLeft(y));

      svg.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", d => x(d.start))
        .attr("y", d => y(d.task))
        .attr("width", d => x(d.end) - x(d.start))
        .attr("height", y.bandwidth())
        .attr("fill", "steelblue");
    });

    return {
      ganttChart
    };
  }
};
</script>

<style scoped>
.bar {
  fill: steelblue;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用一个 div 元素作为甘特图的容器，并通过 ref 绑定到 ganttChart 变量。

2. 脚本部分 (<script>):

   • 导入 D3.js 和 Vue 的相关函数。
   • 定义 ganttChart 引用，用于在挂载时获取 DOM 元素。
   • 在 onMounted 生命周期钩子中初始化甘特图：
     • 创建一些示例任务数据。
     • 设置 SVG 画布的尺寸和边距。
     • 使用 D3.js 创建时间轴（X 轴）和任务轴（Y 轴）。
     • 绘制矩形条表示每个任务的时间段。

3. 样式部分 (<style scoped>):

   • 定义甘特图条的颜色为 steelblue。

这个示例展示了如何使用 Vue 3 和 D3.js 创建一个简单的甘特图。你可以根据需要调整数据和样式。