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 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/45946.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微博图片下载助手

开发的一款「微博图片下载助手」支持一键保存用户图片 / 原图保存 / 支持保存 live 动图&#xff0c;支持免登录&#xff0c;但是不支持去水印哦。另外软件是易语言编写的&#xff0c;一些杀毒软件可能会误报。 链接: https://pan.baidu.com/s/1ZwDuuS2AF0-nxGgYYPve_g?pwdwn…

vscode离线方式远程到没有网络的服务器上

1.首先要在本地和远端服务器都安装vscode的安装包&#xff0c;无网络离线安装。 2.本地vscode离线安装Remote-SSH插件 3.点击vscode最左边的ssh链接栏&#xff0c;创建ssh链接到远端无网络服务器。会报错无法下载vscode-server_x86.tar.gz&#xff0c;根据报错按F12可以看到下载…

Qt项目中添加自定义文件夹,进行整理归类

Qt项目中添加文件夹进行归类 1、在windows的工程目录下创建一个文件夹&#xff0c;如widgets 2、将.h 、.cpp、.ui文件拷贝到windows该文件夹widgets 3、在qt工程中&#xff0c;根目录右键&#xff0c;选择添加现有文件&#xff0c;批量选择 .h 、.cpp、.ui文件之后&#xf…

内网信息收集:手动、脚本和工具查IP、端口

1.手动查IP和端口 2.工具查IP 3.工具查端口 我们在内网中拿下目标机器后&#xff0c;需要进行一系列的信息收集&#xff0c;以下为总结的收集方法 1.手动信息收集&#xff1a; 以下命令在CS执行时命令前须加shell,如&#xff1a;shell ipconfig 1.收集IP网卡&#xff1a; ip…

【date】

date 设置时区为亚洲/上海以yyyy-MM-dd形式显示日期以yyyy-mm-dd HH:Mi:SS形式显示日期 设置时区为亚洲/上海 sudo timedatectl set-timezone Asia/Shanghai sudo systemctl restart chronyd.service #或者修改配置文件 sudo vi /etc/sysconfig/clock #将ZONE"" 更改…

使用Jan,把你的PC变成AI机器!支持在Windows,MacOS,Linux上运行大语言模型

最近有个概念叫“AIPC” ,听起来很牛逼,其实就是让PC运行AI算法&软件,比如运行大语言模型。 我们并不需要特意去买台联想电脑,完全可以用现成的软件把你的电脑变成AIPC。 昨天分享了一个运行Llama3大语言模型的软件叫LMStudio。 有人在评论中反馈,有更好的开源软件叫…

LabVIEW学习-LabVIEW储存Excel表格

上述实现了将格式化的时间和正弦波的频率振幅相位以及正弦波数据输入到excel表格中。 下面介绍其中使用到的函数&#xff1a; 1. 所在位置&#xff0c;函数选板->定时->获取日期/时间(秒) 2. 将获取的时间进行格式化处理&#xff0c;输出格式化的日期/时间字符串。 函…

MySQL更新和删除(DML)

DML-修改数据 UPDATE 表名 SET 字段1 值1&#xff0c;字段2值2&#xff0c;....[WHERE 条件] 例如 1.这个就是把employee表中的这个name字段里面并且id字段为1的名字改为itheima update employee set nameitheima where id 1; 2.这个就是把employee这个表中的name字段和…

acrobat 中 PDF 复制时不能精确选中所选内容所在行的一种解决方法

现象&#xff1a;划取行的时候&#xff0c;自动扩展为多行 如果整段选中复制&#xff0c;粘贴后是乱码 解决步骤 识别完&#xff0c;保存 验证 可以按行复制了。

Android系统中LogMessage在那个so库中,需要引用?

在Android系统中&#xff0c;LogMessage 并不是一个直接对应于某个特定 .so&#xff08;共享对象&#xff09;库中的函数或类的标准名称。Android的日志系统通常是通过Android的日志API来管理的&#xff0c;这些API主要定义在Java层&#xff0c;并且底层实现可能会依赖于C/C的日…

【算法】平衡二叉树

难度&#xff1a;简单 题目 给定一个二叉树&#xff0c;判断它是否是 平衡二叉树 示例&#xff1a; 示例1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;true 示例2&#xff1a; 输入&#xff1a;root [1,2,2,3,3,null,null,4,4] 输出&…

7.8 CompletableFuture

Future 接口理论知识复习 Future 接口&#xff08;FutureTask 实现类&#xff09;定义了操作异步任务执行的一些方法&#xff0c;如获取异步任务的执行结果、取消任务的执行、判断任务是否被取消、判断任务执行是否完毕等。 比如主线程让一个子线程去执行任务&#xff0c;子线…

day05-matplotlit设置图形各种参数

matplotlib网格 1. 显示网格:plt.grid() plt.grid(True, linestyle "--",color "gray", linewidth "0.5",axis x)显示网格linestyle&#xff1a;线型&#xff0c;“–”:表示网格是虚线&#xff0c;默认为实线color&#xff1a;网格颜色li…

债券久期及其与债券价格波动的关系

债券久期及其与债券价格波动的关系 什么是债券久期&#xff1f; “久期”是一个用来衡量债券对利率变化敏感度的指标。它不仅表示债券的平均回收期&#xff0c;还考虑了债券的所有未来现金流&#xff08;包括利息和本金&#xff09;的时间价值。久期越长&#xff0c;债券对利…

晚上定时编译android系统

1、问题 可能偶然想晚上定时编译android系统 2、解决 at.sh #!/bin/sh# at -f at.sh now1min # at -lset -e set -xecho $SHELLecho at build begin /bin/date >> at_build.log/bin/bash -c source build/envsetup.sh >> at_build.log 2>&1; lunch xxx-us…

数列分块<1>

本期是数列分块入门<1>。该系列的所有题目来自hzwer在LOJ上提供的数列分块入门系列。 Blog:http://hzwer.com/8053.html sto hzwer orz %%% [转载] -----------------------------------------------------------------…

软件建模概要

什么是软件建模&#xff1f;软件建模体现了软件设计的思想&#xff0c;在需求和实现之间架起了一座桥梁&#xff0c;通过模型指导软件系统的具体实现。模型不是软件的完备表示&#xff0c;而是所研究系统的一种抽象。 软件建模原则&#xff1a; 选择正确的模型&#xff0c;模…

JAVA设计模式>>结构型>>适配器模式

本文介绍23种设计模式中结构型模式的适配器模式 目录 1. 适配器模式 1.1 基本介绍 1.2 工作原理 1.3 适配器模式的注意事项和细节 1.4 类适配器模式 1.4.1 类适配器模式介绍 1.4.2 应用实例 1.4.3 注意事项和细节 1.5 对象适配器模式 1.5.1 基本介绍 1.5.2 …

VUE+ELEMENTUI表格的表尾合计

<el-table :data"XXXX" :summary-method"getSummaries" show-summary "true" > getSummaries(param) { const { columns, data } param; const sums []; columns.forEach((column, index) > { if (index 0) { sums[index] 合计; }…

关于RiboSeq分析流程的总结

最近关注了一下RiboSeq的分析方法&#xff0c;方法挺多的&#xff0c;但是无论哪种软件&#xff0c;都会存在或多或少的问题&#xff0c;一点问题不存在的软件不存在&#xff0c;问题的原因出在&#xff0c;1.有的脚本是用python2编写的&#xff0c;目前python2已经不能用了 2.…