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

})

}

});

}

此代码只提供大概思路仅供参考,结合实际去处理数据

相关推荐
永乐春秋33 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿35 分钟前
【前端】CSS
前端·css
Eastsea.Chen35 分钟前
MTK Android12 user版本MtkLogger
android·framework
ggdpzhk36 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端