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

news2024/11/29 12:37:53

项目场景:

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 = [];
 }

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

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

相关文章

构建安全的SSH服务体系

1、配置OpenSSH服务端 在CentOS7.3系统中&#xff0c;OpenSSH服务由openssh、openssh-server等软件包提供&#xff08;默认已安装&#xff09;&#xff0c;并已将sshd添加为标准的系统服务。执行"systemctl start sshd"命令即可启动sshd服务。ssh服务的配置文件默认位…

前端:html+css+js实现CSDN首页

提前说一下&#xff0c;只实现了部分片段哈&#xff01;如下&#xff1a; 前端&#xff1a;htmlcssjs实现CSDN首页 1. 实现效果2. 需要了解的前端知识3. 固定定位的使用4. js 监听的使用4. 参考代码和运行结果 1. 实现效果 我的实现效果为&#xff1a; 原界面如下,网址为&…

按照故障码类型分类的API接口

随着汽车的普及&#xff0c;车辆故障也成为了一个不可忽视的问题。对于车主来说&#xff0c;及时了解故障码的含义以及解决方案十分重要。挖数据平台为解决这一问题&#xff0c;提供了一套按照故障码类型分类的API接口&#xff0c;用于查询车辆故障、故障码适用品牌以及提供相应…

托管在亚马逊云科技的向量数据库MyScale如何借助AWS基础设施构建稳定高效的云数据库

MyScale是一款完全托管于亚马逊云科技&#xff0c;支持SQL的高效向量数据库。MyScale的优势在于&#xff0c;它在提供与专用向量数据库相匹敌甚至优于的性能的同时&#xff0c;还支持完整的SQL语法。以下内容&#xff0c;将阐述MyScale是如何借助亚马逊云科技的基础设施&#x…

打破数据孤岛:ChatGPT如何打通金融大数据的任督二脉?

文章目录 一、引言二、ChatGPT与金融大数据分析的融合三、实践应用&#xff1a;ChatGPT在金融大数据分析中的优势与挑战四、案例分析&#xff1a;ChatGPT在金融大数据分析中的应用案例五、前景展望&#xff1a;ChatGPT在金融大数据分析领域的未来发展《AI时代Python金融大数据分…

git上传代码到github远程仓库

1、添加SSH公钥 为了把本地的仓库传到github&#xff0c;还需要配置ssh key&#xff0c;说白了就是为了把本地的代码上传到github。 1、前置准备 本地需要安装git&#xff1a;Git - Downloads。安装成功后本地右键鼠标会多出一些git选项。 2、添加SSH Key 首先在本地创建s…

DVWA靶场中的xss-反射型xss、存储型xss的low、medium、high的详细通关方法

目录 1.DVWA反射型xss &#xff08;1&#xff09;Low&#xff1a; &#xff08;2&#xff09;Medium&#xff1a; &#xff08;3&#xff09;Heigh 2.xss存储型 &#xff08;1&#xff09;Low&#xff1a; &#xff08;2&#xff09;Medium &#xff08;3&#xff09;He…

2024年【黑龙江省安全员C证】考试及黑龙江省安全员C证找解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年黑龙江省安全员C证考试为正在备考黑龙江省安全员C证操作证的学员准备的理论考试专题&#xff0c;每个月更新的黑龙江省安全员C证找解析祝您顺利通过黑龙江省安全员C证考试。 1、【多选题】下列属于编制安全检查…

Docker 从入门到实践:Docker介绍

前言 在当今的软件开发和部署领域&#xff0c;Docker已经成为了一个不可或缺的工具。Docker以其轻量级、可移植性和标准化等特点&#xff0c;使得应用程序的部署和管理变得前所未有的简单。无论您是一名开发者、系统管理员&#xff0c;还是IT架构师&#xff0c;理解并掌握Dock…

论文阅读:神经 MCMC 的深度内卷生成模型 Deep Involutive Generative Models for Neural MCMC

文章总结&#xff1a;本文提出了使用一种生成式的模型作为MCMC算法中的建议方式&#xff0c;并通过GAN进行优化。 原文&#xff1a;Deep Involutive Generative Models for Neural MCMC 我们引入了深度内卷生成模型&#xff08;一种深度生成建模的新架构&#xff09;&#xff…

PHP特性知识点扫盲 - 下篇

概述 在实际的生产环境中遇到了实际需要解决的问题&#xff0c;需要把服务部署的方式梳理出来&#xff0c;在同一个服务器中部署多个PHP环境&#xff0c;架构图如下&#xff1a; 架构方案 在工作实践中遇到的很多问题的普遍性都是相通的&#xff0c;公司运行的可新项目都是版…

第四部分 一维连续型随机变量

目录 温馨提示&#xff1a; 已知fx(X)求概率 方法&#xff1a; 例1 例2 求fx(X)中的未知数 方法&#xff1a; 例3 已知 fx(X)求F 方法&#xff1a; 例4 求F中的未知数 方法&#xff1a; 例5 已知F求f 方法&#xff1a; 例6 已知f求f 方法&#xff1a; 普通求法&#xff1a; 公…

CRM客户关系管理系统

系统开发环境以及版本 操作系统&#xff1a; Windows_7集成开发工具&#xff1a; Eclipse EE_4.7编译环境&#xff1a;JDK_1.8Web服务器&#xff1a;Tomcat_9.0数据库&#xff1a;MySQL_5.7.23 系统框架 spring框架springmvc框架mybatis框架Logback日志框架安全验证框架maven框…

26、web攻防——通用漏洞SQL注入SqlmapOracleMongodbDB2

文章目录 OracleMongoDBsqlmap SQL注入课程体系&#xff1b; 数据库注入&#xff1a;access、mysql、mssql、oracle、mongodb、postgresql等数据类型注入&#xff1a;数字型、字符型、搜索型、加密型&#xff08;base63 json&#xff09;等提交方式注入&#xff1a;get、post、…

VS2019+OpenCV4.7.0+OpenCV_contrib4.7.0+CUDA安装+配置视频硬解码保姆级别教程

在算法开发过程中&#xff0c;涉及基于opencv的rtsp流硬解码&#xff0c;这里设计结合当前所有的资料&#xff0c;实现了现有opengl相关的所有跟视频硬解码相关的功能&#xff0c;下面对opencv4.7.0的编译流程进行说明&#xff1a; 一、准备工作 下载opencv &#xff1a;open…

gem5学习(8):创建一个简单的缓存对象--Creating a simple cache object

目录 一、SimpleCache SimObject 二、Implementing the SimpleCache 1、getSlavePort() 2、handleRequest() 3、AccessEvent() 4、accessTiming() &#xff08;1&#xff09;缓存命中&#xff1a;sendResponse() &#xff08;2&#xff09;缓存未命中&#xff1a; 三、…

Easy Rules规则引擎实战

文章目录 简介pom 规则抽象规则Rule基础规则BasicRule事实类Facts&#xff1a;map条件接口动作接口 四种规则定义方式注解方式RuleBuilder 链式Mvel和Spel表达式Yml配置 常用规则类DefaultRuleSpELRule&#xff08;Spring的表达式注入&#xff09; 组合规则UnitRuleGroup 规则引…

读书笔记1-C++ Primer Plus

C是在C语言基础上开发的一种集面向对象编程&#xff08;OOP&#xff09;、通用编程和传统的过程化编程于一体的编程语言。本书是根据2003年的ISO/ANSI C标准编写的&#xff0c;通过大量短小精悍的程序详细而全面地阐述了C的基本概念和技术。 全书分17章和10个附录&#xff0c;分…

【Spring】AOP原来如此

AOP概述 什么是AOP的技术&#xff1f; 在软件业&#xff0c;AOP为Aspect Oriented Programming的缩写&#xff0c;意为&#xff1a;面向切面编程AOP是一种编程范式&#xff0c;隶属于软工范畴&#xff0c;指导开发者如何组织程序结构AOP最早由AOP联盟的组织提出的,制定了一套…

如何在VSCode搭建ESP-IDF开发ESP32

文章目录 概要安装VScode安装ESP-IDF插件使用官方例程小结 概要 ESP-IDF(Espressif IoT Development Framework) 即乐鑫物联网开发框架&#xff0c;它基于 C/C 语言提供了一个自给自足的 SDK&#xff0c;可为在 Windows、Linux 和 macOS 系统平台上开发 ESP32 应用程序提供工具…