C#+layui+Echarts实现散点图

Luffy船长

于 2024-07-20 10:32:06 发布

阅读量429

点赞数 21

文章标签： layui android 前端

本文链接：https://blog.csdn.net/m0_60741007/article/details/140566827

版权

项目场景：

C#+layui+Echarts实现散点图

问题描述

项目后端数据的处理前端渲染未显示

解决方案：

这个和我上一篇帖子折线图类似也是看echarts需要什么数据后端直接处理
这是后端代码

List<TempIndoorList> list = new List<TempIndoorList>();
string sql;

// 查询小区
sql = string.Format(@"SELECT
village,
building,
unit,
room,
[TempIndoor]
FROM
[FHHistory].[dbo].[TempIn] Tl
LEFT JOIN FHJL.dbo.RoomInfo R ON Tl.RoomId= R.RoomId
WHERE
Record_Time BETWEEN '{3}'
AND DATEADD( HOUR, 1, '{3}' )
AND heatUnitID = {2}
AND village = '{0}'", villageName, buildingName, companyID, startime);

正常编写sql然后是重要的数据处理

foreach (DataRow row in dt.Tables[0].Rows)
{
bool lineflag = true;
string buildingNames = row["building"].ToString() + "号楼";
string values = row["building"].ToString() + "-"+ row["unit"].ToString() + "-" + row["room"].ToString();
string tempIndoorValue = row["TempIndoor"].ToString();

for (int i = 0; i < list.Count; i++) // 先轮询存曲线数值的数值，看是否存在该名称的数据，有就直接增加数据，没有就添加
{
if (list[i].value == buildingNames)
{
TempIndoorListPro datas = new TempIndoorListPro
{
value = values,
num = tempIndoorValue
};
list[i].children.Add(datas);
lineflag = false;
break; // 找到对应的buildingName后可以退出循环
}
}

if (lineflag) // 循环一遍没有对应的名称的数据则新增一条
{
TempIndoorList tempIndoorList = new TempIndoorList
{
value = buildingNames,
children = new List<TempIndoorListPro>()
};
TempIndoorListPro data = new TempIndoorListPro
{
value = values,
num = tempIndoorValue
};
tempIndoorList.children.Add(data);
list.Add(tempIndoorList);
}
}
return list;

这里数据处理的思路是将数据中名字相同的数据存到一个数组里首先第一个for循环为空直接存入一个数据然后跳出去将这个数据存到实体类的list集合内然后去第一个循环继续遍历名称这次第二个循环内由于第一次循环有了一条数据第二次循环第一个for循环时就有了比对如果名字相同存到一起不相同重新存
最后实现的数据格式是这样的

然后是前端代码前端有点长慢慢看大概意思就是绑定渲染的id然后遍历这个集合将数据处理好放入到x轴和y轴处即可

function selectScatterPlot(startdate) {
$.ajax({
type: "post",
url: "../AJAXHandler.ashx",
data: {
"Method": "GetTempIndoor", "villagename": villagename, "buildingname": buildingID, "UnitName": unitID, "RoomName": roomID, "startdate": startdate,
},
success: function (result) {
const myChart = echarts.init(document.getElementById('demolists'));
baseData = JSON.parse(result).data;
// 清除之前的图表数据
myChart.clear();
const markLineOpt = {
animation: false,
label: {
formatter: '基准温度：18℃',
align: 'left'

},
lineStyle: {
normal: {
type: 'solid',
color: 'blue'
}
},

tooltip: {
trigger: 'item'
//formatter: '({c})'
},
data: [
[
{
coord: [0, 18],
symbol: 'none'
},
{
coord: [69, 18],
symbol: 'none'
}
]
]
};
const dLength = baseData.map(item => item.children.length).reduce((n, m) => n + m) // x轴数据总长度，用于计算父级x轴的宽度
let xData = []
let yData = []
let series = [{
data: yData,
markLine: markLineOpt,
type: 'scatter',
label: {
show: false
},
itemStyle: {
// 动态颜色
color: function (params) {
// params是当前点的数据信息
return params.data >= 24 ? '#E10700' : params.data >= 22 ? '#F06F69' : params.data >= 20 ? '#FFB800' : params.data >= 18 ? '#2AD856' : params.data >= 16 ? '#00FFF6' : '#1E9FFF';
}
},

xAxisIndex: 0,
yAxisIndex: 0
}, {
name: '24℃以上',
type: 'scatter',
datasetIndex: 1
},
{
name: '22~24℃',
type: 'scatter',
datasetIndex: 2
},{
name: '20~22℃',
type: 'scatter',
datasetIndex: 3
},{
name: '18~20℃',
type: 'scatter',
datasetIndex: 4
},{
name: '16~18℃',
type: 'scatter',
datasetIndex: 5
},{
name: '16~18℃',
type: 'scatter',
datasetIndex: 6
},
{
name: 'line',
type: 'line',
smooth: true,
datasetIndex: 3,
symbolSize: 0.1,
symbol: 'circle',
label: { show: true, fontSize: 16 },
labelLayout: { dx: -20 },
encode: { label: 2, tooltip: 1 }
}]
let baseObj = {
data: [{
name: '',
value: 5
}],
label: {
show: true,
position: 'bottom',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#666'
}
},
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
barGap: 0,
barWidth: '',
itemStyle: {
color: '#FFFFFF',
opacity: .9,
borderWidth: 2,
borderColor: 'rgba(180, 180, 180, 0.2)'
},
animationEasing: 'bounceOut',
xAxisIndex: 1,
yAxisIndex: 1
}
baseData.forEach((item, index) => {
let pObj = JSON.parse(JSON.stringify(baseObj))
pObj.data[0].name = item.value
pObj.barWidth = item.children.length / dLength * 100 + '%'
// pObj.itemStyle.color = colorBg(index)
series.push(pObj)
console.log(series)
console.log(series)
console.log(series)
item.children.forEach(cItem => {
xData.push({
value: cItem.value,
pName: item.value
})
yData.push(cItem.num)
})
})

myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: [
{ name: '24℃以上', itemStyle: { color: '#E10700' } },
{ name: '22~24℃', itemStyle: { color: '#F06F69' } },
{ name: '20~22℃', itemStyle: { color: '#FFB800' } },
{ name: '18~20℃', itemStyle: { color: '#2AD856' } },
{ name: '16~18℃', itemStyle: { color: '#00FFF6' } },
{ name: '16℃以下', itemStyle: { color: '#1E9FFF' } },
],
bottom: 10
},

grid: [{
top: 100,
bottom: 111
},

{
top: 100,
//height: 200,
bottom: 111,
tooltip: { show: false }
}],

xAxis: [{
type: 'category',
data: xData,
gridIndex: 0,
axisLabel: {
show: false,
color: '#000000'
},
axisLine: {
lineStyle: {
color: '#000000'
}
},
axisTick: {
lineStyle: {
color: '#000000'
}
},
templet: '#colorBar',
zlevel: 2
}, {
type: 'category',
gridIndex: 1,
axisLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
zlevel: 1
}],
yAxis: [{
type: 'value',
gridIndex: 0,
axisLabel: {
color: '#000000'
},
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: '#000000'
}
},
axisTick: {
lineStyle: {
color: '#000000'
}
}
}, {
type: 'value',
gridIndex: 1,
axisLabel: { show: false },
axisLine: { show: false },
splitLine: { show: false },
axisTick: { show: false }
}],
series
})

}
});
}