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,一经查实,立即删除!

相关文章

学懂C语言(十九):C语言指针详解

一、什么是指针&#xff1f; 指针是一个变量&#xff0c;其存储的是另一个变量的内存地址。在计算机内存中&#xff0c;每个存储单元都有一个唯一的地址&#xff0c;指针就是用来存放这些地址的。因此&#xff0c;通过指针&#xff0c;你可以间接访问和修改内存中的数据。就像其…

Linux提供的定时器

定时器在许多场景中非常有用&#xff0c;尤其是在需要精确定时或定时执行某些任务的情况下。而Linux专门为定时器提供了一套定时器接口。 timerfd_creat timerfd_create是 Linux 中用于创建定时器文件描述符的函数。这个功能主要是用来在指定的时间后或定时间隔内触发事件&am…

TS的访问修饰符有哪些

如果你和我一样是从强类型语言(如C、C#、Java)转过来的&#xff0c;相信你会一眼就知道是什么 public&#xff08;默认&#xff09; - 全部可访问 protected - 自己和派生类可访问 private - 只有自己可访问 废话不多说&#xff0c;上代码&#xff1a; class Person {publ…

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有以下几个主要…

Python应用—实现和改良word邮件合并功能

1.实现目的 邮件合并也有其缺陷,那就是每次合并数据都需操作插入合并域,如果经常需要根据数据生成固定模板word文件,那么就显得很麻烦 显然利用程序固定数据替换模式就极为方便,需要生成文件时可以一键操作 2.代码实现 import os.path import xlrd from mailmerge impo…

Python 提示框

安装&#xff1a; pip install tk0.1.0第三方库地址&#xff1a; https://pypi.org/project/tk/ # 方法一 # -*- coding: UTF-8 -*-from tkinter import messagebox from tkinter import Tkroot Tk() root.withdraw() messagebox.showinfo("提示框", "这是一个…

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_二级…

利用深度学习模型BiLSTM进行数据预测和分析

1. 导入必要的库和模块&#xff1a; python import pandas as pd from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler from sklearn.metrics import mean_squared_error, mean_absolute_error, r2_score import matplot…

如何选择适合的数据仓库ETL工具

在数据仓库的建设中&#xff0c;选择合适的ETL&#xff08;数据提取、转换和加载&#xff09;工具至关重要。本文将以两款常见的ETL工具——Informatica和Kettle为例&#xff0c;分享如何选择适合的ETL工具来支持数据仓库的构建和管理。通过对比它们的特点和应用场景&#xff0…

Pytorch 9

softmax多分类问题 import torch from torchvision import datasets from torch.utils.data import DataLoader import torch.nn.functional as F# 激活函数 import torch.optim as optim # optim.SGD (随机梯度下降)&#xff1a;最基础的优化算法&#xff0c;通过沿着梯度的反…

初等数论精解【5】

文章目录 不定方程基础理论不定方程例子 1: 线性不定方程例子 2: 整数解的不定方程例子 3: 含有多个未知数的不定方程总结 参考文献 不定方程 基础 一元不定方程 1. a 1 x a 0 0 x − a 0 a 1 &#xff0c;但是不能保证有整数解 2. a n x n a n − 1 x n − 1 . . . a…

Springboot 启动时Bean的创建与注入(二)-面试热点-springboot源码解读-xunznux

Springboot 启动时Bean的创建与注入&#xff0c;以及对应的源码解读 文章目录 Springboot 启动时Bean的创建与注入&#xff0c;以及对应的源码解读11、getBean:200, AbstractBeanFactory (org.springframework.beans.factory.support)12、doGetBean:335, AbstractBeanFactory (…

Vue系列面试题

大家好&#xff0c;我是有用就扩散&#xff0c;有用就点赞。 1.Vue中组件间有哪些通信方式&#xff1f; 父子组件通信&#xff1a; &#xff08;1&#xff09;props | $emit &#xff08;接收父组件数据 | 传数据给父组件&#xff09; &#xff08;2&#xff09;ref | $refs&a…

基于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;具有较好的应用前景和推广价值。 项目背景 随着可再生能源技…