js遍历后端返回的集合将条件相同的放入同一个数组内

项目场景：

echarts折线图需要根据条件动态展示多条不同曲线

解决方案：

后端直接将使用sql将数据查询出来返回即可,因为我这里不是Java使用的C#不是很熟练后台不好写逻辑,所以在前端js完成的

代码如下:

?function createline(villagename, buildingname, unitname, roomname, startime, stoptime) {
? ? // console.log("roomname: "+roomname)
? ? ?//$("#demo").empty();
? ? ?var myChart = echarts.init(document.getElementById('demo'), myEchartsTheme);
? ? ?myChart.clear();
? ? ?var tempindoor = [],

? ? ? ? ?tempset = [],
? ? ? ? ?tempwaterin = [],
? ? ? ? ?tempwaterout = [];
? ? ?$.ajax({
? ? ? ? ?type: 'post',
? ? ? ? ?url: '../AJAXHandler.ashx',
? ? ? ? ?data: {
? ? ? ? ? ? ?"Method": "GetData",
? ? ? ? ? ? ?"limit": 99999,
? ? ? ? ? ? ?"page": 1,
? ? ? ? ? ? ?"VillageName": villagename,
? ? ? ? ? ? ?"BuildingName": buildingname,
? ? ? ? ? ? ?"UnitName": unitname,
? ? ? ? ? ? ?"RoomName": roomname,
? ? ? ? ? ? ?"startime": startime,
? ? ? ? ? ? ?"stoptime": stoptime
? ? ? ? ?},
? ? ? ? ?success: function (res) {
? ? ? ? ? ? ?var xData = [];
? ? ? ? ? ? ?//console.log("res: "+res);
? ? ? ? ? ? ?var json = $.parseJSON(res);
? ? ? ? ? ? ?json = json.data;
? ? ? ? ? ? ?for (var i = 0; i < json.length; i++) {
? ? ? ? ? ? ? ? ?tempindoor.push(json[i].TMP_INDOOR);
? ? ? ? ? ? ? ? ?//console.log("tempindoor: "+tempindoor);
? ? ? ? ? ? ? ? ?tempset.push(json[i].TMP_SET);
? ? ? ? ? ? ? ? ?tempwaterin.push(json[i].TEMP_WATER_IN);
? ? ? ? ? ? ? ? ?tempwaterout.push(json[i].TEMP_WATER_OUT);
? ? ? ? ? ? ? ? ?xData.push(new Date(json[i].RTime).format('yyyy-MM-dd hh:mm:ss'));
? ? ? ? ? ? ?}
/**这里定义新的数组将查到的数据通过遍历存到新数组内,然后根据判断是否有相同的数据,如果没有就走if内的语句存入数组内,如果有相同的就走else内的语句,之后将数据存到map里根据条件去展示符合的数据,然后将这个map存到echarts渲染的部分的数组内 就可以做到动态展示了**/
? ? ? ? ? ? ?const result = [];
? ? ? ? ? ? ?json.forEach((item) => {
? ? ? ? ? ? ? ? ?const index = result.findIndex((r) => r.room === item.room);
? ? ? ? ? ? ? ? ?if (index === -1) {
? ? ? ? ? ? ? ? ? ? ?result.push({ room: item.room, names: [item.TMP_INDOOR] });
? ? ? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ? ? ?result[index].names.push(item.TMP_INDOOR);
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?});
? ? ? ? ? ? ?//console.log(result);
? ? ? ? ? ? ?const legend = result.map(item => item.room); // 图例
? ? ? ? ? ? ?const arr = result.map(item => ({ // 数据
? ? ? ? ? ? ? ? ?name: item.room,
? ? ? ? ? ? ? ? ?type: "line",
? ? ? ? ? ? ? ? ?data: item.names
? ? ? ? ? ? ?}));
? ? ? ? ? ? ?//手机适配
? ? ? ? ? ? ?if (window.screen.width < 1000) {
? ? ? ? ? ? ? ? ?var legends = {
? ? ? ? ? ? ? ? ? ? ?x: '100px',
? ? ? ? ? ? ? ? ? ? ?//data: ['室内温度', ?'设定温度', '进水温度', '回水温度']
? ? ? ? ? ? ? ? ? ? ?data: ['室内温度'],
? ? ? ? ? ? ? ? ? ? ?textStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ?color: '#009688'
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ?};
? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ?var legends = {
? ? ? ? ? ? ? ? ? ? ?x: 'center',
? ? ? ? ? ? ? ? ? ? ?//data: ['室内温度', ?'设定温度', '进水温度', '回水温度']
? ? ? ? ? ? ? ? ? ? ?data: ['室内温度'],
? ? ? ? ? ? ? ? ? ? ?textStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ?color: '#009688'
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ?};
? ? ? ? ? ? ?}

? ? ? ? ? ? ?var option = createoption('单位:℃', xData, legends, arr);
? ? ? ? ? ? ?myChart.setOption(option, true);
? ? ? ? ? ? ?//EChars图手机适配
? ? ? ? ? ? ?window.onresize = myChart.resize;
? ? ? ? ?},
? ? ? ? ?error: function () {
? ? ? ? ? ? ?//alert("折线图报错!");
? ? ? ? ?}
? ? ?});
? ? ?tempindoor = [], tempset = [], tempwaterin = [], tempwaterout = [];
?}