当前位置: 首页 > news >正文

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官网&#xff0c;可在“快速上手”处查看详细安装方法 1.效果图 可鼠标滚轮图表和拉动下方蓝色的条条调节时间细节哦 &#xff08;注&#xff1a;最后一个设备没有数据&#xff0c;所以不显示任何矩形&#xff09;…...

STM32使用滴答定时器实现delayms

在STM32上使用SysTick实现jiffies&#xff08;时间戳&#xff09;并且实现delay_ms 代码实现&#xff1a; volatile uint32_t jiffies 0; // 用于记录系统运行的jiffies数 void SysTick_Handler(void) {/* 每次SysTick中断&#xff0c;jiffies增加 */jiffies; }uint32_t tick…...

k8s的volumn解析

背景 k8s中有一套自己的存储逻辑&#xff0c;它和docker中的volumn类似&#xff0c;本文就来看一下k8s的volunm的存储设计 k8s的volumn 1.EmptyDir类型的volumn 这种类型的volumn是Pod内的容器共享的&#xff0c;volumn的生命周期和Pod的生命周期是一致的&#xff0c;不过大…...

Golang获取音视频时长信息

文章目录 一、工具简介二、使用golang获取时间长 一、工具简介 这些工具都是与多媒体处理和流媒体相关的开源工具&#xff0c;它们都属于 FFmpeg 多媒体框架。 FFmpeg 是一个用于处理多媒体内容&#xff08;音频、视频、图像等&#xff09;的命令行工具。它可以执行各种各样…...

LeetCode 面试经典150题 14.最长公共前缀

题目&#xff1a; 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 ""。 思路&#xff1a; 代码&#xff1a; class Solution {public String longestCommonPrefix(String[] strs) {if (strs.length 0) {return &…...

自注意力机制的理解

一、自注意力要解决什么问题 循环神经网络由于信息传递的容量以及梯度消失问题&#xff0c;只能建立短距离依赖关系。为了建立长距离的依赖关系&#xff0c;可以增加网络的层数或者使用全连接网络。但是全连接网络无法处理变长的输入序列&#xff0c;另外&#xff0c;不同的输…...

win10-误删winsock恢复方法

文件链接放在最前面 链接&#xff1a;https://pan.baidu.com/s/1i9X0HJJOfo63fbtOETc1Xw?pwdlfqx 提取码&#xff1a;lfqx 误删后应该还是可以正常连接网络的&#xff0c;但是重启过后直接以太网和wifi都是无法使用的。下图是我后面网络正常补充的图片 误删后是只有飞行模式…...

c#矩阵求逆

目录 一、矩阵求逆的数学方法 1、伴随矩阵法 2、初等变换法 3、分块矩阵法 4、定义法 二、矩阵求逆C#代码 1、伴随矩阵法求指定3*3阶数矩阵的逆矩阵 &#xff08;1&#xff09;伴随矩阵数学方法 &#xff08;2&#xff09;代码 &#xff08;3&#xff09;计算 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 文章索引&#xff08;持续更新中&#xff09;3.1 入门3.2 初级3.3 中级3.3 高级 1 背景 最近开始学习AIGC&#xff0c;对Stable Diffusion比较感兴趣&#xff0c;所以新建了这个专栏&#xff0c;来记录自己在使用和学习Stable Diffusion的一些方法、资料以…...

RPC 快速入门

一、What 1&#xff09;小故事 张三和李四都在同一个家公司负责商品交易的模块&#xff0c;两个人平时开发甚是紧密。 &#x1f64b;&#x1f3fb;‍♂️ 张三&#xff1a;“李四&#xff0c;我这边一个商品下单了&#xff0c;但是付款数额不对&#xff0c;你帮我查下支付有没…...

使用Docker搭建Syslog-ng

Syslog-ng是一个可靠、多功能的日志管理系统&#xff0c;用于收集日志并将其转发到指定的日志分析工具。 使用Docker CLI方式搭建 步骤 1: 拉取Syslog-ng镜像 首先&#xff0c;需要从Docker Hub拉取Syslog-ng的官方镜像。 docker pull balabit/syslog-ng:latest步骤 2: 启动…...

使能 Linux 内核自带的 FlexCAN 驱动

一. 简介 前面一篇文章学习了 ALPHA开发板修改CAN的设备树节点信息&#xff0c;并加载测试过设备树文件&#xff0c;文件如下&#xff1a; ALPHA开发板修改CAN的设备树节点信息-CSDN博客 本文是学习使能 IMX6ULL的 CAN驱动&#xff0c;也就是通过内核配置来实现。 二. 使能…...

通过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&#xff1a;模型一次性处理几张图片。一次性多处理图片&#xff0c;模型能够综合捕捉多张图片的特征&#xff0c;最终的成品效果可能会好。但是处理多个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 替换&#xff08;都得执行&#xff09; ----# 表示 root 用户&#xff0c;$…...

计算机视觉研究方向

计算机视觉是一个广泛且快速发展的领域&#xff0c;涵盖了多种研究方向和技术。主要的研究方向包括图像处理、目标检测与识别、图像生成、三维视觉、行为识别、深度学习与计算机视觉、多媒体分析、视频理解、风格化、全向视觉传感器等。这些研究方向和技术不断进步&#xff0c;…...

数据分析-Pandas分类数据的比较如何避坑

数据分析-Pandas分类数据的比较如何避坑 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表…...

P - Beat

题目分析 1.看数据范围&#xff0c;大概知道dfs能做 2.自0问题开始查找&#xff0c;确保之后每次查找到的问题的困难度均大于上一次 3.遍历所有情况再记录cnt即可 代码 #include <iostream> #include <algorithm> #include <cstdio> #include <cstring&…...

机器学习——GBDT算法

机器学习——GBDT算法 在机器学习领域&#xff0c;梯度提升决策树&#xff08;Gradient Boosting Decision Trees&#xff0c;简称GBDT&#xff09;是一种十分强大且常用的集成学习算法。它通过迭代地训练决策树来不断提升模型性能&#xff0c;是一种基于弱学习器的提升算法。…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...