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

echarts Y轴展示时间片段,series data数据 也是时间片段,鼠标放上去 提示框显示对应的时间片段

功能要求

        1、折线图,展示每天对应的一个时间片段

        2、echarts Y轴展示时间片段,如:['00:00','03:00','05:15']

        3、X轴展示日期,如:['xx年xx月xx日']

后端返回的数据结构,如

[{xAdate:"2024-06-15",data:"16:00",adata:"",},{xAdate:"2024-06-16",data:"05:00",adata:"",},{xAdate:"2024-06-17",data:"12:00",adata:"",},
]

效果图

代码构思

  •  通过后端返回的数据,无法实现该功能
  •  通过后端返回的时间片段,来做Y轴的展示,组合成一个新数组,同时要考虑数据的“去重”和“排序”
  •  要记录下来,后端的返回的时间片段,对应的Y轴新组合数组的索引,记录在对应天数中
注意事项 -- Y轴时间片段后端返回的是否[‘00:00’]

        没有的时候 索引要+1

Y轴如何展示时间片段

    1、第一种通过 type类型设置time 来展示

       2、 第二种通过 formatter 方法来展示

      

       3、注意事项

        Y轴要设置为整数 "minInterval:1"

         

     数据处理 ---- (重点)

// 将时间字符串转换为分钟数进行比较
converData(timeStr) {const parts = timeStr.split(':').map(Number);return parts[0] * 60 + parts[1];
}// 对时间数组去重并排序
sortTime(times) {const uniqueTimes = [...new Set(times)]; // 去重uniqueTimes.sort((a, b) => converData(a) - converData(b)); // 排序return uniqueTimes;
}

  数据处理和赋值代码

            let timeArr =[];let xAxi =[];let dataSer = [];  // 后端数据赋值let seri =[];let xAxSeri =[];// series -- 数据渲染dataSeri = '后端数据'dataSeri.forEach((item)=>timeArr.push(item.xxx); // 时间片段xAxi.push(item.xxx);// 日期});seri = this.sortTime(timeArr);if(seri.includes("00:00")){for(let i=0;i< seri.length; i++){for(let j=0;j< dataseri.length; j++){// xxx  -- 时间片段if(dataseri[j].xxx == seri[i]){// a 后端定义好一个属性存放索引dataSeri[j].a = i+1;}}}}else {for(let i=0;i< seri.length; i++){for(let j=0;j< dataseri.length; j++){// xxx  -- 时间片段if(dataseri[j].xxx == seri[i]){// a 后端定义好一个属性存放索引dataSeri[j].a = i+1;}}}}dataseri.forEach((item) =>{xAxSeri.push(item.a);});});this.$nextTick(()=>{this.yAxData= seri.includes("00:00")? seri:["00:00",...seri];this.xAxData = xAxi;this.seriesData= xAxSeri;this.init();});

echarts 整体代码

          注意 getYaxis 方法

            let option = {tooltip:{trigger:"axis"backgroundcolor:"rgba(0,22,46,.8)",,//设置背景颜色textstyle:{color:"#9ba6b4",fontsize: 14,},formatter:(item)=> {return `<span>日期:</span><span style='color:#e9f3ff'>${item[0].name}</span><br/><span>发生时间</span><span style='color:#e9f3ff'>${this.yAxData[item[0].value]}</span>`},},grid:{top:"20%",left:"5%",right:"8%",bottom:"6%",containLabel: true,},XAxis:[{type:"category",boundaryGap: false,axisLine:{show: true,linestyle:{color:"#26367A",},},splitArea:{show: false,},axisLabel:{textstyle:{color:"#fff",fontsize: 14,},},axisTick:{show: false,},splitLine:{show: false,},data: this.xAxData,},],yAxis:[{name:"时段",nameTextstyle: {color:"#fff",},type:"value',axisLine:{show: false,},axisLabel:{textstyle:{color:"#fff",fontsize:"14",},formatter:function(value,index){return this .getYaxis(value,index)},},minInterval:1,splitLine:{show: true,linestyle:{type: "dashed",color:"#6fc2f1",},},}],series :[{type: "line",data: this.seriesData,symbolsize:10,symbol:"circle",smooth: true,showSymbol: false,linestyle:{width: 2,color:"#O0ffOc",},itemstyle:{normal:{color:"#00ff0c”,linestyle:{color:"#00ff0c”,// 线的颜色},},},}],}getYaxis(value,index){const arr = this.yAxDataif(index< arr.length){return arr[index]}}

      

相关文章:

echarts Y轴展示时间片段,series data数据 也是时间片段,鼠标放上去 提示框显示对应的时间片段

功能要求 1、折线图&#xff0c;展示每天对应的一个时间片段 2、echarts Y轴展示时间片段&#xff0c;如&#xff1a;[00:00,03:00,05:15] 3、X轴展示日期&#xff0c;如&#xff1a;[xx年xx月xx日] 后端返回的数据结构&#xff0c;如 [{xAdate:"2024-06-15",data:…...

20. mediasoup服务器的布署与使用

Mediasoup Demo部署 架构服务分析 服务端提供3个服务&#xff1a; 1.www服务&#xff0c;浏览器通过访问服务器目录获取客户端代码&#xff0c;通过V8引擎&#xff0c;启动底层WebRTC 2.nodejs提供websocket服务和http服务&#xff0c;用于信令交互 3.Mediasoup C提供的流媒体…...

【leetcode--同构字符串】

要求&#xff1a;判断两个字符串的形式是不是一致&#xff0c;即是不是AABC或者ABBBCC这种。 trick&#xff1a;使用set&#xff08;&#xff09;结合zip&#xff08;&#xff09;。 set&#xff08;&#xff09;用法&#xff1a;用于创建一个不包含重复元素的集合 zip&#…...

shell expr功能详解

expr命令可以实现数值运算、数值或字符串比较、字符串匹配、字符串提取、字符串长度计算等功能。它还具个特殊功能&#xff0c;判断变量或参数是否为整数、是否为空、是否为0等。 1.字符串表达式 ------------------------- expr支持模式匹配和字符串操作。字符串表达式的优先…...

java继承Thead类和实现Runnable接口创建线程的区别

一、继承Thread类创建多线程 public class Demo{public static void main(String[] args) {MyThread thread new MyThread();thread.start();}} class MyThread extends Thread{Overridepublic void run() {//子线程执行的操作} }注意&#xff1a;开启子线程要调用start()方法…...

interface Ref<T = any> 这是什么写法?为什么写接口还需要加上<T = any>

问: export interface Ref<T any> { value: T [RefSymbol]: true } 这里既然是interface接口,为什么还有<T any>这是什么意思? 回答: <T any> 中的 <T> 表示这是一个泛型参数&#xff0c;它可以在接口中作为类型的占位符&#xff0c;在实际…...

深入探索 MongoDB GridFS:高效大文件存储与管理的全面指南

GridFS 是 MongoDB 的一个规范&#xff0c;用于存储和检索超过 BSON 文档大小限制&#xff08;16MB&#xff09;的文件。与传统的文件系统不同&#xff0c;GridFS 可以将一个大文件分割成多个小块&#xff0c;并存储在 MongoDB 的两个集合中&#xff1a;fs.files 和 fs.chunks。…...

基于CentOS Stream 9平台 安装/卸载 Redis7.0.15

已更正systemctl管理Redis服务问题 1. 官方下载地址 https://redis.io/downloads/#redis-downloads 1.1 下载或上传到/opt/coisini目录下&#xff1a; mkdir /opt/coisini cd /opt/coisini wget https://download.redis.io/releases/redis-7.0.15.tar.gz2. 解压 tar -zxvf re…...

激励-保健理论和公平理论

激励-保健理论 herzberg的激励-保健理论中&#xff0c;保健因素是context of a job&#xff0c;激励因素是content of a job。 context of a job是受组织控制的因素&#xff0c;比如工作条件&#xff0c;基本工资&#xff0c;公司政策等&#xff0c;个人无法支配。content of…...

深入探索 Spring Boot 自定义启动画面

目录 引言什么是 Spring Boot 启动画面Spring Boot 默认启动画面为什么要自定义启动画面如何自定义 Spring Boot 启动画面 修改配置文件使用 Banner 接口通过图片实现启动画面ASCII 艺术画的应用 进阶&#xff1a;基于环境变量的动态 Banner多模块项目中的启动画面Spring Boot…...

Redis实战—Redis分布式锁

本博客为个人学习笔记&#xff0c;学习网站与详细见&#xff1a;黑马程序员Redis入门到实战 P56 - P63 目录 分布式锁介绍 基于Redis的分布式锁 Redis锁代码实现 修改业务代码 分布式锁误删问题 分布式锁原子性问题 Lua脚本 编写脚本 代码优化 总结 分布式锁介绍…...

联想Y7000P 2023款拆机教程及升级内存教程

0.电脑参数介绍 联想Y7000P 2023电脑&#xff0c;笔者电脑CPU为i7-13700H&#xff0c;14核20线程&#xff1b;标配内存为三星的DDR5-5600MHz-8GB*2&#xff0c;由于电脑CPU限制&#xff0c;实际内存跑的频率为5200MHz; 2个内存插槽&#xff0c;2个固态硬盘插槽。每个内存插槽最…...

开发常用依赖

目录 代理对象 Swagger Web 单元测试 MybatisPlus Lombok Mysql SpringBoot Jdk SpringCloud 数据库驱动包 hutool工具 配置仓库 通用库 maven插件 nacos注册中心 OpenFeign Spring AMQP JSON转换器 Redis 邮箱验证 Redisson分布式锁 客户端 代理对象 &l…...

【区分vue2和vue3下的element UI Empty 空状态组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Element UI&#xff08;为 Vue 2 设计&#xff09;和 Element Plus&#xff08;为 Vue 3 设计&#xff09;中&#xff0c;Empty&#xff08;空状态&#xff09;组件通常用于在数据为空或没有内容时向用户展示一种占位提示。然而&#xff0c;需要注意的是&#xff0c;Element…...

【AI作曲】毁掉音乐?早该来了!一个网易音乐人对于 AI 大模型音乐创作的思辨

引言&#xff1a;AI在创造还是毁掉音乐&#xff1f; 正如当初 midjourney 和 StableDiffusion 在绘画圈掀起的风波一样&#xff0c;suno 和 各大音乐大模型的来临&#xff0c;其实早该来了。 AI 在毁掉绘画&#xff1f;或者毁掉音乐&#xff1f; 没错&#xff0c;但也错了。…...

RabbitMQ实践——最大长度队列

大纲 抛弃消息创建最大长度队列绑定实验 转存死信创建死信队列创建可重写Routing key的最大长度队列创建绑定关系实验 在一些业务场景中&#xff0c;我们只需要保存最近的若干条消息&#xff0c;这个时候我们就可以使用“最大长度队列”来满足这个需求。该队列在收到消息后&…...

【pytorch02】手写数字问题引入

1.数据集 现实生活中遇到的问题 车牌识别身份证号码识别快递单的识别 都会涉及到数字识别 MNIST&#xff08;收集了很多人手写的0到9数字的图片&#xff09; 每个数字拥有7000个图像train/test splitting:60k vs 10k 图片大小28 28 数据集划分成训练集和测试集合的意义…...

【查看显卡信息】——Ubuntu和windows

1、VMware虚拟机 VMware虚拟机上不能使用CUDA/CUDNN&#xff0c;也安装不了显卡驱动 查看显卡信息&#xff1a; lspci | grep -i vga 不会显示显卡信息&#xff0c;只会输出VMware SVGA II Adapter&#xff0c;表示这是一个虚拟机&#xff0c;无法安装和使用显卡驱动 使用上…...

在 RK3568 上构建 Android 11 模块:深入解析 m、mm、mmm 编译命令

目录 Android 编译系统概述编译命令简介 环境准备使用 m、mm、mmm 编译模块编译整个源码树编译单个模块编译指定目录下的模块 高级应用并行编译清理编译结果编译特定配置 在 Android 开发中&#xff0c;特别是在 RK3568 这样的高性能平台上&#xff0c;有效地编译和管理模块是确…...

实战|YOLOv10 自定义目标检测

引言 YOLOv10[1] 概述和使用自定义数据训练模型 概述 由清华大学的研究团队基于 Ultralytics Python 包研发的 YOLOv10&#xff0c;通过优化模型结构并去除非极大值抑制&#xff08;NMS&#xff09;环节&#xff0c;提出了一种创新的实时目标检测技术。这些改进不仅实现了行业领…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...