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 = [];
 }

js遍历后端返回的集合将条件相同的放入同一个数组内_第1张图片

你可能感兴趣的:(前端,javascript)