echarts 几千条分钟级别在小时级别图标上展示

  • 需求背景
  • 解决效果
  • ISQQW代码地址
  • strategyChart.vue

需求背景

需要实现 秒级数据几千条在图表上显示,(以下是 设计图表上是按小时界别显示数据,后端接口为分钟级别数据)
1232323

解决效果

在这里插入图片描述

ISQQW代码地址

链接

strategyChart.vue

<!--/**
* @author: liuk
* @date: 2023/11/21
* @describe: 描述
* @email:1229223630@qq.com
*/-->
<template><div ref="chatDom" class="strategyChart"></div>
</template><script lang="ts" setup>
import {ref, onMounted, watch, nextTick} from "vue"
import * as echarts from 'echarts'// Props
const props = defineProps(['data', 'type'])let myChart = null // Vue3 使用 proxy 对象代理,而 echarts 则使用了大量的全等(===), 对比失败从而导致了bug。
const chatDom = ref(null)watch(() => props.data, (data: any) => {nextTick(() => {const option = myChart.getOption()myChart.clear()myChart.setOption(renderFn(option, data, props.type))})
}, {deep: true})onMounted(() => {drawChart()window.addEventListener('resize', () => {const option = myChart.getOption()myChart.clear()myChart.setOption(renderFn(option, props.data, props.type))}, {passive: true});
})const renderFn = (option, data, type) => {switch (type) {case 1:option.legend[0].data = ['当前二供温', '目标二供温']option.yAxis[0].name = '单位/℃'option.series[0].name = '当前二供温'option.series[0].data = data.tt211_valueoption.series[0].color = '#3A68C0'option.series[1].name = '目标二供温'option.series[1].data = data.tt211_balanced_forecastoption.series[1].color = '#FFBF00'option.series[1].lineStyle.type = 'dashed'return optioncase 2:option.legend[0].data = ['反馈阀开度', '设定阀开度', "预测阀开度"]option.yAxis[0].name = '单位/%'option.series[0].name = '反馈阀开度'option.series[0].data = data.cov121_valueoption.series[0].color = '#3A68C0'option.series[1].name = '设定阀开度'option.series[1].data = data.cov121_forecastsetoption.series[1].color = '#FFBF00'option.series[2].name = '预测阀开度'option.series[2].data = data.cip121_hz_forecastoption.series[2].color = '#FFBF00'option.series[3] = {name: '',symbol: 'image://',type: 'line',color: '2c2c2c',showSymbol: false,connectNulls: false,data: curData,areaStyle: {color: '#2c2c2c'},lineStyle: {width: 2,type: 'dotted'},}return optioncase 3:option.legend[0].data = ['实际频率', '预测频率']option.yAxis[0].name = '单位/Hz'option.series[0].name = '实际频率'option.series[0].data = data.cip121_hzoption.series[0].color = '#3A68C0'option.series[1].name = '预测频率'option.series[1].data = data.cip121_hz_forecastoption.series[1].color = '#FFBF00'option.series[1].lineStyle.type = 'dashed'return option}
}
// 当前天 24小时数据
const curData = new Array(27).fill([]).map((_, i) => {const cur0Date = new Date(new Date().toLocaleDateString()).setHours(0) // 当天0点时间戳 秒级return [cur0Date + (i - 1) * 60 * 60 * 1000, '-']
})
const drawChart = () => {let chartDom = chatDom.valueif (chartDom == null) {return}echarts.dispose(chartDom)myChart = echarts.init(chartDom)const option = {legend: {bottom: 0,data: [],textStyle: {color: '#929394'},},tooltip: {trigger: 'axis',borderColor: 'rgba(255,255,255,.1)',backgroundColor: 'rgba(149, 149, 149, 0.11)',extraCssText: '0px 2px 8px 0px rgba(0,0,0,0.3); backdrop-filter: blur(8px);',textStyle: {color: '#fff'},},grid: {left: '2.5%',top: '15%',right: '0.8%',bottom: '10%',containLabel: true},xAxis: [{type: 'time',show: true,axisLine: {show: true,lineStyle: {width: 2,color: 'rgba(80,80,80,1)'}},axisTick: {show: true,alignWithLabel: true, // 将刻度线与标签对齐},axisLabel: {color: 'rgba(165,166,166,1)',fontSize: '14',formatter: (val) => {const date = new Date(val)const isNow = date.getHours() === new Date().getHours()return isNow ? 'now' : String(date.getHours()).padStart(2, '0') + ':00'}},axisPointer: {label: {formatter: function (params) {const date = new Date(params.value)const y = date.getFullYear()const m = date.getMonth() + 1 < 10 ? ('0' + date.getMonth() + 1) : date.getMonth() + 1const d = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()const hours = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()const minutes = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()var seconds = date.getSeconds()return `${y}-${m}-${d}` + ` ${hours}:${minutes}:${seconds}`}}},}],yAxis: [{name: '单位/%',type: 'value',show: true,offset: 5,nameTextStyle: {padding: [0, 35, 10, 0],color: 'rgba(165,166,166,1)',fontSize: '12',},splitLine: {show: true,lineStyle: {type: 'dashed',color: 'rgba(52,52,52,1)'}},axisLabel: {color: 'rgba(165,166,166,1)',fontSize: '12',},}],series: [{name: '反馈阀开度',symbol: 'image://',type: 'line',color: "rgba(255,191,0,1)",showSymbol: false,connectNulls: false,data: curData,areaStyle: {color: 'rgba(255,191,0,0)'},lineStyle: {width: 2,type: 'solid'},},{name: '设定阀开度',symbol: 'image://',type: 'line',color: 'red',showSymbol: false,connectNulls: false,data: curData,areaStyle: {color: 'rgba(255,191,0,0)'},lineStyle: {width: 2,type: 'solid'},},{name: '',symbol: 'image://',type: 'line',color: '2c2c2c',showSymbol: false,connectNulls: false,data: curData,areaStyle: {color: '2c2c2c'},lineStyle: {width: 2,type: 'dotted'},},]}option && myChart.setOption(option)
}
</script><style lang="scss" scoped>
.strategyChart {width: 100%;height: 100%;margin-top: 5px;
}
</style>
<style lang="scss">
.detailChat-popup {overflow: hidden;margin: 3px 10px;.top {margin-bottom: 16px;}.item {display: flex;align-items: center;margin: 10px 0;&:last-child {margin-bottom: 0;}.icon {display: inline-block;width: 12px;text-align: center;margin-right: 10px;}.name {margin-right: 20px;}}
}
</style>

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

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

相关文章

编译安装redis及配置多实例

yum安装是这种十分简单的方法我们就不在提及了&#xff0c;今天我们来做一下redis的编译安装 Redis源码包官方下载链接&#xff1a;http://download.redis.io/releases/ 一、编译安装&#xff1a; 安装依赖包 dnf -y install make gcc jemalloc-devel systemd-devel如果是…

数据结构中树、森林 与 二叉树的转换

1 树转换为 二叉树 将树转换成二叉树的步骤是&#xff1a; 加线。在所有的兄弟结点之间加一条线。去线。对于树中的每个结点&#xff0c;只保留它与第一个孩子结点的连线&#xff0c;删除该结点其他孩子结点之间的连线。调整。以树的根结点为轴心&#xff0c;将整个树顺时针旋…

SMBGhost_RCE漏洞(CVE-2020-0796永恒之黑)

https://blog.csdn.net/qq_45372008/article/details/106980409 https://zhuanlan.zhihu.com/p/374949632 SMB 3.1.1协议处理某些请求的方式中存在远程执行代码漏洞&#xff0c;可能被攻击者利用远程执行任意代码。该漏洞的后果十分接近永恒之蓝系列&#xff0c;都利用Windows …

银行业务测试

1、商业银行四大类&#xff1a; 业务类系统、渠道类面试、MIS类系统、其他基础平台系统 2、银行系统开发流程&#xff08;UAT是行方&#xff09; 3、银行系统测试流程 4、对于不同的服务方式也不同&#xff0c;如:柜台、手机银行、网上银行&#xff0c;电话外呼&#xff0c;…

89. 格雷编码

89. 格雷编码 Java代码&#xff1a;2DFS class Solution {List<Integer> res new ArrayList<>();public List<Integer> grayCode(int n) {dfs(n, new StringBuffer(), new int[]{0, 1});return res;}public void dfs(int n, StringBuffer sb, int[] nums){i…

吴恩达《机器学习》9-7-9-8:综合起来、自主驾驶

在神经网络的使用过程中&#xff0c;需要经历一系列步骤&#xff0c;从网络结构的选择到训练过程的实施。以下是使用神经网络时的主要步骤的小结&#xff1a; 一、网络结构的选择 输入层&#xff1a; 第一步是选择网络结构&#xff0c;即确定神经网络的层数以及每层的单元数。…

CURL踩坑记录

因为项目使用的windows server&#xff0c;且没有安装Postman&#xff0c;所以对于在本地的Postman上执行的请求&#xff0c;要拷贝到服务器执行&#xff0c;只能先转化成为curl命令&#xff0c;操作也很简单&#xff0c;如下&#xff1a; 注意&#xff0c;Postman默认对url包围…

【钉钉】通过链接方式跳转到应用机器人聊天窗口

使用这个方式&#xff1a; dingtalk://dingtalkclient/action/jumprobot?dingtalkid可以通过机器人回调拿到chatbotUserId这个字段&#xff0c;这个就是dingtalkid。 示例&#xff1a;&#xff08;chatbotUserId是不规则字符串&#xff0c;链接拼上这个参数最好 urlencode一…

大图书馆 #9 《流计算系统图解》书评

上周&#xff0c;我收到清华大学出版社编辑寄来的新书《流计算系统图解》。趁着周末的功夫&#xff0c;我快速浏览了本书的主要内容。一句话评价&#xff1a;值得一读&#xff0c;尤其是对开始开发流计算任务或系统一到两年&#xff0c;初步实现过一些功能或作业&#xff0c;但…

二蛋赠书九期:《机器学习图解》

前言 大家好&#xff01;我是二蛋&#xff0c;一个热爱技术、乐于分享的工程师。在过去的几年里&#xff0c;我一直通过各种渠道与大家分享技术知识和经验。我深知&#xff0c;每一位技术人员都对自己的技能提升和职业发展有着热切的期待。因此&#xff0c;我非常感激大家一直…

基于C#实现AC自动机算法

我要检查一篇文章中是否有某些敏感词&#xff0c;这其实就是多模式匹配的问题。当然你也可以用 KMP 算法求出&#xff0c;那么它的时间复杂度为 O(c*(mn))&#xff0c;c&#xff1a;为模式串的个数。m&#xff1a;为模式串的长度,n:为正文的长度&#xff0c;那么这个复杂度就不…

Autocad2020切换经典界面

Autocad2020切换经典界面 1.更改1.1设置另存为 1.更改 1.1设置另存为

迅为RK3568开发板学习之Linux驱动篇第十三期输入子系统

驱动视频全新升级&#xff0c;并持续更新~更全&#xff0c;思路更科学&#xff0c;入门更简单。 迅为基于iTOP-RK3568开发板进行讲解&#xff0c;本次更新内容为第十三期&#xff0c;主要讲解输入子系统&#xff0c;共计24 讲。 关注B站&#xff1a;北京迅为电子&#xff0c;在…

赛轮集团SAILUN方程式赛车轮胎震撼登场,开启新篇章

11月初&#xff0c;在厦门国际赛车场&#xff0c;SAILUN方程式赛车轮胎展现出令人瞩目的实力&#xff0c;成功完成了首次震撼亮相。这一引人注目的表现为未来的赛车轮胎技术发展打开了崭新的一页。 在这次首次亮相的测试中&#xff0c;职业车手巧妙操控着SAILUN方程式赛车轮胎&…

解决Vision Transformer在任意尺寸图像上微调的问题:使用timm库

解决Vision Transformer在任意尺寸图像上微调的问题&#xff1a;使用timm库 文章目录 一、ViT的微调问题的本质二、Positional Embedding如何处理1&#xff0c;绝对位置编码2&#xff0c;相对位置编码3&#xff0c;对位置编码进行插值 三、Patch Embedding Layer如何处理四、使…

气膜体育馆:低碳环保体育新潮流

在追求健康生活的今天&#xff0c;体育运动的重要性无法忽视。为了满足人民日益增长的体育需求&#xff0c;气膜体育馆应运而生&#xff0c;成为体育场馆领域的一次革命性创新。这种新型体育馆解决了传统体育场馆建设中面临的审批难、周期长、门槛高等问题&#xff0c;为我们的…

马蹄集oj赛(双周赛第十五次)

目录 小码哥的开心数字 淘金者 捡麦子 小码哥玩游戏 手机测试 自动浇花机 买月饼 未来战争 双人成行 魔法水晶球 ​编辑自驾游 文章压缩 银河贸易市场 小码哥的开心数字 子难度&#xff1a;青铜 0时间限制&#xff1a;1秒 巴占用内存&#xff1a;64M 小码哥有超能…

深入浅出 Linux 中的 ARM IOMMU SMMU I

Linux 系统下的 SMMU 介绍 在计算机系统架构中&#xff0c;与传统的用于 CPU 访问内存的管理的 MMU 类似&#xff0c;IOMMU (Input Output Memory Management Unit) 将来自系统 I/O 设备的 DMA 请求传递到系统互连之前&#xff0c;它会先转换请求的地址&#xff0c;并对系统 I…

海外IP代理:数据中心代理IP是什么?好用吗?

数据中心代理是代理IP中最常见的类型&#xff0c;也被称为机房IP。这些代理服务器为用户分配不属于 ISP&#xff08;互联网服务提供商&#xff09;而来自第三方云服务提供商的 IP 地址。数据中心代理的最大优势——它们允许在访问网络时完全匿名。 如果你正在寻找海外代理IP&am…

【JavaSE】-4-单层循环结构

回顾 运算符&#xff1a; 算术 --、逻辑 && & || |、比较 、三元 、赋值 int i 1; i; j i; //j2 i3 syso(--j"-----"i) //1 3 选择结构 if(){} if(){}else{} if(){}else if(){}else if(){}else{}//支持byte、short、int //支持char //支持枚举…