C#+layui+echarts实现动态生成折线图

概要

C#+layui+echarts实现动态生成折线图

整体架构流程

后端是c#语言编写的业务流程,前端是layui和echarts

技术细节

1.先看echarts折线图需要什么样子的数据,在想后端怎么处理

2.后端代码
 

  List<ValveTempData> list = new List<ValveTempData>();
  string sql;
  //查询小区
  sql = string.Format(@"SELECT 
                                  c.village,
                                  a.AvgTemp,
                                  a.Record_Time 
                              FROM
                                 FHJL.dbo.Village AS a
                                  LEFT JOIN ICHSLocal.dbo.VillageAddress AS b ON a.villageID = b.foreignKey
                                  left join ICHSLocal.dbo.Addres c ON b.foreignKey=c.ID
                              WHERE
                                  b.heatKey = '{2}'", villageName, buildingName, CompanyID);

正常写sql最主要的是数据处理

 avgLine avgLine = new avgLine();
 List<string> xTime = new List<string>();
 List<avgTempLines> lines = new List<avgTempLines>();
 if (dt == null) return null;
 foreach (DataRow row in dt.Tables[0].Rows)
 {
     //ValveTempData data = new ValveTempData();
     //data.TMP_INDOOR = row["AvgTemp"] == DBNull.Value ? 0.0 : Convert.ToDouble(row["AvgTemp"]);                   
     //data.RTime = row["Record_Time"] == DBNull.Value ? "" : row["Record_Time"].ToString();
     //data.village = row["village"].ToString();

     if (xTime.IndexOf(row["Record_Time"].ToString()) == -1)
     {
         xTime.Add(row["Record_Time"].ToString());//所有新增的时间的时间转换为x轴的时间数据
     }
     bool lineflag = true;
     for (int i = 0; i < lines.Count; i++)//先轮询存曲线数值的数值,看是否存在该名称的数据,有就直接增加数据,没有就添加
     {
         if (lines[i].name == row["village"].ToString())
         {
             string[] ldata = new string[2] { row["Record_Time"].ToString(), row["AvgTemp"].ToString() };
             lines[i].ls.Add(ldata);
             lineflag = false;
         }
     }
     if (lineflag)//循环一遍没有对应的名称的数据则新增一条
     {
         avgTempLines avgTemp = new avgTempLines();
         avgTemp.name = row["village"].ToString();
         avgTemp.ls = new List<string[]>();
         string[] ldata = new string[2] { row["Record_Time"].ToString(), row["AvgTemp"].ToString() };
         avgTemp.ls.Add(ldata);
         lines.Add(avgTemp);
     }
     //list.Add(data);
 }
 avgLine.xData = xTime.ToArray();
 //所有查到的数据轮询完毕后,将过度用的list转为二维数组
 for (int i = 0; i < lines.Count; i++)
 {
     lines[i].data = lines[i].ls.ToArray();
 }
 avgLine.avgTemps = lines;
 return avgLine;

数据处理后存入的实体类的类型也有讲究存入一个name和一个list集合 list集合内存的是name和二维数组 还有一个中间过度集合 因为我需要在x轴展示名称和温度 需要用到二维数组

再就是前端了

   function FanCoilList(CompanyID, villageID, buildingID, unitID, roomID, parameter, startdate, enddate, todayName, flagData) {
       var TempIndoor = [];
       var Humidity = [];
       var Record_Time = [];
       console.log(villageID)
       if (villagename == '' || villagename == "请选择小区") {
           villageID == '';
       }
       $.ajax({
           type: "post",
           url: "../AJAXHandler.ashx",
           data: {
               "Method": "GetTemp", "villagename": villageID, "buildingname": buildingID, "UnitName": unitID, "RoomName": roomID, "startdate": startdate, "enddate": enddate, "todayName": todayName, "flagData": flagData
           },
           success: function (result) {
               // 初始化 ECharts 实例
               var myChart = echarts.init(document.getElementById('demolist'));
               // 清除之前的图表数据
               myChart.clear();
               result = JSON.parse(result).data;
               console.log(result);
               var seriesDatas = [];
               for (var i = 0; i < result.avgTemps.length; i++) {
                   var lineDatas = {
                       name: result.avgTemps[i].name,
                       data: result.avgTemps[i].data,
                       type: 'line',
                       // 设置数据点标记样式,这里使用默认的圆形标记
                       symbol: 'circle', // 或者 'emptyCircle',根据你的需要选择
                       // 设置标记的大小
                       symbolSize: 4, // 根据需要调整大小
                       // 设置折线弧度
                       smooth: 0.5,
                       // 允许通过图例控制显示隐藏
                       legendHoverLink: true
                   };
                   seriesDatas.push(lineDatas);
               }
               // 在 legend 组件中添加系列名称
               var legendData = seriesDatas.map(function (item) {
                   return item.name;
               });
               var option = {
                   tooltip: {
                       trigger: 'axis'
                   },
                   legend: {
                       data: legendData,
                       // 设置为 'multiple' 可以同时选择多个系列
                       selectedMode: 'multiple'
                   },
                   xAxis: {
                       type: 'category',
                       data: result.xData
                   },
                   yAxis: {
                       type: 'value',
                       name: '室内温度(℃)',
                       min: 14
                   },
                   series: seriesDatas,
                   dataZoom: [{
                       type: 'slider',
                       show: true,
                       xAxisIndex: [0],
                       start: 0,
                       end: 100
                   }]
               };
               // 使用配置项和数据显示图表
               myChart.setOption(option);
               myChart.on('click', function (params) {
                   console.log(params)
                   if (villagename == '' || villagename == "请选择小区") {
                       layer.msg("请选择小区!")
                       result;
                   } else {
                       selectScatterPlot(params.data[0])
                   }

               });
           }
       });

小结

以上就是我实现的希望可以提供参考价值

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

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

相关文章

Docker容器逃逸漏洞-CVE-2024-21626

Snyk 在 Docker 引擎以及其他容器化技术(例如 Kubernetes)使用的 runc <=1.1.11 的所有版本中发现了一个漏洞。利用此问题可能会导致容器逃逸到底层主机操作系统,无论是通过执行恶意映像还是使用恶意 Dockerfile 或上游映像构建映像(即使用时FROM) CVE-2024-21626原理…

生成式人工智能之路,从马尔可夫链到生成对抗网络

人工智能&#xff08;Artificial intelligence&#xff0c;AI&#xff09;技术在过去几年中取得了显著进展&#xff0c;其中生成式AI&#xff08;Generative AI&#xff09;因其强大的内容生成能力而备受关注。生成式AI可以创建新的文本、图像、音频、视频、代码以及其他形式的…

SSRF学习笔记

1.NAT学习 Nat&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;是 一种网络通信技术主要用于将私有网络中的内部IP地址转换成公共网络中的公共IP地址&#xff0c;以实现局域网内部设备访问互联网的功能。具体来说&#xff0c;Nat有以下几个主要…

Matlab画不同指标的对比图

目录 一、指标名字可修改 二、模型名字可修改 三、输入数据可修改 软件用的是Matlab R2024a。 clear,clc,close all figure1figure(1); % set(figure1,Position,[300,100,800,600],Color,[1 1 1]) axes1 axes(Parent,figure1);%% Initialize data points 一、指标名字可修…

MongoDB 学习笔记

一、简介 1、MongoDB 是什么 MongoDB 是一个基于分布式文件存储的数据库&#xff0c;官方地址 https://www.mongodb.com/ 2、数据看是什么 数据库&#xff08;DataBase&#xff09;是按照数据结构来组织、存储和管理数据的应用程序。 3、数据库的作用 主要作用是 管理数据…

mybatis中的缓存(一级缓存、二级缓存)

文章目录 前言一、MyBatis 缓存概述二、一级缓存1_初识一级缓存2_一级缓存命中原则1_StatementId相同2_查询参数相同3_分页参数相同4_sql 语句5_环境 3_一级缓存的生命周期1_缓存的产生2_缓存的销毁3_网传的一些谣言 4_一级缓存核心源码5_总结 三、二级缓存1_开启二级缓存2_二级…

基于Hutool实现自定义模板引擎,实现json个性化模板引擎转换

文章目录 前言编写引擎类&#xff1a;JsonTemplateEngine编写模板类&#xff1a;CustomTemplate编写测试代码测试json文件测试类 前言 由于百度搜索json模板引擎&#xff0c;推荐的都是一些freemarker之类的&#xff0c;需要引入其他的依赖&#xff0c;而且在编写json模板的时…

学习在测试时学习(Learning at Test Time)_ 具有表达性隐藏状态的循环神经网络(RNNs)

摘要 https://arxiv.org/pdf/2407.04620 自注意力机制在长文本语境中表现良好&#xff0c;但其复杂度为二次方。现有的循环神经网络&#xff08;RNN&#xff09;层具有线性复杂度&#xff0c;但其在长文本语境中的性能受到隐藏状态表达能力的限制。我们提出了一种新的序列建模…

LabVIEW多线圈电磁式振动发电机测试

开发了一种基于LabVIEW设计的多线圈电磁式振动发电机测试系统。系统通过高效的数据采集、波峰检测及相位差计算&#xff0c;优化了传统振动发电机的测试流程&#xff0c;提升了电压波形分析的精度和效率&#xff0c;具有较好的应用前景和推广价值。 项目背景 随着可再生能源技…

遇到not allow unquoted fieldName怎么办

前言 Exception in thread "main" com.alibaba.fastjson2.JSONException: not allow unquoted fieldName, offset 2, character , line 1, column 3, fastjson-version 2.0.25 { "data":null, "code":200, "msg":"成功"…

LIS系统源码,实验室管理信息系统LIS,.Net C#语言开发,支持DB2,Oracle,MS SQLServer等主流数据库

实验室管理信息系统LIS源码&#xff0c;采用.Net C#语言开发&#xff0c;C/S架构。支持DB2&#xff0c;Oracle&#xff0c;MS SQLServer等主流数据库。&#xff08;LIS系统全套商业源码&#xff0c;自主版权&#xff0c;多家大型综合医院应用案例&#xff0c;适合二次开发&…

Golang | Leetcode Golang题解之第279题完全平方数

题目&#xff1a; 题解&#xff1a; // 判断是否为完全平方数 func isPerfectSquare(x int) bool {y : int(math.Sqrt(float64(x)))return y*y x }// 判断是否能表示为 4^k*(8m7) func checkAnswer4(x int) bool {for x%4 0 {x / 4}return x%8 7 }func numSquares(n int) i…

四、GD32 MCU 常见外设介绍 (6) ADC 模块介绍

6.1.ADC 基础知识 12 位逐次逼近式模数转换器模块&#xff08;ADC&#xff09;&#xff0c;可以采样来自于外部输入通道、内部输入通道的模拟信号&#xff0c;采样转换后&#xff0c;转换结果可以按照最低有效位对齐或最高有效位对齐的方式保存在相应的数据寄存器中。 6.2.GD…

elasticsearch-7.3.1安装注意事项

elasticsearch-7.3.1安装注意事项 一、背景二、步骤1、查看原ES版本2、新环境服务器2.1、是否有elasticsearch2.2、安装elasticsearch2.3、配置参数2.4、启动elasticsearch2.5、设置密码 三、报错-问题总结1、jdk不适用2、bootstrap checks failed3、Address already in use4、…

vue3前端开发-小兔鲜项目-图片切换效果和动态class

vue3前端开发-小兔鲜项目-图片切换效果和动态class!这次实现的效果是&#xff0c;图片预览效果&#xff0c;根据小图片&#xff0c;来实时改变大图&#xff08;预览&#xff09;的效果。同时让动态的特征class也跟着显示出来。 <script setup> import {ref} from vue // …

Linux 各目录

Linux 是一个非常严谨的操作系统&#xff0c;每个目录都有自己的作用&#xff0c;这些作用是固定的&#xff0c;没有特殊情况&#xff0c;应严格执行&#xff1b; Linux 中所有东西以文件形式存储和管理&#xff0c;命令也不例外&#xff1b; 以下四个 bin 是二进制文件&…

freesql简单使用操作mysql数据库

参考&#xff1a;freesql中文官网指南 | FreeSql 官方文档 这两天准备做一个测试程序&#xff0c;往一个系统的数据表插入一批模拟设备数据&#xff0c;然后还要模拟设备终端发送数据包&#xff0c;看看系统的承压能力。 因为系统使用的第三方框架中用到了freesql&#xff0c…

数据库的事务隔离级别有哪些?

并行事务会引发什么问题&#xff1f; 同时处理多个事务的时候&#xff0c;就可能出现脏读&#xff08;dirty read&#xff09;、不可重复读&#xff08;non-repeatable read&#xff09;、幻读&#xff08;phantom read&#xff09;的问题。脏读: 如果一个事务「读到」了另一个…

NSSCTF-2021年SWPU联合新生赛

[SWPUCTF 2021 新生赛]finalrce 这道题目考察tee命令和转义符\ 这题主要是&#xff0c;遇到一种新的符号&#xff0c;"\"—转义符。我理解的作用就是在一些控制字符被过滤的时候&#xff0c;可以用转义符&#xff0c;让控制符失去原本的含义&#xff0c;变为字面量…

react中配置路径别名@

1.说明 在react项目中想要使用代替“src/”需要在项目根目录下配置两个文件&#xff0c;craco.config.js和sconfig.json&#xff1b; craco.config.js配置文件是用于项目解读为“src/” jsconfig.json配置文件是用于vsCode在编辑过程是输入后可以将src下的文件目录进行自动联…