先看效果
代码展示
<template><h1>项目进度甘特图</h1><div id="app"><!-- Echarts 图表 --><div ref="progressChart" class="progressChart"></div></div>
</template><script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import axios from '@/utils/axios-config';
const progressChart = ref(null); // Ref for Echarts initializationonMounted(async () => {const projectId = localStorage.getItem('projectId');try {const response = await axios.get(`/project-node/get/${projectId}`);const projectData = response.data;// Initialize Echarts chart after fetching dataconst chart = echarts.init(progressChart.value);const option = {tooltip: {trigger: 'axis',formatter(params) {if (params[1].data && params[0].data) {return `<div>开始时间：${params[1].data}</div>` + `<div>结束时间：${params[0].data}</div>`;} else {return '';}},axisPointer: {type: 'shadow'}},grid: {containLabel: true,show: false,right: 80,left: 40,bottom: 40,top: 20,backgroundColor: '#fff'},legend: {data: ['持续时间'],align: 'auto',top: 'bottom'},xAxis: {type: 'time',position: 'top',axisTick: {show: false},axisLine: {show: false},splitLine: {show: true}},yAxis: {inverse: true,axisTick: {show: false},axisLine: {show: false},data: ['策划评审', '立项评审', '详细方案评审', '测试验证', '样机评审', '样机定版', '小批量评审', '批量评审', '结项 ']},//color: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple','#007acc','green'], // 自定义调色盘的颜色series: [{name: '持续时间',type: 'bar',stack: 'duration',itemStyle: {color: '#007acc',borderColor: '#fff',borderWidth: 1},zlevel: -1,data: [projectData.mastermindFinish,projectData.projectFinish,projectData.schemeFinish,projectData.testFinish,projectData.prototypeFinish,projectData.orderingFinish,projectData.smallbatchFinish,projectData.batchFinish,projectData.junctionFinish]},{name: '持续时间',type: 'bar',stack: 'duration',itemStyle: {color: '#fff'},zlevel: -1,z: 9,data: [projectData.mastermindPlan,projectData.projectPlan,projectData.schemePlan,projectData.testPlan,projectData.prototypePlan,projectData.orderingPlan,projectData.smallbatchPlan,projectData.batchPlan,projectData.junctionPlan]}]};chart.setOption(option);// Resize chart on window resizewindow.addEventListener('resize', () => {chart.resize();});} catch (error) {console.error('Error fetching project data:', error);}
});
</script><style scoped>
#app {display: flex;justify-content: center;align-items: center;
}
.progressChart {width: 80%;height: 500px;border: 1px solid #aaa;
}
</style>
)
