Echarts 实现 设备运行状态图(甘特图) 工业大数据展示

  let option={tooltip: {formatter: function (params) {let startTime = new Date(params.value[1])let endTime= new Date(params.value[2]);//北京时间/时间戳转成日常时间function convert(date){var y = date.getFullYear();var m = date.getMonth() + 1;m = m < 10 ? "0" + m : m;var d = date.getDate();d = d < 10 ? "0" + d : d;var h = date.getHours();h = h < 10 ? "0" + h : h;var minute = date.getMinutes();minute = minute < 10 ? "0" + minute : minute;var s = date.getSeconds();s = s < 10 ? "0" + s : s;return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;}return params.marker + params.name + ': ' +convert(startTime)+'-'+convert(endTime)}},dataZoom: [{type: 'slider',filterMode: 'weakFilter',showDataShadow: false,top: 550,labelFormatter: ''},{type: 'inside',filterMode: 'weakFilter'}],grid: {height: 450},xAxis: {// min: startTime,scale: true,},yAxis: {data: []},series: [{type: 'custom',renderItem: function (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',shape: rectShape,style: api.style()};},itemStyle: {opacity: 0.8},encode: {x: [1, 2],y: 0},data: []}]}option.yAxis.data = this.categories//this.categories是类型也就是y轴[XCG10001....]let data = []let types = [{name: '静止', color: 'red'},{name: '收油', color: 'green'},{name: '发油', color: '#e0bc78'},];let startTime = ''let endTime = ''var baseTime = ''var duration = ''this.categories.forEach((item, index) => {for (var i = 0; i < this.monitoringList[index].data.length; i++) {var typeItem = types[Math.round(Math.random() * (types.length - 1))];if (i !== this.monitoringList[index].data.length - 1) {//this.monitoringList是后台获取的数据endTime = new Date(this.monitoringList[index].data[i + 1].createTime);duration = endTime.valueOf();startTime = new Date(this.monitoringList[index].data[i].createTime);baseTime = startTime.valueOf();}else {endTime = new Date(this.monitoringList[index].data[i].createTime);duration = endTime.valueOf();startTime = new Date(this.monitoringList[index].data[i].createTime);baseTime = startTime.valueOf();}data.push({name: typeItem.name,// value 第一个参数: 设备 index;//       第二个参数: 状态的开始时间;//       第三个参数: 状态的结束时间;//       第四个参数: 状态的持续时间;value: [index, baseTime, endTime, duration - baseTime],itemStyle: {normal: {color: typeItem.color}}});}});option.series[0].data = dataoption.xAxis = {scale: true,min: function(value) {return value.min - 20;},max: function(value) {return value.max + 20;},axisLabel:{color:"#8da5b2",formatter:(value,index)=>{let xDate = new Date(value);return xDate.getFullYear()+"-"+(xDate.getMonth()+1)+"-"+xDate.getDate()+" "+xDate.getHours()+":"+xDate.getMinutes()+":"+xDate.getSeconds();}}}

以上就是echarts性能图的option配置 

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

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

相关文章

如何在 Azure 容器应用程序上部署具有 Elastic Observability 的 Hello World Web 应用程序

作者&#xff1a;Jonathan Simon Elastic Observability 是提供对正在运行的 Web 应用程序的可见性的最佳工具。 Microsoft Azure 容器应用程序是一个完全托管的环境&#xff0c;使你能够在无服务器平台上运行容器化应用程序&#xff0c;以便你的应用程序可以扩展和缩减。 这使…

Redis(01)| 数据结构

这里写自定义目录标题 Redis 速度快的原因除了它是内存数据库&#xff0c;使得所有的操作都在内存上进行之外&#xff0c;还有一个重要因素&#xff0c;它实现的数据结构&#xff0c;使得我们对数据进行增删查改操作时&#xff0c;Redis 能高效的处理。 因此&#xff0c;这次我…

Apriori介绍及代码批注

一、Apriori原理解析 1. 概述 关联规则分析是数据挖掘中最活跃的研究方法之一&#xff0c;目的是在一个数据集中找到各项之间的关联关系&#xff0c;而这种关系并没有在数据中直接体现出来。以超市的销售数据为例&#xff0c;当存在很多商品时&#xff0c;可能的商品组合数量…

【Opencv4快速入门】轮廓检测findContours

7.2 轮廓检测findContours 7.2.1 轮廓查找findContours7.2.2 轮廓绘制drawContours图像轮廓是指图像中对象的边界,是图像目标的外部特征,这个特征对于图像分析、目标识别和理解更深层次的含义具有重要的作用。 7.2.1 轮廓查找findContours 图像的轮廓补单能够提供物体的边缘,…

Java练习题2020-2

"统计1到N的整数中,除了1和自身之外&#xff0c;至少还能被两个数整除的数的个数 输入说明&#xff1a;整数 N(N<10000)&#xff1b; 输出说明&#xff1a;符合条件的数的个数 输入样例&#xff1a;10 输出样例&#xff1a;3 (说明&#xff1a;样例中符合条件的3个数是…

安卓开发实例:方向传感器

调用手机的方向传感器&#xff0c;X轴&#xff0c;Y轴&#xff0c;Z轴的数值 activity_sensor.xml <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayoutxmlns:android"http://schemas.android.c…

檢測項目簡體字

某些項目可能要求代碼中不允許使用簡體字 安裝stcheck檢查 yarn add stcheck --dev在項目根目錄創建 st.config.json 文件 {"patterns": ["./**/*.(ts|js|tsx|jsx|vue|html)","!**/node_modules/**","!.git/**"],"gitignore&q…

UE5 Blueprint发送http请求

一、下载插件HttpBlueprint、Json Blueprint Utilities两个插件是互相依赖的&#xff0c;启用&#xff0c;重启项目 目前两个是Beta的状态&#xff0c;如果你使用的平台支持就可以使用&#xff0c;我们的项目因为需要取Header的值&#xff0c;所有没法使用这两个插件&#xff0…

从零开始搭建Prometheus+grafana服务器组件监控系统

服务器及相关组件监控 本文档主要记录了常用企业级服务器及各种组件的监控手段和监控部署方案&#xff0c;使企业可以实时感知服务器组件的健康状态&#xff0c;并在服务器或组件出现异常时及时做出反应。 本方案采用的Prometheusgrafana的方式实现对服务器及各种组件的监控&am…

使用VisualStudio生成类图结构图for高效阅读代码

使用VisualStudio高效阅读代码 前言相关准备导入工程利用VisualStudio生成类图&#xff0c;结构体调用关系利用EnterpriseArchitect(EA)画时序图 前言 目前市面上代码阅读的IDE工具非常丰富&#xff0c;也各有千秋。由于工作经历原因&#xff0c;研发机经历过windows、Mac、Li…

67 跳跃游戏 II

跳跃游戏 II 题解1 贪心1 正向题解2 贪心2 反向题解3 DP 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 &…

数据库分库分表的原则

目录 1、数据库分库分表是什么 2、为什么要对数据库分库分表 3、何时选择分库分表 4、⭐分库分表遵循的原则 5、分库分表的方式 6、数据存放在表和库中的规则&#xff08;算法&#xff09; 7、分库分表的架构模式 8、分库分表的问题 小结 1、数据库分库分表是什么 数…

Android JNI/NDK 入门从一到二

1. 前言 最基础的创建JNI接口的操作&#xff0c;可以直接看这篇文章 : 第一个Android JNI工程&#xff0c; 本文会基于掌握创建JNI接口的操作的基础之上&#xff0c;来入门JNI/NDK。 2. 在JNI中打印日志 2.1 添加log模块 记得CMake中有log模块&#xff0c;不然编译不过 ta…

SpringBoot日志+SpringMVC+UUID重命名文件+Idea热部署

目录 【SpringBoot日志】 什么是日志&#xff0c;日志的作用 关于日志的基本信息&#xff0c;又有哪些呢&#xff1f; 关于日志的级别 Springboot内置SLF4J【门面模式】 和 logback【日志框架】 在配置文件中可以设置日志级别【以.yml为例】 SpringBoot 持久化的保存日…

OpenCV学习(四)——轨迹栏(调色板与不同通道图像)

轨迹栏 4. OpenCV轨迹栏4.1 轨迹栏作为调色板4.2 轨迹栏显示不同通道图像 4. OpenCV轨迹栏 会用到以下主要两个函数 cv2.createTrackbar(trackbarName, windowName, value, count, onChange)创建轨迹栏 主要参数&#xff1a; trackbarName&#xff1a;轨迹栏名称windowName…

感受webWorker

B站视频 git完整代码 之前遇到的场景 1、vxe表格计算1000多条数极值/算数平方根的时候。 2、大文件上传时计算hashCode时候 一、不使用webWorker 目录结构 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8&q…

数组与链表算法-矩阵算法

目录 数组与链表算法-矩阵算法 矩阵相加 C代码 矩阵相乘 C代码 转置矩阵 C代码 稀疏矩阵 C代码 数组与链表算法-矩阵算法 矩阵相加 矩阵的相加运算较为简单&#xff0c;前提是相加的两个矩阵对应的行数与列数必须相等&#xff0c;而相加后矩阵的行数与列数也是相同的。…

鼎鑫鸿鄴引入“能源互联网+”理念 打造共赢

近年来&#xff0c;随着全球能源消耗的不断增长和环境问题的日益突出&#xff0c;清洁能源转型成为全球共同关注的话题。中国作为全球最大的能源消费国&#xff0c;也在积极推动能源结构的优化和清洁能源的发展。鼎鑫鸿鄴新能源科技有限公司在推动清洁能源转型方面制定了一系列…

Linux内核代码中常用的数据结构

Linux内核代码中广泛使用了数据结构和算法&#xff0c;其中最常用的两个是链表和红黑树。 链表 Linux内核代码大量使用了链表这种数据结构。链表是在解决数组不能动态扩展这个缺陷而产生的一种数据结构。链表所包含的元素可以动态创建并插入和删除。 链表的每个元素都是离散…

el-table添加固定高度height后高度自适应

0 效果 1 添加自定义指令 新建目录src/directive/el-table 在el-table目录下新建文件adaptive.js import { addResizeListener, removeResizeListener } from element-ui/src/utils/resize-event// 设置表格高度const doResize async(el, binding, vnode) > {// 获取表格…