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

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

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

相关文章

【MySQL】主从异步复制配置

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精…

rime中州韵 easyEnglish输入法

根据前面的几个自定义配置的练手,想必大家已经熟悉了所谓的 程序文件夹&#xff0c;用户文件夹&#xff0c;custom.yam 文档这几个概念了。在接下来的自定义配置讲述中&#xff0c;将默认大家是懂得所做的修改应该在哪个文件中进行的&#xff0c;讲述的速度将会有所加快。 今天…

给idea添加右键打开功能

添加文件夹右键程序打开 开始运行regedit 找到 HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\shell 1、右键shell目录新建项Idea 2、右键Idea新建command 3、选择Idea 右侧空白出新建字符串 名字为Icon 值填入idea的运行程序地址 4、选择command 默认项填入idea的运行…

25、商城系统(七):商城项目基础功能pom.xml(重要),mybatis分页插件

截止这一章,我们就不把重心放在前端,后台的基础代码,因为后面都是业务层面的crud。 前端直接替换这两个文件夹即可,后台代码也直接复制: 一、重新更新一下所有的pom.xml 这个地方我踩了好多坑,最后得到一个完整的pom.xml,建议大家直接用我的pom.xml替换即可。 1.comm…

08-C++ STL-容器

c STL-容器 1. 引入 我们想存储多个学员的信息&#xff0c;现在学员数量不定&#xff1f; 我们可以创建一个 数组 存储学员的信息但是这个数组大小是多少呢?过大会导致空间浪费&#xff0c;小了又需要扩容对其中的数据进行操作也较为复杂每次删除数据后还要对其进行回收等操…

2023 NCTF writeup

CRYPTO Sign 直接给了fx,gx&#xff0c;等于私钥给了&#xff0c;直接套代码&#xff0c;具体可以参考&#xff1a; https://0xffff.one/d/1424 fx [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0…

【逗老师的无线电】ICOM IC-705终端模式Terminal Mode直连反射器配置-内置网关IP直连篇

各位友台大家好呀&#xff0c;逗老师最近整了一台IC-705&#xff0c;最吸引人的莫过于这玩意可以IP直连反射器。下面简单介绍一下这个功能和其配置方法 目录 一、功能二、依赖条件三、配置3.1、IC-705连接WIFI3.2、配置Terminal Mode3.2.1、点击MENU进入菜单&#xff0c;翻到第…

WEB 3D技术 three.js 雾 基础使用讲解

本文 我们说一下 雾 在three.js中有一个 Fog类 它可以创建线性雾的一个效果 她就是模仿现实世界中 雾的一个效果 你看到远处物体会组件模糊 直到完全被雾掩盖 在 three.js 中 有两种雾的形式 一种是线性的 一种是指数的 个人觉得 线性的会看着自然一些 他是 从相机位置开始 雾…

报错大全(未完待续)

springboot Could not find artifact org.springframework.boot:spring-boot-maven-plugin 报错环境&#xff1a;昨天的springboot项目的pom文件正常&#xff0c;今天再打开就会有些依赖爆红 解决步骤&#xff1a; 去maven的仓库里找你下载的依赖文件&#xff0c;路径是你的…

蓝桥杯C/C++程序设计——特别数的和

题目描述 小明对数位中含有 2、0、1、9 的数字很感兴趣&#xff08;不包括前导 0&#xff09;&#xff0c;在 1 到 40 中这样的数包括 1、2、9、10 至 32、39 和 40&#xff0c;共 28 个&#xff0c;他们的和是 574。 请问&#xff0c;在 1 到 n 中&#xff0c;所有这样的数的…

S32K312使用ITCM向FLASH代码区写入数据

使用C40_IP的系列方法向FLASH代码区写入数据时&#xff0c;程序会卡死在读取写操作的状态C40_Ip_MainInterfaceWriteStatus()这个方法中。本文主要介绍S32K312通过ITCM的方式&#xff0c;通过C40_IP的方法向FLASH代码区成功写入数据的方法和步骤。 首先&#xff0c;验证一下C4…

使用Android Studio等idea工具开发flutter应用,必备的debug调试技能,非常好用

我们程序员不论开发什么软件&#xff0c;都需要一把锋利的调试工具&#xff0c;这是必不可少的&#xff0c;不然出现问题了&#xff0c;你都不知道问题是啥&#xff0c;出现在哪&#xff0c;就更别说怎么解决了。所以我这里就介绍一下android studio开发flutter必备的调试技能&…

GRNdb:解码不同人类和小鼠条件下的基因调控网络

GRNdb&#xff1a;解码不同人类和小鼠条件下的基因调控网络 摘要introduction数据收集和处理Single-cell and bulk RNA-seq data collection and processing 单细胞和bulk RNA-seq 数据收集和处理Cell cluster identification for scRNA-seq datasets &#xff08;scRNA-seq 数…

记录汇川:MODBUS TCP-梯形图

H5U的MODBUS通信不需要编写程序&#xff0c;通过组态MODBUS通信配置表&#xff0c;实现数据通信。 Modbus-TCP 主站即Modbus-TCP客户端&#xff0c;通过Modbus-TCP配置&#xff0c;可最多支持同时与31个 Modbus-TCP服务器&#xff08;从站&#xff09;进行通讯。 …

12.30_黑马数据结构与算法笔记Java

目录 320 全排列无重复 Leetcode47 321 组合 Leetcode77 分析 322 组合 Leetcode77 实现 323 组合 Leetcode77 剪枝 324 组合之和 Leetcode 39 325 组合之和 Leetcode 40 326 组合之和 Leetcode 216 327 N皇后 Leetcode51-1 328 N皇后 Leetcode51-2 329 解数独 Leetco…

javaweb基础2.0 (持续更新中)

Day 10 : Responbody 将响应的实体类转为json发送给前端。RequestBody将request的json转为实体类给后端 修改未成功的可能是因为根据id 查询的时候&#xff0c;只查询了name字段&#xff0c;因为后面需要根据id 修改&#xff0c;所以还需查询id &#xff0c;不然前端不知道id也…

JavaWeb乱七八糟的报错及其原因和解决办法(持续更新中。。。)

报错&#xff1a; com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failureThe last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.原因&#xff1a;MySQL服务关闭…

【数据结构】树

一.二叉树的基本概念和性质&#xff1a; 1.二叉树的递归定义&#xff1a; 二叉树或为空树&#xff0c;或是由一个根结点加上两棵分别称为左子树和右子树的、互不相交的二叉树组成 2.二叉树的特点&#xff1a; &#xff08;1&#xff09;每个结点最多只有两棵子树&#xff0…

深度学习中Batch/Layer/Instance/Group normalization方法

图片中&#xff0c;N是batch size&#xff0c; c是channel。 BN&#xff1a;在每一个channel内&#xff0c;对H&#xff0c;W&#xff0c;Batch做平均LN&#xff1a;在每一个batch内&#xff0c;对H&#xff0c;W&#xff0c;Channel做平均IN&#xff1a;在每一个channel和bat…

方太厨电,在创新科技中看见烟火人间

人类的历史&#xff0c;就是一部创新的历史。科普作者马特里德利在《创新的起源&#xff1a;一部科学技术进步史》写道&#xff1a;能源是所有创新之源。 火的发明和使用&#xff0c;就是一种创新&#xff0c;人类第一次通过控制热量的转换来做功&#xff0c;依靠火来取暖和烹饪…