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]}}

      

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

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

相关文章

【c++11 之智能指针2 unique、shared、weak *_ptr 原理及案例】及四种智能指针对比分析

C11引入了智能指针&#xff08;Smart Pointers&#xff09;的概念&#xff0c;它们是一种自动管理内存的生命周期的指针类型&#xff0c;帮助开发者避免内存泄漏和野指针等问题。C11标准库中定义了三种智能指针&#xff1a;std::unique_ptr、std::shared_ptr和std::weak_ptr。 …

异步开发的终极答案—协程

我们在之前的文章中讲过,在并发场景下,传统的基于多线程的命令式开发模型虽然比较简单,但并发数高了之后资源占用较高,大量线程会阻塞;而响应式编程模式我们可以通过异步化处理提升系统资源的利用效率,但异步开发有违人的直觉,门槛比较高。作为成年人,我们肯定希望全都…

Linux系统及常用命令介绍

一.介绍 Linux一套免费使用和自由传播的类Unix操作系统&#xff0c;是一个遵循POSIX的多用户、多任务、支持多线程和多CPU的操作系统。Linux系统的说明可以自行百度&#xff0c;知道这几点即可&#xff1a; 1.Linux中一切都是文件&#xff1b; 2.Linux是一款免费操作系统&…

【CT】LeetCode手撕—42. 接雨水

目录 题目1- 思路2- 实现⭐42. 接雨水——题解思路 3- ACM实现 题目 原题连接&#xff1a;42. 接雨水 1- 思路 模式识别&#xff1a;求雨水的面积 ——> 不仅是只求一个比当前元素大的元素&#xff0c;还要求面积 单调栈 应用场景&#xff0c;需要找到左边比当前元素大的…

周末总结(2024/06/22)

工作 人际关系核心实践&#xff1a; 要学会随时回应别人的善意&#xff0c;执行时间控制在5分钟以内 坚持每天早会打招呼 遇到接不住的话题时拉低自己&#xff0c;抬高别人(无阴阳气息) 工作上的要点 现状&#xff08;接受破烂现状&#xff0c;改变状态&#xff09; - 这周没…

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()方法…

Vue82-组件内路由守卫

一、组件内路由守卫的定义 在一个组件里面去写路由守卫&#xff0c;而不是在路由配置文件index.js中去写。 此时&#xff0c;该路由守卫是改组件所独有的&#xff01; 只有通过路由规则进入的方式&#xff0c;才会调这两个函数&#xff0c;否则&#xff0c;若是只是用<Ab…

FastGPT部署

部署脚本 # 数据库的默认账号和密码仅首次运行时设置有效 # 如果修改了账号密码&#xff0c;记得改数据库和项目连接参数&#xff0c;别只改一处~ # 该配置文件只是给快速启动&#xff0c;测试使用。正式使用&#xff0c;记得务必修改账号密码&#xff0c;以及调整合适的知识库…

Vue3图片显示组件,支持多张图片,缩略图,全屏动态加载大图

通过imgs参数传入多张图片&#xff0c;图片路径中包含 /small/ 表示是缩略图&#xff0c;将 /small/ 改为 / 即是该图片的大图。组件首先显示缩略图&#xff0c;然后在mounted事件中js动态加载大图&#xff0c;加载完毕后用大图的内容替换缩略图&#xff0c;实现高清图片的丝滑…

尚品汇-(四)

&#xff08;1&#xff09;商品的基本知识 1.1基本信息—分类 一般情况可以分为两级或者三级。咱们的项目一共分为三级&#xff0c;即一级分类、二级分类、三级分类。 比如&#xff1a;家用电器是一级分类&#xff0c;电视是二级分类&#xff0c;那么超薄电视就是三级分类。…

网页如何发布到服务器上

将网页发布到服务器上的过程涉及多个步骤&#xff0c;包括准备阶段、选择托管提供商、发布网站等。12 准备阶段&#xff1a; 确保在本地开发环境中对网站进行了充分的测试&#xff0c;包括功能测试、性能测试和安全测试。 检查Web.config文件&#xff0c;确保所有的配置设置…

Java中的负载均衡与服务治理

Java中的负载均衡与服务治理 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨Java中的负载均衡与服务治理&#xff0c;这两者在现代分布式系统和微…

Android使用MPAndroidChart 绘制折线图

效果图&#xff1a; 1.导入依赖 1.1在项目根目录下的build.gradle文件中添加代码&#xff08;注意不是app下的build.gradle&#xff09;&#xff1a; maven { url https://jitpack.io } 1.2在app下的build.gradle中的依赖下添加&#xff1a; implementation com.github.PhilJa…

CentOS 7 内核 3.10 升级 6.5.2 (RPM 直装 + 源码编译)

方案一 直接基于 RPM 在线升级&#xff08;简单&#xff0c;速度快&#xff09; rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org yum install https://www.elrepo.org/elrepo-release-7.el7.elrepo.noarch.rpm -y # &#xff08;选项一&#xff09;升级最新版内…

昇腾Ascend上使用分布式训练

一、环境搭建 1、使用hccn_tool配置昇腾训练卡的芯片网络&#xff0c;包括ip地址和掩码 命令原型 hccn_tool [-i %d] -ip -s [address %s] [netmask %s] 使用样例(配置两张卡)&#xff1a; hccn_tool -i 0 -ip -s address 192.168.2.10 netmask 255.255.255.0 hccn_tool …

IOS Swift 从入门到精通:协议和扩展

文章目录 协议协议继承扩展协议扩展面向协议的编程总结&#xff1a; 今天你将学习一些真正的 Swifty 功能&#xff1a;协议和面向协议的编程&#xff08;POP&#xff09;。 POP 摒弃了庞大而复杂的继承层次结构&#xff0c;代之以更小、更简单、可以组合在一起的协议。这确实应…

Magento1与Magento2的区别

本人接触magento有些年头了。。。 2012年开始用magento 1.7。2016年开始用magento2.0。 截止到目前。M1最新版本是1.9.3.3。 M2最新版本是2.2.2。 想当年第一次接触magento的时候&#xff0c;是跟同事一起&#xff0c;网上下载的Alan Storm的深入理解magento系统&#xff0c;…

【UML用户指南】-20-对基本行为建模-交互图

目录 1、概述 2、顺序图 2.1、两个不同于通信图的特征&#xff1a; 2.1.1、顺序图有对象生命线 2.1.2、顺序图有控制焦点 2.2、结构化控制 2.2.1、可选执行opt 2.2.2、条件执行alt 2.2.3、并行执行par 2.2.4、循环迭代执行loop 2.3、嵌套活动图 3、通信图 3.1、两…

【Python】实用脚本--大疆精灵4rtk照片信息提取

你是否想过&#xff0c;为啥就是拍个照片&#xff0c;为啥会占用几十上百兆&#xff1f; 其实除了照片的像素&#xff0c;照片里还附带了很多其他信息。 这个脚本是之前读取大疆精灵4rtk拍摄的照片信息用的&#xff0c;发出来&#xff0c;按需取用。 #!/usr/bin/env python # …

jnp.matmul和jnp.dot的区别?

jnp.matmul 和 jnp.dot 都是用于矩阵乘法的函数&#xff0c;但它们在处理多维数组&#xff08;即张量&#xff09;时有不同的行为。以下是它们的区别和具体用法&#xff1a; jnp.dot 主要用于向量点积和矩阵乘法。对于一维数组&#xff0c;计算向量的点积。对于二维数组&…