vue+Echarts实现多设备状态甘特图
目录
1.效果图
2.代码
3.注意事项
Apache ECharts ECharts官网,可在“快速上手”处查看详细安装方法
1.效果图
可鼠标滚轮图表和拉动下方蓝色的条条调节时间细节哦
(注:最后一个设备没有数据,所以不显示任何矩形)

2.代码
根据每个设备的不同的状态,和对应状态的持续时间渲染矩形
html部分
<div id="myechart" :style="{ float: 'left', width: '100%', height: '100%' }"></div>
js部分
// 甘特图 数据处理及挂载函数,可在获取到数据或者数据更新时调用drawEchart() {// this.newEqp为数据集,从后端获取var data = this.newEqp// 设定状态对应显示的颜色var types = [{ name: '辅料待料', color: '#07c160' },{ name: '下游待料', color: '#269abc' },{ name: '上游待料', color: '#edb217' },{ name: '其他停机', color: '#f68ba7' },{ name: '故障停机', color: '#ff3374' },{ name: '运行', color: '#66E656' },];var startTime;var datatemp = [];// 处理时间,x轴需要月、日、时、分for (let i = 0; i < data.length; i++) {startTime = new Date(data[i].Last_Eqpt_Update_Time).getTime();var typeItem = types.filter(a => a.name == data[i].Eqpt_State_Dsc)[0];datatemp.push({name: typeItem.name,value: [parseInt(data[i].Index),new Date(data[i].Last_Eqpt_Update_Time).getTime(),new Date(data[i].Eqpt_Update_Time).getTime(),//data[i].RUNTIME_TIMESTAMP,//data[i].END_TIME_TIMESTAMP,data[i].Index,data[i].Eqpt_Dsc],itemStyle: {normal: {color: typeItem.color}}});}// console.log("data:", data);// console.log('datatemp', datatemp);// 处理各种状态的起始和结束时间函数function renderItem(params, api) {var categoryIndex = api.value(0);var start = api.coord([api.value(1), categoryIndex]);var end = api.coord([api.value(2), categoryIndex]);var height = api.size([0, 1])[1] * 0.6;var rectShape = echarts.graphic.clipRectByRect({x: start[0],y: start[1] - height / 2,width: end[0] - start[0],height: height},{x: params.coordSys.x,y: params.coordSys.y,width: params.coordSys.width,height: params.coordSys.height});// 返回矩形对象return (rectShape && {type: 'rect',transition: ['shape'],shape: rectShape,style: api.style()});}// 基于echarts的甘特图let myechart = this.$echarts.init(document.getElementById("myechart"))let myechart2 = {textStyle: {color: '#333',fontSize: '0.13rem'},grid: {top: '5%',left: '8%',bottom: '16%',width: '90%'},legend: {show: true,itemWidth: 10,itemHeight: 10,textStyle: {color: '#fff',fontSize: '0.12rem'},data: types.map(function (type) {return type.name;}),},tooltip: {show: true,textStyle: {fontSize: 10},axisPointer: {type: 'cross',crossStyle: {color: '#333'}},formatter: function (params) {return params.value[4] + '\t' + params.name + '\t' + params.marker + (new Date(params.value[1])).getHours() + ':' + (new Date(params.value[1])).getMinutes() + '—' + (new Date(params.value[2])).getHours() + ':' + (new Date(params.value[2])).getMinutes();}},dataZoom: [{type: 'inside',filterMode: 'weakFilter'},{type: "slider",show: true,height: "6",bottom: "4%",labelFormatter: '',backgroundColor: "white",brushSelect: false,minValueSpan: 3600 * 24 * 1000 * 7,handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',handleSize: 15,handleColor: '#6bc5da',start: 0,end: 100,handleStyle: {borderCap: 'round',color: "#fff",shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 1},textStyle: {color: "transparent"},borderColor: 'transparent',backgroundColor: '#D7F4FF',dataBackground: {lineStyle: {width: 0},areaStyle: {color: 'transparent'}},fillerColor: '#00EBFF'}],xAxis: {type: 'time',//min: new Date(startTime).setHours(7, 0, 0, 0),//max: new Date(new Date(startTime).setDate(new Date(startTime).getDate() + 1)).setHours(7, 0, 0, 0),interval: 3600000,scale: true,axisLabel: {formatter: function (val) {return new Date(val).toLocaleTimeString('en-US', { hour: '2-digit', minute: 'numeric', hour12: false });}},splitLine: {show: false},axisLine: {show: false},axisTick: {show: true,lineStyle: {color: '#333',width: 2}},axisLabel: {textStyle: {color: '#333',fontSize: '0.14rem'},show: true}},yAxis: {// y轴数据,这里是设备编号data: this.eqptId,scale: true,splitLine: { show: false },axisLine: {show: false},axisTick: {show: false},axisLabel: {show: true,textStyle: {color: '#333',fontSize: '0.12rem',fontWeight: 'bolder',}}},series: [{type: 'custom',// 图表矩形数据renderItem: renderItem,itemStyle: {opacity: 0.8},encode: {x: [0, 1],y: 0},data: datatemp,}]}myechart.setOption(myechart2)}
3.注意事项
甘特图图表可能会不显示,原因一般是在获取到数据之前图表就挂载上了,然后数据更新后并没有更新图表数据。这里本人的方法是在获取到数据的后面调用挂载图表的函数,当然这肯定不是最好的方法。
// 获取图表数据
getCharts().then((res)=>{............// 判断获取到数据后调用处理数据及挂载图表的函数this.drawEchart()if(res.length !== 0){this.drawEchart()}
})
相关文章:
vue+Echarts实现多设备状态甘特图
目录 1.效果图 2.代码 3.注意事项 Apache ECharts ECharts官网,可在“快速上手”处查看详细安装方法 1.效果图 可鼠标滚轮图表和拉动下方蓝色的条条调节时间细节哦 (注:最后一个设备没有数据,所以不显示任何矩形)…...
STM32使用滴答定时器实现delayms
在STM32上使用SysTick实现jiffies(时间戳)并且实现delay_ms 代码实现: volatile uint32_t jiffies 0; // 用于记录系统运行的jiffies数 void SysTick_Handler(void) {/* 每次SysTick中断,jiffies增加 */jiffies; }uint32_t tick…...
k8s的volumn解析
背景 k8s中有一套自己的存储逻辑,它和docker中的volumn类似,本文就来看一下k8s的volunm的存储设计 k8s的volumn 1.EmptyDir类型的volumn 这种类型的volumn是Pod内的容器共享的,volumn的生命周期和Pod的生命周期是一致的,不过大…...
Golang获取音视频时长信息
文章目录 一、工具简介二、使用golang获取时间长 一、工具简介 这些工具都是与多媒体处理和流媒体相关的开源工具,它们都属于 FFmpeg 多媒体框架。 FFmpeg 是一个用于处理多媒体内容(音频、视频、图像等)的命令行工具。它可以执行各种各样…...
LeetCode 面试经典150题 14.最长公共前缀
题目: 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀,返回空字符串 ""。 思路: 代码: class Solution {public String longestCommonPrefix(String[] strs) {if (strs.length 0) {return &…...
自注意力机制的理解
一、自注意力要解决什么问题 循环神经网络由于信息传递的容量以及梯度消失问题,只能建立短距离依赖关系。为了建立长距离的依赖关系,可以增加网络的层数或者使用全连接网络。但是全连接网络无法处理变长的输入序列,另外,不同的输…...
win10-误删winsock恢复方法
文件链接放在最前面 链接:https://pan.baidu.com/s/1i9X0HJJOfo63fbtOETc1Xw?pwdlfqx 提取码:lfqx 误删后应该还是可以正常连接网络的,但是重启过后直接以太网和wifi都是无法使用的。下图是我后面网络正常补充的图片 误删后是只有飞行模式…...
c#矩阵求逆
目录 一、矩阵求逆的数学方法 1、伴随矩阵法 2、初等变换法 3、分块矩阵法 4、定义法 二、矩阵求逆C#代码 1、伴随矩阵法求指定3*3阶数矩阵的逆矩阵 (1)伴随矩阵数学方法 (2)代码 (3)计算 2、对…...
array go 语言的数组 /切片
内存地址通过& package mainimport "fmt"func main() {var arr [2][3]int16fmt.Println(arr)fmt.Printf("arr的地址是: %p \n", &arr)fmt.Printf("arr[0]的地址是 %p \n", &arr[0])fmt.Printf("arr[0][0]的地址是 %p \n"…...
【Stable Diffusion】专栏介绍和文章索引(持续更新中)
目录 1 背景2 思考3 文章索引(持续更新中)3.1 入门3.2 初级3.3 中级3.3 高级 1 背景 最近开始学习AIGC,对Stable Diffusion比较感兴趣,所以新建了这个专栏,来记录自己在使用和学习Stable Diffusion的一些方法、资料以…...
RPC 快速入门
一、What 1)小故事 张三和李四都在同一个家公司负责商品交易的模块,两个人平时开发甚是紧密。 🙋🏻♂️ 张三:“李四,我这边一个商品下单了,但是付款数额不对,你帮我查下支付有没…...
使用Docker搭建Syslog-ng
Syslog-ng是一个可靠、多功能的日志管理系统,用于收集日志并将其转发到指定的日志分析工具。 使用Docker CLI方式搭建 步骤 1: 拉取Syslog-ng镜像 首先,需要从Docker Hub拉取Syslog-ng的官方镜像。 docker pull balabit/syslog-ng:latest步骤 2: 启动…...
使能 Linux 内核自带的 FlexCAN 驱动
一. 简介 前面一篇文章学习了 ALPHA开发板修改CAN的设备树节点信息,并加载测试过设备树文件,文件如下: ALPHA开发板修改CAN的设备树节点信息-CSDN博客 本文是学习使能 IMX6ULL的 CAN驱动,也就是通过内核配置来实现。 二. 使能…...
通过dbeaver链接dm8数据库
一、环境说明 windows 11 vmware 17 ubuntu 22 tt:~$ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.3 LTS Release: 22.04 Codename: jammytt:~$ docker info Client:Version: 24.0.5Context: d…...
Stable diffusion(四)
训练自己的Lora 【DataSet】【Lora trainer】【SD Lora trainer】 前置的知识 batch size:模型一次性处理几张图片。一次性多处理图片,模型能够综合捕捉多张图片的特征,最终的成品效果可能会好。但是处理多个batch size也意味着更大的显存…...
oracle 19c RAC补丁升级
1.停止集群件备份家目录 ----两节点分别操作 cd /u01/app/19.3.0/grid/bin/ crsctl stop crstar -zcvf /u01/app.tar.gz /u01/app/u01/app/19.0.0/grid/bin/crsctl start crs2.两节点 GI、DB OPatch 替换(都得执行) ----# 表示 root 用户,$…...
计算机视觉研究方向
计算机视觉是一个广泛且快速发展的领域,涵盖了多种研究方向和技术。主要的研究方向包括图像处理、目标检测与识别、图像生成、三维视觉、行为识别、深度学习与计算机视觉、多媒体分析、视频理解、风格化、全向视觉传感器等。这些研究方向和技术不断进步,…...
数据分析-Pandas分类数据的比较如何避坑
数据分析-Pandas分类数据的比较如何避坑 数据分析和处理中,难免会遇到各种数据,那么数据呈现怎样的规律呢?不管金融数据,风控数据,营销数据等等,莫不如此。如何通过图示展示数据的规律? 数据表…...
P - Beat
题目分析 1.看数据范围,大概知道dfs能做 2.自0问题开始查找,确保之后每次查找到的问题的困难度均大于上一次 3.遍历所有情况再记录cnt即可 代码 #include <iostream> #include <algorithm> #include <cstdio> #include <cstring&…...
机器学习——GBDT算法
机器学习——GBDT算法 在机器学习领域,梯度提升决策树(Gradient Boosting Decision Trees,简称GBDT)是一种十分强大且常用的集成学习算法。它通过迭代地训练决策树来不断提升模型性能,是一种基于弱学习器的提升算法。…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...
【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
Go语言多线程问题
打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
