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

})

}

});

}

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

相关推荐
四喜花露水几秒前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy10 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
weixin_4493108423 分钟前
高效集成:聚水潭采购数据同步到MySQL
android·数据库·mysql
Zender Han38 分钟前
Flutter自定义矩形进度条实现详解
android·flutter·ios
web Rookie40 分钟前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生1 小时前
回调数据丢了?
运维·服务器·前端