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

js遍历后端返回的集合将条件相同的放入同一个数组内

项目场景:

echarts折线图需要根据条件动态展示多条不同曲线


解决方案:

后端直接将使用sql将数据查询出来返回即可,因为我这里不是Java使用的C#不是很熟练后台不好写逻辑,所以在前端js完成的

代码如下:

 function createline(villagename, buildingname, unitname, roomname, startime, stoptime) {// console.log("roomname: "+roomname)//$("#demo").empty();var myChart = echarts.init(document.getElementById('demo'), myEchartsTheme);myChart.clear();var tempindoor = [],tempset = [],tempwaterin = [],tempwaterout = [];$.ajax({type: 'post',url: '../AJAXHandler.ashx',data: {"Method": "GetData","limit": 99999,"page": 1,"VillageName": villagename,"BuildingName": buildingname,"UnitName": unitname,"RoomName": roomname,"startime": startime,"stoptime": stoptime},success: function (res) {var xData = [];//console.log("res: "+res);var json = $.parseJSON(res);json = json.data;for (var i = 0; i < json.length; i++) {tempindoor.push(json[i].TMP_INDOOR);//console.log("tempindoor: "+tempindoor);tempset.push(json[i].TMP_SET);tempwaterin.push(json[i].TEMP_WATER_IN);tempwaterout.push(json[i].TEMP_WATER_OUT);xData.push(new Date(json[i].RTime).format('yyyy-MM-dd hh:mm:ss'));}
/**这里定义新的数组将查到的数据通过遍历存到新数组内,然后根据判断是否有相同的数据,如果没有就走if内的语句存入数组内,如果有相同的就走else内的语句,之后将数据存到map里根据条件去展示符合的数据,然后将这个map存到echarts渲染的部分的数组内 就可以做到动态展示了**/const result = [];json.forEach((item) => {const index = result.findIndex((r) => r.room === item.room);if (index === -1) {result.push({ room: item.room, names: [item.TMP_INDOOR] });} else {result[index].names.push(item.TMP_INDOOR);}});//console.log(result);const legend = result.map(item => item.room); // 图例const arr = result.map(item => ({ // 数据name: item.room,type: "line",data: item.names}));//手机适配if (window.screen.width < 1000) {var legends = {x: '100px',//data: ['室内温度',  '设定温度', '进水温度', '回水温度']data: ['室内温度'],textStyle: {color: '#009688'}};} else {var legends = {x: 'center',//data: ['室内温度',  '设定温度', '进水温度', '回水温度']data: ['室内温度'],textStyle: {color: '#009688'}};}var option = createoption('单位:℃', xData, legends, arr);myChart.setOption(option, true);//EChars图手机适配window.onresize = myChart.resize;},error: function () {//alert("折线图报错!");}});tempindoor = [], tempset = [], tempwaterin = [], tempwaterout = [];}

相关文章:

js遍历后端返回的集合将条件相同的放入同一个数组内

项目场景&#xff1a; echarts折线图需要根据条件动态展示多条不同曲线 解决方案&#xff1a; 后端直接将使用sql将数据查询出来返回即可,因为我这里不是Java使用的C#不是很熟练后台不好写逻辑,所以在前端js完成的 代码如下: function createline(villagename, buildingname…...

GcExcel:DsExcel 7.0 for Java Crack

GcExcel:DsExcel 7.0-高速 Java Excel 电子表格 API 库 Document Solutions for Excel&#xff08;DsExcel&#xff0c;以前称为 GcExcel&#xff09;Java 版允许您在 Java 应用程序中以编程方式创建、编辑、导入和导出 Excel 电子表格。几乎可以部署在任何地方。 创建、加载、…...

基于SpringBoot的职业生涯规划系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的职业生涯规划系统,java…...

基于Java+SpringBoot+vue+elementui的校园文具商城系统详细设计和实现

基于JavaSpringBootvueelementui的校园文具商城系统详细设计和实现 欢迎点赞 收藏 ⭐留言 文末获取源码联系方式 文章目录 基于JavaSpringBootvueelementui的校园文具商城系统详细设计和实现前言介绍&#xff1a;系统设计&#xff1a;系统开发流程用户登录流程系统操作流程 功能…...

PyTorch中常用的工具(5)使用GPU加速:CUDA

文章目录 前言4 使用GPU加速&#xff1a;CUDA5 小结 前言 在训练神经网络的过程中需要用到很多的工具&#xff0c;最重要的是数据处理、可视化和GPU加速。本章主要介绍PyTorch在这些方面常用的工具模块&#xff0c;合理使用这些工具可以极大地提高编程效率。 由于内容较多&am…...

Qt+opencv 视频分解为图片

最近遇到一些售前提供的BUG&#xff0c;但是他们提供的是录像视频&#xff0c;因为处理显示速度比较快&#xff0c;因此很难找到出现问题的位置。需要反复播放&#xff0c;自己编写了一个视频分解成图片这样就可以一张图一张图的对比&#xff0c;方便查看。 开发环境 qtopenv…...

一篇文章认识微服务的优缺点和微服务技术栈

目录 1、微服务 2、微服务架构 3、微服务优缺点 3.1 优点 3.2 缺点 4、微服务技术栈 1、微服务 微服务化的核心就是将传统的一站式应用&#xff0c;根据业务拆分成一个一个的服务&#xff0c;彻底地去耦合&#xff0c;每一个微服务提供单个业务功能的服务&#xff0c;一…...

[spark] dataframe的数据导入Mysql5.6

在 Spark 项目中使用 Scala 连接 MySQL 5.6 并将 DataFrame 中的数据保存到 MySQL 中的步骤如下&#xff1a; 添加 MySQL 连接驱动依赖&#xff1a; 在 Spark 项目中&#xff0c;你需要在项目的构建工具中添加 MySQL 连接驱动的依赖。 如果使用 Maven&#xff0c;可以在 pom.xm…...

2023年度业务风险报告:四个新风险趋势

目录 倒票的黄牛愈加疯狂 暴增的恶意网络爬虫 愈加猖獗的羊毛党 层出不穷的新风险 业务风险呈现四个趋势 防御云业务安全情报中心“2023年业务风险数据”统计显示&#xff0c;恶意爬虫风险最多&#xff0c;占总数的37.8%&#xff1b;其次是虚假账号注册&#xff0c;占18.79%&am…...

python编程从入门到实践(1)

文章目录 2.2.1命名的说明2.3字符串2.3.1使用方法修改字符串的大小写2.3.2 在字符串中使用变量2.3.3 制表符 和 换行符2.5.4删除空白2.5.5 删除前缀&#xff0b;后缀 2.2.1命名的说明 只能包含&#xff1a;字母&#xff0c;下划线&#xff0c;数字 必须&#xff1a;字母&#…...

ElasticSearch 文档操作

创建文档 指定id // 无则插入&#xff0c;有则覆盖&#xff08;覆盖的逻辑是先删除&#xff0c;再插入&#xff09; PUT /<target>/_doc/<_id> // 无则插入&#xff0c;有则覆盖 POST /<target>/_doc/<_id> // 无则插入&#xff0c;有则报错 PUT /&l…...

NXOpenC++布尔求和命令

一、概述 在进行批量布尔求和时&#xff0c;采用NXOpenC的方式要比UFun的方式美观的多&#xff0c;个人认为&#xff0c;ufun中UF_MODL_unite_bodies函数采用的是两两进行合并&#xff0c;显示多个步骤&#xff0c;而NXOpenC采用的是一个工具体和多个目标体进行合并&#xff0c…...

ubuntu python播放MP3,wav音频和录音

目录 一.利用pygame&#xff08;略显麻烦&#xff0c;有时候播放不太正常&#xff09;1.安装依赖库2.代码 二.利用mpg123&#xff08;简洁方便&#xff0c;但仅争对mp3&#xff09;1.安装依赖库2.代码 三.利用sox&#xff08;简单方便&#xff0c;支持的文件格式多&#xff09;…...

Rust学习笔记000 安装

安装命令 curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh $ curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh info: downloading installerWelcome to Rust!This will download and install the official compiler for the Rust programming la…...

python AI五子棋对战

我写过一篇c++五子棋 c++五子棋代码-CSDN博客 现在又写了python import copy import time from enum import IntEnum import pygame from pygame.locals import *time = time.strftime("%Y-%m-%d %H:%M:%S") version = str(time)# 基础参数设置 square_size = 40 …...

图文证明 费马,罗尔,拉格朗日,柯西

图文证明 罗尔,拉格朗日,柯西 费马引理和罗尔都比较好证,不过多阐述,看图即可: 费马引理: 罗尔定理: 重点来证明拉格朗日和柯西 拉格朗日: 我认为不需要去看l(x)的那一行更好推: 详细的推理过程: 构造 h ( x ) f ( x ) − l ( x ) , 因为 a , b 两点为交点 , f ( a ) l ( …...

CEC2017(Python):粒子群优化算法PSO求解CEC2017(提供Python代码)

一、CEC2017简介 参考文献&#xff1a; [1]Awad, N. H., Ali, M. Z., Liang, J. J., Qu, B. Y., & Suganthan, P. N. (2016). “Problem definitions and evaluation criteria for the CEC2017 special session and competition on single objective real-parameter numer…...

AUTOSAR从入门到精通- 虚拟功能总线(RTE)(一)

目录 前言 几个高频面试题目 RTE S/R接口implicit与Explicit的实现与区别 接口的代码 implicit...

B/S架构云端SaaS服务的医院云HIS系统源码,自主研发,支持电子病历4级

医院云HIS系统源码&#xff0c;自主研发&#xff0c;自主版权&#xff0c;电子病历病历4级 系统概述&#xff1a; 一款满足基层医院各类业务需要的云HIS系统。该系统能帮助基层医院完成日常各类业务&#xff0c;提供病患挂号支持、病患问诊、电子病历、开药发药、会员管理、统…...

看懂基本的电路原理图(入门)

文章目录 前言一、二极管二、电容三、接地一般符号四、晶体振荡器五、各种符号的含义六、查看原理图的顺序总结 前言 电子入门&#xff0c;怎么看原理图&#xff0c;各个图标都代表什么含义&#xff0c;今天好好来汇总一下。 就比如这个电路原理图来说&#xff0c;各个符号都…...

3分钟掌握:163MusicLyrics终极免费歌词解决方案全攻略

3分钟掌握&#xff1a;163MusicLyrics终极免费歌词解决方案全攻略 【免费下载链接】163MusicLyrics 云音乐歌词获取处理工具【网易云、QQ音乐】 项目地址: https://gitcode.com/GitHub_Trending/16/163MusicLyrics 想要快速获取网易云音乐和QQ音乐的歌词吗&#xff1f;1…...

多模态AI应用开发实战:GPT与图像生成的集成架构与优化

1. 项目概述与核心价值最近在折腾AI图像生成和智能对话的整合应用时&#xff0c;发现了一个挺有意思的仓库&#xff1a;bubblesslayyer-cmd/Awesome-GPT-Image-2-OpenAi。这个项目名字乍一看有点长&#xff0c;但拆解一下就能明白它的核心——“Awesome”系列通常代表精选资源集…...

从零构建AOD-Net:PyTorch实战图像去雾模型开发全流程

1. 环境准备与数据理解 在开始构建AOD-Net之前&#xff0c;我们需要先搭建好开发环境。推荐使用Anaconda创建独立的Python环境&#xff0c;避免与其他项目产生依赖冲突。这里我选择Python 3.8和PyTorch 1.12的组合&#xff0c;这个版本经过实测在图像处理任务中表现稳定。 安装…...

ARMv8-AArch64 异常处理实战:从寄存器解析到调试技巧

1. ARMv8-AArch64异常处理入门指南 第一次接触ARMv8架构的异常处理时&#xff0c;我被那一堆寄存器搞得头晕眼花。ELR、ESR、FAR...这些缩写看起来就像天书一样。但经过几个实际项目的磨练后&#xff0c;我发现只要掌握几个关键点&#xff0c;异常处理其实并没有想象中那么难。…...

3分钟掌握跨平台模组下载神器:WorkshopDL全攻略

3分钟掌握跨平台模组下载神器&#xff1a;WorkshopDL全攻略 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 还在为Epic Games或GOG平台的游戏无法使用Steam创意工坊模组而烦恼吗…...

从开源AI导师项目GURU-Ai拆解:如何构建具备教学能力的智能体

1. 项目概述&#xff1a;一个“AI导师”的诞生与定位最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Guru322/GURU-Ai”。光看名字&#xff0c;你可能会觉得这又是一个平平无奇的AI工具仓库。但点进去细看&#xff0c;你会发现它的野心不小——它想做的不是又一个聊天机…...

基于Rust与Candle的AI推理引擎cria:简化大模型本地部署与优化

1. 项目概述&#xff1a;从“左移”到“创造”的AI推理引擎 最近在折腾AI模型本地部署和推理优化的朋友&#xff0c;可能都绕不开一个名字&#xff1a; cria 。这个由 leftmove 开源的项目&#xff0c;全称是“Cria: The AI Inference Engine”&#xff0c;直译过来就是“创…...

MCP服务器自动发现与管理工具mcpfinder详解

1. 项目概述&#xff1a;一个用于发现与管理MCP服务器的工具如果你正在构建或使用基于模型上下文协议&#xff08;Model Context Protocol&#xff0c; 简称MCP&#xff09;的应用&#xff0c;那么你很可能遇到过这样的困扰&#xff1a;手头有几个不同功能的MCP服务器&#xff…...

Pro Trinket:Arduino UNO的紧凑型替代方案与双模编程实战

1. Pro Trinket&#xff1a;当Arduino遇上“口袋工程学”如果你和我一样&#xff0c;在创客圈子里摸爬滚打多年&#xff0c;肯定经历过这样的场景&#xff1a;一个基于Arduino UNO的酷炫原型在面包板上运行得风生水起&#xff0c;但当你试图把它塞进一个精致的3D打印外壳&#…...

Linux压缩归档与备份文件管理

Linux压缩归档与备份文件管理在 Linux 运维工作中&#xff0c;压缩与归档几乎无处不在。日志备份、数据迁移、配置留档、故障现场保存&#xff0c;都会涉及文件打包和压缩。如果缺乏规范&#xff0c;备份文件很容易散落各处、命名混乱、占用失控&#xff0c;最终从保障手段变成…...