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()}
})

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

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

相关文章

【】(综合练习)博客系统

在之前的学些中&#xff0c;我们掌握了Spring框架和MyBatis的基本使用&#xff0c;接下来 我们就要结合之前我们所学的知识&#xff0c;做出一个项目出来 1.前期准备 当我们接触到一个项目时&#xff0c;我们需要对其作出准备&#xff0c;那么正规的准备是怎么样的呢 1.了解需求…

探讨大数据、云计算与物联网的融合与发展

随着信息技术的飞速发展&#xff0c;大数据、云计算和物联网已经成为了科技领域的三大热点。它们各自具有独特的特点和应用领域&#xff0c;但同时也存在着紧密的联系。本文将详细阐述大数据的四个基本特征&#xff0c;大数据产业的多个层面&#xff0c;以及大数据、云计算和物…

深入探索C语言动态内存分配:释放你的程序潜力

&#x1f308;大家好&#xff01;我是Kevin&#xff0c;蠢蠢大一幼崽&#xff0c;很高兴你们可以来阅读我的博客&#xff01; &#x1f31f;我热衷于分享&#x1f58a;学习经验&#xff0c;&#x1f3eb;多彩生活&#xff0c;精彩足球赛事⚽ &#x1f31f;感谢大家的支持&#…

[激光原理与应用-80]:PLC通信协议之-OMRON欧姆龙FINS TCP通信协议详细解析

目录 一、OMRON欧姆龙 PLC简介 1.1 OMRON欧姆龙 PLC 1.2 OMRON欧姆龙 PLC通信协议简介 1.3 通信架构 二、欧姆龙FINS协议简介 2.1 简介 2.2 协议分层 2.3 OMRON&#xff08;欧姆龙&#xff09;FINS协议的本质 2.4 OMRON&#xff08;欧姆龙&#xff09;FINS&#xff08…

请说明Vue父组件向子组件传值的方法

在Vue中&#xff0c;父组件向子组件传值主要通过props来实现。props是Vue组件之间传递数据的一种基本方式&#xff0c;允许父组件向子组件传递数据。 下面是一个简单的示例&#xff0c;说明如何在Vue中通过props从父组件向子组件传递数据&#xff1a; <template> <…

LeetCode热题Hot100-两数相加

一刷一刷 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数都不…

Python爬虫之正则表达式与httpx的使用与案例

三、正则表达式 1、实例 模式描述\w匹配字母、数字以及下划线\W匹配不是字母、数字以及下划线\s匹配任意空白字符&#xff0c;等价于[\t\n\r\f]\S匹配任意非空字符\d匹配任意数字&#xff0c;等价于[0-9]\D匹配任意非数字的字符\A匹配字符串开头\Z匹配字符串结尾。如果存在换…

C++中的流

前言 在 C 中&#xff0c;流&#xff08;stream&#xff09;是一种数据传输的抽象概念&#xff0c;用于在程序中对输入和输出进行操作。流分为输入流和输出流&#xff0c;允许数据在程序和外部设备&#xff08;如键盘、屏幕、文件&#xff09;之间进行传输。输入流用于从外部获…

边缘计算【智能+安全检测】系列教程-- Jeton Agx Orin 基础环境搭建

1 .前期准备 Jetson Agx Orin 比Jetson Agx Orin Xavier的算力要高&#xff0c;性能要好通常用来做自动驾驶的AI推理&#xff0c;具体外观如下图 1.刷机软件sdkmanager&#xff1a;下载链接 NVIDIA账号需要注册&#xff0c;正常一步一步往下走就行。在ubuntu18以上的系统安…

Verilog刷题笔记45

题目&#xff1a;Given the finite state machine circuit as shown, assume that the D flip-flops are initially reset to zero before the machine begins. Build this circuit. 解题&#xff1a; module top_module (input clk,input x,output z ); wire [2:0]size;dtou…

第一篇:概述、 目录、适用范围及术语 --- IAB/MRC《增强现实(AR)广告(效果)测量指南1.0 》

第一篇&#xff1a;概述、目录、适用范围及术语 - IAB与MRC及《增强现实广告效果测量指南1.0》 --- 我为什么要翻译美国IAB科技公司系列标准 ​​​​​​​​​​​​​​ 翻译计划 第一篇概述—IAB与MRC及《增强现实广告效果测量指南》之目录、适用范围及术语第二篇广告效…

WSL+Ununtu+Docker踩坑指南

Ubuntu安装docker后启动不了&#xff0c;解决问题如下&#xff1a; 1.在wsl中安装Ubuntu&#xff0c;在Ubuntu中安装docker&#xff0c;此时用的Ubuntu的版本为Ubuntu-22.04发行版&#xff0c;安装docker教程如下。 https://docs.docker.com/engine/install/ubuntu/2. 完成安…

第十五届蓝桥杯模拟赛 第三期 (C++)

第二次做蓝桥模拟赛的博客记录&#xff0c;可能有很多不足的地方&#xff0c;如果大佬有更好的思路或者本文中出现错误&#xff0c;欢迎分享思路或者提出意见 题目A 请问 2023 有多少个约数&#xff1f;即有多少个正整数&#xff0c;使得 2023 是这个正整数的整数倍。 答案&…

Linux telnet命令教程:远程控制工具(附实例详解和注意事项)

Linux telnet命令介绍 telnet&#xff08;Teletype Network&#xff09;是一种网络协议&#xff0c;用于在远程主机和本地计算机之间建立文本式连接。它最初于1969年开发&#xff0c;是Internet的早期协议之一。telnet命令使用TCP/IP网络通过端口23建立连接&#xff0c;提供了…

MySQL B树 和B+数据的区别

MySQL B树 和B数据的区别 树分类&#xff1a;二叉树完全二叉树满二叉树堆红黑树 B树B树 首先我们搞清楚数据结构中的 树这个概念 树 分类&#xff1a; 二叉树 限定每个节点的子节点最多只有2个子节点&#xff0c;且有左右之分。完全二叉树 满二叉树 堆 红黑树 B树 B树 …

上位机图像处理和嵌入式模块部署(qmacvisual之ROI设定)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 ROI&#xff0c;全称是region of interest&#xff0c;也就是感兴趣区域。这里面一般分成两种情况&#xff0c;一种是所有的算法都依赖于这个ROI&a…

谷粒商城——缓存的读写一致性

1. 对于实时性要求很强的数据&#xff0c;如果修改完数据库&#xff0c;需要保证缓存中的数据也更新为相应的最新值。此时需要在更新数据库之前加上写锁&#xff0c;在更新/删除完缓存后才释放写锁。 伪代码如下&#xff1a; lock.writeLock().lock(); updateDB(); updateCac…

Jenkins中使用Generic Webhook Trigger插件实现持续集成

项目环境 宝塔Linux面板DockerJenkinsgitee 目的 实现每次push推送dev分支到gitee上&#xff0c;Jenkins自动构建项目&#xff1b;push其它分支时&#xff0c;不运行。 实现方法 1.在Jenkins上安装Generic Webhook Trigger插件 在“系统设置–插件管理–可选插件”界面搜…

第390场 LeetCode 周赛题解

A 每个字符最多出现两次的最长子字符串 滑动窗口&#xff1a;枚举窗口的左边界&#xff0c;尽可能右移窗口的右边界。 (当然也可以暴力枚举) class Solution { public:int maximumLengthSubstring(string s) {vector<int> cnt(26);int res 0;for (int l 0, r -1, n s…

构建以太网交换网络——(生成树实验)

实验介绍 关于本实验 以太网交换网络中为了进行链路备份&#xff0c;提高网络可靠性&#xff0c;通常会使用冗余链路。但是使用冗余链路会在交换网络上产生环路&#xff0c;引发广播风暴以及MAC地址表不稳定等故障现象&#xff0c;从而导致用户通信质量较差&#xff0c;甚至…