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

echarts多个折线图共用一个x轴和tooltip组件

实现效果

根据接口传来的数据,使用echarts绘制出,共用一个x轴的图表
功能:后端将所有数据传送过来,前端通过监听选中值来展示对应的图表数据
在这里插入图片描述

数据格式:

在这里插入图片描述
在这里插入图片描述

代码:

<template><div><div class="screen-list-item"><span style="display: inline-block; width: 140px">量测类录波值选项:</span><el-selectmultiplecollapse-tagscollapse-tags-tooltipstyle="width: 260px"clearablepopper-class="select-box":teleported="false"v-model="SensorListVal"placeholder="请输入量测"size="small"class="m-2"><el-optionv-for="item in SensorList.data":key="item.value":label="item.label":value="item.value"/></el-select></div><divid="FaultRecording1"style="width: 800px; height: 180px; margin: auto"></div></div>
</template><script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted, reactive, ref, watch } from "vue";
// 调用接口数据
import { AllRecordDataApi } from "@/utils/record";
import { RecordPostBc } from "@/utils/request";export default {setup() {let recordDataList = ref([]);let xseriesdata = ref([]);let SensorListVal = ref([]);let SensorList = reactive({data: [],});// 获取录波数据let recordData = async () => {const result = await RecordPostBc(AllRecordDataApi, {});console.log(result)// 找出数据中所有选项,为筛选框的选择项SensorList.data = result.list.map(obj => ({ value: obj.name, label: obj.name }) );// 图表数据recordDataList.value = result.listxseriesdata.value = result.time// 默认选择前两项SensorListVal.value = SensorList.data.slice(0, 2).map(item => item.value);recordEcharts1()}//绘制图表let recordEcharts1 = () => {let myChart = echarts.init(document.getElementById("FaultRecording1"));myChart.clear(); // 清除之前的图表实例let options = {grid: [// 第一个折线图{left: '3%',right: '4%',top: '10%',height: '32%',},// 第二个折线图{left: '3%',right: '4%',top: '50%',height: '32%',},],tooltip: {trigger: 'axis', },// 将上下两个tootip合成一个axisPointer: {link: { xAxisIndex: 'all' },},xAxis: [{type: 'category',scale: true,axisLabel: {show: false,},data: xseriesdata.value, //x轴时间的数据},{gridIndex: 1,type: 'category',scale: true,data: xseriesdata.value, //x轴时间的数据},],yAxis: [{type: 'value',scale: false,splitLine: {show: false,},},{type: 'value',gridIndex: 1,scale: true,splitLine: {show: false,},},],dataZoom: [{show: true,realtime: true,start: 30,end: 70,xAxisIndex: [0, 1],},{type: "inside",realtime: true,start: 30,end: 70,xAxisIndex: [0, 1],},],series: [],};// 添加每条曲线数据到 series 中for (var i = 0; i < recordDataList.value.filter(record => SensorListVal.value.includes(record.name)).length; i++) {options.series.push({xAxisIndex: i,yAxisIndex: i,name: recordDataList.value.filter(record => SensorListVal.value.includes(record.name))[i].name,type: 'line',smooth: 'true',data: recordDataList.value.filter(record => SensorListVal.value.includes(record.name))[i].data});}myChart.setOption(options);}onMounted(() => {recordData();});// 监听 SensorListVal 的变化watch(SensorListVal, (newValue, oldValue) => {recordEcharts1()});return { SensorList, SensorListVal  };},
};

相关文章:

echarts多个折线图共用一个x轴和tooltip组件

实现效果 根据接口传来的数据&#xff0c;使用echarts绘制出&#xff0c;共用一个x轴的图表 功能&#xff1a;后端将所有数据传送过来&#xff0c;前端通过监听选中值来展示对应的图表数据 数据格式&#xff1a; 代码&#xff1a; <template><div><div clas…...

wireshark数据捕获实验简述

Wireshark是一款开源的网络协议分析工具&#xff0c;它可以用于捕获和分析网络数据包。是一款很受欢迎的“网络显微镜”。 实验拓扑图&#xff1a; 实验基础配置&#xff1a; 服务器&#xff1a; ip:172.16.1.88 mask:255.255.255.0 r1: sys sysname r1 undo info enable in…...

如何利用RunnerGo简化性能测试流程

在软件开发过程中&#xff0c;测试是一个重要的环节&#xff0c;需要投入大量时间和精力来确保应用程序或网站的质量和稳定性。但是&#xff0c;随着应用程序变得更加复杂和庞大&#xff0c;传统的测试工具在面对比较繁琐的项目时非常费时费力。这时&#xff0c;一些自动化测试…...

继承和深拷贝封装

继承和深拷贝封装 今日目标&#xff1a; 1.es5寄生组合式继承 2.es6类的继承 3.深拷贝函数封装 00-回顾 # 不同数据类型赋值时的区别&#xff1a; 基本数据类型&#xff0c;赋的就是值&#xff0c;相互之间不再有任何影响 引用数据类型&#xff0c;赋的是地址&#xff0c…...

《定时执行专家》:Nircmd 的超级搭档,解锁自动化新境界

目录 Nircmd 简介 《定时执行专家》与 Nircmd 的结合 示例&#xff1a; 自动清理电脑垃圾: 定时发送邮件: 定时关闭电脑: 《定时执行专家》的优势: 总结: 以下是一些其他使用示例&#xff1a; 立即下载《定时执行专家》&#xff1a; Nircmd 官方网站&#xff1a; 更…...

Android 封装的工具类

文章目录 日志封装类-MyLog线程封装类-LocalThreadPools自定义进度条-LoadProgressbar解压缩类-ZipUtils本地数据库类-MySQLiteHelper访问webservice封装-HttpUtilsToolbar封装类-MaterialToolbar网络请求框架-OkGo网络请求框架-OkHttp 日志封装类-MyLog 是对android log的封装…...

linux下线程分离属性

linux下线程分离属性 一、线程的属性---分离属性二、线程属性设置2.1 线程创建前设置分离属性2.2 线程创建后设置分离属性 一、线程的属性—分离属性 什么是分离属性&#xff1f; 首先分离属性是线程的一个属性&#xff0c;有了分离属性的线程&#xff0c;不需要别的线程去接合…...

Leetcode 208. 实现 Trie (前缀树)

心路历程&#xff1a; 一道题干进去了一个下午&#xff0c;单纯从解题角度可以直接用python的集合就很简单地解决&#xff08;不知道是不是因为python底层的set()类&#xff09;。后来从网上看到这道题应该从前缀树的角度去做&#xff0c;于是花了半个多小时基于字典做了前缀树…...

蓝桥杯练习题——健身大调查

在浏览器中预览 index.html 页面效果如下&#xff1a; 目标 完成 js/index.js 中的 formSubmit 函数&#xff0c;用户填写表单信息后&#xff0c;点击蓝色提交按钮&#xff0c;表单项隐藏&#xff0c;页面显示用户提交的表单信息&#xff08;在 id 为 result 的元素显示&#…...

React——组件通讯

组件通讯介绍 组件中的状态是私有的&#xff0c;组件的状态只能在组件内部使用&#xff0c;无法直接在组件外使用&#xff0c;但是我们在日常开发中&#xff0c;通常会把相似、功能完整的应用才分成组件&#xff08;工厂模式&#xff09;利于我们的开发&#xff0c;而不同组件直…...

php闭包应用

laravel 路由 bingTo 把路由URL映射到匿名回调函数上&#xff0c;框架会把匿名回调函数绑定到应用对象上&#xff0c;这样在匿名函数中就可以使用$this关键字引用重要的应用对象。Illuminate\Support\Traits\Macroable的__call方法。 自己写一个简单的demo: <?php <?…...

基于python+vue的OA公文发文管理系统flask-django-php-nodejs

系统根据现有的管理模块进行开发和扩展&#xff0c;采用面向对象的开发的思想和结构化的开发方法对OA公文发文管理的现状进行系统调查。采用结构化的分析设计&#xff0c;该方法要求结合一定的图表&#xff0c;在模块化的基础上进行系统的开发工作。在设计中采用“自下而上”的…...

脉冲变压器电感的工艺结构原理及选型参数总结

🏡《总目录》 目录 1,概述2,工作原理3,结构特点3.1,铁心结构3.2,铁心材料3.3,绕组4,工艺流程4.1,准备铁芯4.2,绕制线圈4.3,安装线圈4.4,固定线圈4.5,绝缘处理4.6,高压脉冲引出...

java中Arrays介绍及常用方法

在Java中&#xff0c;java.util.Arrays类是一个提供了各种操作数组的工具类。该类提供了一系列静态方法来对数组进行排序、搜索、填充、复制等操作。下面是对Arrays类的介绍以及常用方法的说明: toString()方法&#xff1a;将数组转换为字符串形式并返回&#xff0c;方便输出数…...

CTF题型 Http请求走私总结Burp靶场例题

CTF题型 Http请求走私总结&靶场例题 文章目录 CTF题型 Http请求走私总结&靶场例题HTTP请求走私HTTP请求走私漏洞原理分析为什么用前端服务器漏洞原理界定标准界定长度 重要!!!实验环境前提POST数据包结构必要结构快速判断Http请求走私类型时间延迟CL-TETE-CL 练习例题C…...

Nginx 的安装、启动和关闭

文章目录 一、背景说明二、Nginx 的安装2.1、依赖的安装2.2、Nginx 安装2.3、验证安装 三、启动 Nginx3.1、普通启动3.2、如何判断nginx已启动3.3、通过配置启动3.4、设置开机启动 四、关闭 Nginx4.1、优雅地关闭4.2、快速关闭4.3、只关闭主进程4.4、使用nginx关闭服务 五、重启…...

python 操作excel(openpyxl.load_workbook)、excel操作封装

操作excel 其他的库&#xff1a; xlrd xlwt &#xff1a; 过时了&#xff0c;只能操作xls后缀的文件。pandas&#xff1a;大数据测试 数据分析项目会用。 openpyxl&#xff1a;第三方库 支持的格式有&#xff1a;.xlsx、.xlsm、.xltx、.xltm&#xff0c;l不支持.xls文件格式…...

MySQL系统参数配置实战:生产环境优化

引言&#xff1a; MySQL作为广泛应用的关系型数据库&#xff0c;其系统参数配置直接影响着数据库的性能、稳定性以及资源利用率。本文旨在深入探讨MySQL的核心系统参数&#xff0c;并提供一份面向生产环境的配置建议&#xff0c;以帮助运维人员更好地优化数据库性能&#xff0…...

判断列表中每一个元素的个数

1.使用循环 nums [1, 1, 1, 2, 2, 3]# 构建一个空字典来存储元素和它们出现的次数 count_dict {}# 遍历列表&#xff0c;更新字典中每个元素出现的次数 for num in nums:if num in count_dict:count_dict[num] 1else:count_dict[num] 1# 输出统计结果 for num, count in c…...

目标检测——PP-YOLOE算法解读

PP-YOLO系列&#xff0c;均是基于百度自研PaddlePaddle深度学习框架发布的算法&#xff0c;2020年基于YOLOv3改进发布PP-YOLO&#xff0c;2021年发布PP-YOLOv2和移动端检测算法PP-PicoDet&#xff0c;2022年发布PP-YOLOE和PP-YOLOE-R。由于均是一个系列&#xff0c;所以放一起解…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...