vue3+ts实现甘特图

Vue3 + TypeScript 实现甘特图通常需要结合一些库，如ECharts、AntV-G2等图表库来绘制时间轴上的任务进度。以下是基本步骤：

安装依赖：首先，你需要安装 Vue 的官方 CLI 并创建一个新的项目，然后安装 Vue3 和 TypeScript：
npm install -g create-vue-app
vue create your-project-name --type=typescript
登录后复制

引入库：在 main.ts 或 src/main.ts 文件中引入 ECharts 或 AntV-G2，并配置按需加载：
import { createApp } from 'vue';
import { ECharts } from '@antv/echarts';

// 如果使用 AntV-G2
import G from '@antv/g2';

createApp(App).use(ECharts).mount('#chart');
// 或者
const g = new G();
登录后复制

创建组件：创建一个名为 GanttChart.vue 的组件，用于显示甘特图。使用 TypeScript 来定义组件的数据模型和方法：
import { Component, Ref } from 'vue';
import ECharts from '@antv/echarts';

interface Task {
id: number;
name: string;
start: Date;
end: Date;
progress: number;
}

export default class GanttChart extends Component<{ tasks: Task[] }> {
private chartRef: Ref<ECharts>;

mounted() {
this.initChart();
}

initChart() {
this.chartRef.value = ECharts.init(document.getElementById('chart'));
// 初始化图表配置并渲染数据
// 示例配置：
const option: any = {
... // 根据你的需求配置甘特图选项
};
this.chartRef.value.setOption(option);
}
}
登录后复制

在父组件中使用甘特图组件，并传入数据：
<template>
<div ref="chart" style="height: 500px;"></div>
<gantt-chart :tasks="yourTasksData"></gantt-chart>
</template>

<!-- ... -->
</script>
登录后复制