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>