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

news2024/9/20 14:47:18

概要

整体架构流程

后端是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])
}

});
}
});