C#+layui+Echarts实现散点图
项目场景：
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
})
}
});
}
此代码只提供大概思路仅供参考,结合实际去处理数据
原文地址：https://blog.csdn.net/m0_60741007/article/details/140566827
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！