Vue甘特图
1.安装
npm i grace-charts echarts -S
2.注册组件
import { createApp } from 'vue';
import graceCharts from 'grace-charts';
const app = createApp(..options);
app.use(graceCharts);
3.使用组件
<script setup>
import { reactive, ref } from 'vue'
defineProps({
msg: String,
})
const gantt = reactive({
dataset: {
dimensions: ["id", "项目名称", "开始时间", "结束时间", "进度"],
source: [
{
id: 0,
开始时间: "2022-01-12",
项目名称: "项目1",
结束时间: "2022-01-28",
进度: 0.1,
},
{
id: 1,
项目名称: "项目2",
开始时间: "2022-01-12",
结束时间: "2022-01-28",
进度: 0.2,
},
{
id: 2,
项目名称: "项目3",
开始时间: "2022-01-12",
结束时间: "2022-01-28",
进度: 0.5,
},
{
id: 3,
项目名称: "项目4",
开始时间: "2022-03-01",
结束时间: "2022-04-01",
进度: 0.5,
},
{
id: 4,
项目名称: "项目5",
开始时间: "2022-05-12",
结束时间: "2022-06-28",
进度: 0.1,
},
{
id: 5,
项目名称: "项目6",
开始时间: "2022-02-12",
结束时间: "2022-06-28",
进度: 0.1,
},
{
id: 6,
项目名称: "项目6",
开始时间: "2022-02-12",
结束时间: "2022-06-28",
进度: 0.1,
},
{
id: 7,
项目名称: "项目6",
开始时间: "2022-02-12",
结束时间: "2022-06-28",
进度: 0.1,
},
{
id: 8,
项目名称: "项目6",
开始时间: "2022-02-12",
结束时间: "2022-06-28",
进度: 0.1,
},
{
id: 9,
项目名称: "项目6",
开始时间: "2022-02-12",
结束时间: "2022-06-28",
进度: 0.1,
},
{
id: 10,
项目名称: "项目6",
开始时间: "2022-02-12",
结束时间: "2022-06-28",
进度: 0.1,
},
],
},
startDateIndex: 2,
endDateIndex: 3,
finishRateIndex: 4,
layoutWidth: ['40%', '60%'],
height: '550px',
})
const events = {
click: (v) => {
console.log(v);
},
}
</script>
<template>
<grace-gantt
:dataset="gantt.dataset"
:startDateIndex="gantt.startDateIndex"
:endDateIndex="gantt.endDateIndex"
:finishRateIndex="gantt.finishRateIndex"
:events="events"
:ganttHeight="gantt.height"
:layoutWidth="gantt.layoutWidth"
></grace-gantt>
</template>
4.截图
001.png
