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.mfbz.cn/a/283567.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微服务篇之Nacos快速入门

Nacos 简介 Nacos 起源 Nacos 起源于阿里巴巴 2008 年的五彩石项目&#xff08;完成微服务拆分和业务中台建设&#xff09;&#xff0c;经历了阿里十年双十⼀的洪峰流量的考验&#xff0c;沉淀了简单易用、稳定可靠、性能卓越等核心特性。随着云计算的兴起和受到开源软件行业…

ThinkPad产品如何升级BIOS程序

操作步骤: 重要提示&#xff1a; 更新BIOS存在风险&#xff01;如果您的电脑在此过程中出现死机&#xff0c;系统崩溃或断电&#xff0c;则BIOS或UEFI固件程序可能会损坏&#xff0c;这将使您的电脑无法启动。 由于BIOS的版本或者在升级过程中出错&#xff0c;可能会造成不可…

009、引用

1. 引用与借用 下面的示例重新定义了一个新的 calculate_length 函数。与之前不同的是&#xff0c;新的函数签名使用了 String 的引用作为参数而没有直接转移值的所有权&#xff1a; fn main() { let s1 String::from("hello"); let len calculate_length(&s1…

气象预报与计算机技术:深度融合与未来展望

气象预报与计算机技术:深度融合与未来展望 一、引言 气象预报,作为人类对自然界气象变化的探索与预测,随着时间的推移和技术的进步,已经逐渐从单纯的经验模式转变为依赖于精密的仪器与强大的计算机技术的科学预测。在本文中,我们将深入探讨气象预报与计算机技术之间的密…

[2024区块链开发入门指引] - 比特币与区块链诞生

一份为小白用户准备的免费区块链基础教程 工欲善其事,必先利其器 Web3开发中&#xff0c;各种工具、教程、社区、语言框架.。。。 种类繁多&#xff0c;是否有一个包罗万象的工具专注与Web3开发和相关资讯能毕其功于一役&#xff1f; 参见另一篇博文&#x1f449; 2024最全面…

数据结构:堆的三部曲 (一)堆的实现

堆的实现 1.堆的结构1.1堆的定义理解 2.堆的实现&#xff08;以小根堆为例&#xff09;2.1 堆结构体的定义2.2 堆的插入交换函数向上调整算法插入函数的代码 2.3 堆的删除向下调整算法&#xff1a;删除函数的代码&#xff1a; 2.4其他操作 3.测试以及完整源代码实现3.1测试代码…

山西电力市场日前价格预测【2024-01-02】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2024-01-02&#xff09;山西电力市场全天平均日前电价为92.93元/MWh。其中&#xff0c;最高日前电价为275.90元/MWh&#xff0c;预计出现在18:00。最低日前电价为0.00元/MWh&#xff0c;预计出现…

【数据结构与算法】第1章绪论(头歌习题)【合集】

文章目录 第1关&#xff1a;求和任务描述编程要求代码 第2关&#xff1a;求倒数和的倒数任务描述编程要求完整代码 第3关&#xff1a;回文数任务描述编程要求完整代码 第4关&#xff1a;求素数个数任务描述编程要求完整代码 第5关&#xff1a;最大因子任务描述编程要求完整代码…

第6课 用window API捕获麦克风数据并加入队列备用

今天是2024年1月1日&#xff0c;新年的第一缕阳光已经普照大地&#xff0c;祝愿看到这篇文章的所有程序员或程序爱好者都能在新的一年里持之以恒&#xff0c;事业有成。 今天也是我加入CSDN的第4100天&#xff0c;但回过头看一看&#xff0c;这么长的时间也没有在CSDN写下几篇…

2023-刻苦自励,2024-奋起直追!

点击上方“嵌入式应用研究院”&#xff0c;选择“置顶/星标公众号” 干货福利&#xff0c;第一时间送达&#xff01; 来源 | 嵌入式应用研究院 整理&排版 | 嵌入式应用研究院 一、引言 时光如影&#xff0c;岁月如梭。转眼之间&#xff0c;2023年已经过去&#xff0c;在这一…

拒绝采样(算法)总结

先说说什么是拒绝采样算法&#xff1a;就类似于数学上的求阴影面积的方法&#xff0c;直接求求不出来&#xff0c;就用大面积 - 小面积 阴影面积的办法。 所谓拒绝 和 采样 &#xff1a;就像是撒豆子计个数&#xff0c;计算概率问题一样&#xff0c;大桶里面套小桶&#xff0c…

[C#]OpenCvSharp结合yolov8-face实现L2CS-Net眼睛注视方向估计或者人脸朝向估计

源码地址&#xff1a; github地址&#xff1a;https://github.com/Ahmednull/L2CS-Net L2CS-Net介绍&#xff1a; 眼睛注视&#xff08;eye gaze&#xff09; 是在各种应用中使用的基本线索之一。 它表示用户在人机交互和开放对话系统中的参与程度。此外&#xff0c;它还被用…

Docker 从入门到实践:Docker介绍

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

【数据结构】栈和队列(队列的基本操作和基础知识)

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;《数据结构》https://blog.csdn.net/qinjh_/category_12536791.html?spm1001.2014.3001.5482 ​ 目录 前言 队列 队列的概念和结构 队列的…

域名转移:将腾讯云转移至阿里云

当时注册域名时&#xff0c;腾讯域云相对便宜&#xff0c;但目前阿里云在业界更加成熟&#xff0c;因此将自己申请的域名由阿里云转移至阿里云&#xff0c;并记录转移过程。 一、域名转出 进入腾讯云&#xff0c;登陆后选择控制台&#xff0c;选择我的资源–域名注册–全部域名…

【华为机试】2023年真题B卷(python)-滑动窗口最大值

一、题目 题目描述&#xff1a; 有一个N个整数的数组&#xff0c;和一个长度为M的窗口&#xff0c;窗口从数组内的第一个数开始滑动直到窗口不能滑动为止&#xff0c; 每次窗口滑动产生一个窗口和&#xff08;窗口内所有数的和&#xff09;&#xff0c;求窗口滑动产生的所有窗口…

LTPI协议的理解——1、LTPI协议的定义和结构

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 LTPI协议的理解——1、LTPI协议的定义和结构 定义DC-SCM 2.0 LTPI 结构GPIO通道I2C/SMBus通道Uart通道OEM通道数据通道 总结 定义 LTPI (LVDS Tunneling Protocol & Int…

单片机数据发送程序

#include<reg51.h> //包含单片机寄存器的头文件 /***************************************************** 函数功能&#xff1a;向PC发送一个字节数据 ***************************************************/ void Send(unsigned char dat) { SBUFdat; whil…

【ESP-NOW with ESP32:从多个开发板接收数据(多对一)】

【ESP-NOW with ESP32&#xff1a;从多个开发板接收数据&#xff08;多对一&#xff09;】 1. 项目概况2. 先决条件2.1 环境配置2.2 所需零件 3. 获取接收板 MAC 地址4. ESP32 发送码 &#xff08;ESP-NOW&#xff09;4.1 代码的工作原理4.2 setup&#xff08;&#xff09;4.3 …

异步处理方案

目录 1.通过promise的链式调用将异步方法变为同步执行 2.使用async及await 3.回调函数方式 4.三种方式对比 5.async及await使用的注意点 1.通过promise的链式调用将异步方法变为同步执行 function get1(){return new Promise((resolve,reject) >{console.log(执行get1接…
最新文章