vue3使用Echarts图表生成项目进度甘特图

先看效果

代码展示

<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 initialization   onMounted(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 data     const 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 resize     window.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>