echarts绘制甘特图

说在前面

项目上有需求,需要在大屏上展示进度甘特图,调研了DHTMLX普加甘特图,效果都不是特别符合需求现状,查询了一些博客,决定使用echarts来绘制甘特图。

实现效果展示

在这里插入图片描述

实现思路分析

1、应该采用柱状图,且柱子横向分布

将data赋值给yAxis即可;

2、纵坐标应为进度图中的进度节点

正常赋值即可,注意顺序,可添加inverse: true,改变顺序,axisTick: { show: false } 去除刻度

3、甘特图数据量化

这里需要注意的是,对于进度计划中提出的开始、结束日期是不好量化的,所以这里要转换一下思路;
使用结束日期减去开始日期来计算天数,来表达某条任务持续的时间。

4、横坐标应展示日期

上面说了使用差值天数来标识任务持续时间,所以这里单纯设置日期的横坐标是无法对应的。
设置两个x轴,一个x轴是日期(x1),另外一个x轴type为value类型(x2),可以理解为x2是真实的x轴,x1是虚假的x轴,但是我们要将x2进行隐藏,来达到模拟的效果;
当然,这两个轴的数据需要对应,下面会展开说。

5、对于一些前期未开工的数据处理

柱状图的数据是连续的,如果需要实现前面“镂空”的效果,则需要再次使用双x轴的视觉欺骗,使用纯透明的柱状图来填充前面缺失的部分;

部分技术实现代码

计算天数差值:

subDate(startDate, endDate) {let result = (endDate.getTime() - startDate.getTime()) / 3600000 / 24;return result
},

x轴的设置:
加入我们想展示甘特图从’2023-04-01’ - '2024-06-30’之间的数据,则x轴应为:

        let xAxisData = ['2023.04','2023.05','2023.06','2023.07','2023.08','2023.09','2023.10','2023.11','2023.12','2024.01','2024.02','2024.03','2024.04','2024.05','2024.06'];xAxis: [{ // 真实的x轴,但是隐藏了min: 0,max: this.subDate(new Date('2023-04-01'), new Date('2024-06-30')) + 1,type: "value",axisLabel: { show: false },splitLine: { show: false },},{ // 虚假的x轴,展示出来type: "category",boundaryGap: true,data: xAxisData,axisTick: { show: false }, //刻度axisLine: { show: false },splitLine: {show: true,},
]

数据从0开始,到天数总数为止,比如2023年4月有30天,横轴总长就代表了30天,也代表了2023-04这个刻度。以此类推,表示日期的x轴对应的天数就 等于数值的天数了,完成了数据的对应。

透明柱状图数据计算

let minDate = new Date("2023-04-01");
touming.push(this.subDate(minDate, new Date(item.planBeginDate)))

开始日期为4.1号,比如任务a计划开始时间为4.15号,则距离y轴的距离就应该为 14,这部分就置为透明即可。
带颜色柱状图数据计算

notSelectedData.push(this.subDate(new Date(item.planBeginDate),new Date(item.planEndDate)) + 1
);

柱状图绘制:

let yanse = {normal: { barBorderColor: "rgba(0,0,0,0)", color: "rgba(0,0,0,0)" },emphasis: { barBorderColor: "rgba(0,0,0,0)", color: "rgba(0,0,0,0)" },
};
series: [{type: "bar",barWidth: 15,stack: "stackNotSelected", //叠加效果barGap: "-100%", //重叠效果itemStyle: transparentStyle,data: touming,},{type: "bar",barWidth: 15,stack: "stackNotSelected", //叠加效果barGap: "-100%", //重叠效果itemStyle: {normal: {color: "#49A7FF",},},data: yanse,label: {show: false,},}
],

说到最后

本文介绍了使用echarts实现甘特图效果的实现思路分析以及部分技术方案,有兴趣的各位可以动手实践。

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

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

相关文章

ORACLE常用基础

. 1.oracle开机启动流程 su - oracle lsnrctl start lsnrctl status sqlplus / as sysdba startup 2、如何查看数据库版本 select * from v$version; 3.如何查看用户从那个设备连接的数据库 SELECT DISTINCT machine , terminal FROM V$SESSION; 4.如何查看表结构 selec…

Android 14重要更新预览

Android 14重要更新预览 国际化 Android 14 在 Android 13 的基础上进一步扩展了按应用设定语言功能,提供了一些额外的功能: 自动生成应用的 localeConfig:从 Android Studio Giraffe Canary 7 和 AGP 8.1.0-alpha07 开始,您可以…

【设计模式——学习笔记】23种设计模式——观察者模式Observer(原理讲解+应用场景介绍+案例介绍+Java代码实现)

文章目录 案例引入原始方案实现实现问题分析 介绍基础介绍登场角色 案例实现案例一类图实现分析 案例二类图实现 观察者模式在JDK源码的应用总结文章说明 案例引入 有一个天气预报项目,需求如下: 气象站可以将每天测量到的温度、湿度、气压等等以公告的…

Java爬虫

什么是爬虫? 通过请求,从而去获取互联网上的各种数据与资源,如文字,图片,视频。 本质上原理都一样,都是通过api请求,然后服务器就会发给你信息,然后你再根据这些信息去提取你想要的…

Apache Kafka Learning

目录 一、Kafka 1、Message Queue是什么? 2、Kafka 基础架构 3、Kafka安装 二、Maven项目测试 1、Topic API 2、生产者&消费者 一、Kafka Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写。Kafka是一种高吞吐量的分布式…

Flutter 实现按位置大小比例布局的控件

文章目录 前言一、如何实现?1、数值转成分数2、RowFlexible布局横向3、ColumnFlexible布局纵向 二、完整代码三、使用示例1、基本用法2、四分屏3、六分屏4、八分屏5、九分屏6、414分屏 总结 前言 做视频监控项目时需要需要展示多分屏,比如2x2、3x3、414…

使用 LangChain 搭建基于 Amazon DynamoDB 的大语言模型应用

LangChain 是一个旨在简化使用大型语言模型创建应用程序的框架。作为语言模型集成框架,在这个应用场景中,LangChain 将与 Amazon DynamoDB 紧密结合,构建一个完整的基于大语言模型的聊天应用。 本次活动,我们特意邀请了亚马逊云科…

pyspark 判断 Hive 表是否存在

Catalog.tableExists(tableName: str, dbName: Optional[str] None) → booltableName:表名 dbName:库名(可选) return:bool 值 from pyspark.sql import SparkSession spark SparkSession \.builder \.appName(tableExists) \.config(spark.num.execu…

C#类型转换

🍟数据类型 大体分为三个大类型:整型(其中又分为有符号整型、无符号整型)、浮点型、特殊类型 注意:浮点数在初始化时要在值后加上后缀,双精度浮点数decimal的后缀为“M”、单精度浮点数double和float的后…

AI相机“妙鸭相机”原理分析和手动实现方案

妙鸭相机 一个通过上传大约20张照片,生成专属自拍。在2023年7月末爆火,根据36Kr报道,妙鸭相机系阿里系产品,挂靠在阿里大文娱体系下,并非独立公司。 使用方法是上传20张自拍照片,之后可以选择模板生成自己…

算法通过村——Hash和队列问题解析

算法的备胎Hash和找靠山的队列 备胎Hash Hash,不管是算法,还是在工程中都会大量使用。很多复杂的算法问题都用Hash能够轻松解决,也正是如此,在算法例就显得没什么思维含量,所以Hash是应用里的扛把子,但在算…

C#实现端口扫描和执行cmd命令、调用摄像头

C#端口扫描 using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Sockets; using System.Threading;namespace PortScanner {class Program{static void Main(string[] args){// 设置扫描参数string host "localho…

【安全测试】安全测试威胁建模设计方法STRIDE

目录 背景 TM(ThreatModeling) 实践 具体流程 资料获取方法 背景 目前安全测试一般都存在如下问题: 安全测试人员不懂业务,业务测试人员不懂安全,安全测试设计出现遗漏是无法避免的安全测试点繁多复杂,单点分析会导致风险暴…

构建高效读写分离MySQL主从复制架构,应对高可用挑战!

前言 在现代数据库架构中,MySQL主从复制技术扮演着重要角色。它不仅可以提升数据库性能和可扩展性,还赋予系统卓越的高可用性和灾难恢复能力。本文将深入剖析MySQL主从复制的内部机制,同时通过一个实际案例,展示其在实际场景中的…

selenium 截屏

当前环境: Windows 10 Python 3.7 selenium 3.141.0 Google Chrome 115.0.5790.110 (64 位) from selenium import webdriver import base64if __name__ __main__:#driver webdriver.Chrome()driver.get(https://www.baidu.com/)# 1.…

torch.multiprocessing

文章目录 张量共享torch.multiprocessing.spawnmultiprocessing.Pool与torch.multiprocessing.Pool阻塞非阻塞map阻塞非阻塞 starmap torch.multiprocessing是具有额外功能的multiprocessing,其 API 与multiprocessing完全兼容,因此我们可以将其用作直接…

简单游戏截图_可控截取内容2

一个需求 我需要在场景中截取不同层级的截图(如只截模型或只截UI或只截外部相加看到的画面 或全都截或和Shader配合呈现人眼夜视仪热成像的画面切换) 将截图排到列表中,在场景UI中展示出来 如何做 相机要能够看到不同的画面 将当前帧画面存储下来 将存储的画面展示出…

【数字IC基础】时序违例的修复

时序违例的修复 建立时间违例保持时间违例Buffer 插入位置参考资料 建立时间违例 基本思路是减少数据线的延时、减少 Launch clock line 的延时、增加capture clock line的delay 加强约束,重新进行综合,对违规的路径进行进一步的优化,但是一…

【C++】万能引用、完美转发

万能引用 万能引用的格式如下&#xff1a; template<typename T> void PerfectForward(T&& t) {Fun(t); }虽然写的是&&和右值引用类似&#xff0c;但是它可以接收左值引用和右值引用 当传过来的是左值&#xff0c;那么T&&会折叠为T&。 引用折…

【2023年电赛国一必备】E题报告模板--可直接使用

任务 图1 任务内容 要求 图2 基本要求内容 图3 发挥部分内容 说明 图4 说明内容 评分标准 图5 评分内容 正文 &#xff08;部分&#xff09; 摘要 本文使用K210芯片设计了一个运动目标控制与自动追踪系统。系统包括使用深度学习进行识别激光位置&#xff0c;其中红色激…