как загрузить первый график в angular echart

Question

как загрузить первый график в echarts?

вот код: Машинопись

const _this = this;
        const list: any = [];

        params.forEach((param: any) => {
          const url = encodeURIComponent(param.sensor);

          list.push(`/conditions?length=${this.length}&sensor=${url}`);
        });

        const promises = list.map(
          (url: any) =>
            new Promise(resolve => {
              this.global.getData(url).pipe(take(1)).subscribe((res) => {
                resolve(res);
              }, (err: Error) => {
                return reject(err);
              });
            })
        );

        Promise.all(promises).then(results => {
          const dataRoom: any = [];

          results.map((result) => {
            const date: any = [], temperature: any = [], humidity: any = [], newRoomData: any = [];

            const param = result['data'];
            const roomData = orderBy(param, ['date'], ['asc']);
            const room = roomData.slice(-1)[0];
            const timeEnd = room.date.slice(0, 19);
            const timeStart = subHours(timeEnd, 7);
            const dataHour = roomData.filter((data: TemplogRecord) => {
              return !isBefore(data.date, timeStart) && !isAfter(data.date, timeEnd);
            });

            const hash = Object.create(null);

            dataHour.forEach((data: any) => {
              const key = data.date.slice(0, 13);

              if (!hash[key]) {
                hash[key] = {
                  sensor: data.sensor, temperature: data.temperature, humidity: data.humidity, date: key + ':00:00'
                };
                newRoomData.push(hash[key]);
              }
            });

            for (let x = 0; x < newRoomData.length; x++) {
              temperature.push(newRoomData[x].temperature);
              humidity.push(newRoomData[x].humidity);
              date.push(newRoomData[x].date);
            }

            dataRoom.push({
              date: date,
              humidity: humidity,
              temperature: temperature
            });
          });

          dataRoom.forEach((param: any, index: number) => {
            const option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  animation: false
                },
                backgroundColor: 'rgba(245, 245, 245, 0.8)',
                borderWidth: 1,
                borderColor: '#ccc',
                padding: 10,
                textStyle: {
                  color: '#000'
                },
                formatter: function (prm: any) {
                  let rec = prm[0].name.slice(0, 10) + '<br/>' + prm[0].name.slice(11, 19) + '<br/>';

                  for (let x = 0; x < prm.length; x++) {
                    if (prm[x].axisIndex !== 1) {
                      rec += prm[x].marker + ' ' + prm[x].seriesName + ': '
                        + prm[x].data + _this.units['Celcius'] + '<br/>';
                    } else {
                      rec += prm[x].marker + ' ' + prm[x].seriesName + ': '
                        + prm[x].data + '%' + '<br/>';
                    }
                  }
                  return rec;
                }
              },
              ...this.echart.roomChart,
              dataZoom: [{
                type: 'inside',
                show: false,
                bottom: 10,
                width: '84%',
                xAxisIndex: [0, 1],
                zoomOnMouseWheel: false,
              },
              {
                type: 'slider',
                bottom: 10,
                show: false,
                width: '84%',
                xAxisIndex: [0, 1],
                zoomLock: false,
              }],
              xAxis: [{
                type: 'category',
                boundaryGap: false,
                scale: true,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                data: param.date.map((str: any) => {
                  return format(str, 'YYYY-MM-DD hh:mm a');
                }),
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(182, 202, 227)'
                  }
                },
                axisLabel: {
                  show: true,
                  interval: 0,
                  rotate: 90,
                  formatter: ((data: any) => {
                    return (data).slice(11, 19);
                  })
                }
              },
              {
                gridIndex: 1,
                show: false,
                scale: true,
                type: 'category',
                boundaryGap: false,
                axisLine: {
                  show: false
                },
                data: param.date,
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: true
                }
              }],
              series: [
                {
                  name: 'Temerature',
                  data: param.temperature,
                  type: 'line',
                  itemStyle: {
                    color: 'rgba(0, 101, 144, 1)'
                  },
                  areaStyle: {
                    color: 'rgba(0, 101, 144, 1)'
                  },
                  markPoint: {
                    type: 'Pin',
                    data: [
                      {
                        type: 'max',
                        itemStyle: {
                          color: 'rgba(0, 101, 144)'
                        }
                      },
                      {
                        type: 'min',
                        itemStyle: {
                          color: 'rgb(110, 151, 204)'
                        }
                      }
                    ]
                  },
                  smooth: true
                },
                {
                  name: 'Humidity',
                  data: param.humidity,
                  type: 'line',
                  itemStyle: {
                    color: 'rgba(132, 219, 255, 1)'
                  },
                  areaStyle: {
                    color: 'rgba(132, 219, 255, 1)'
                  },
                  markPoint: {
                    type: 'Pin',
                    data: [
                      {
                        type: 'max',
                        itemStyle: {
                          color: 'rgba(132, 219, 255)'
                        }
                      },
                      {
                        type: 'min',
                        itemStyle: {
                          color: 'rgba(194, 237, 255)'
                        }
                      }
                    ]
                  },
                  smooth: true,
                  xAxisIndex: 1,
                  yAxisIndex: 1
                }
              ]
            };
            this.chartOption.push(option);
            this.tempThermometer.value[index].spinning = false;
          });
        });

HTML

      <div *ngIf="tempThermometer | async as temp">

                <*ngFor="let data of temp; let i = index;">
        <div echarts [options]="chartOption[i]" [autoResize]="true" style="height: 210px;"></div>
</div>
    </div>

проблема здесь в том, что он будет ждать окончания sh до конца массива. тогда он загрузит их все.

что я хочу сделать здесь, это загрузить первую диаграмму элементов, затем вторую диаграмму элементов до конца массива. он будет загружаться один за другим, вместо этого он будет ждать, а затем загрузить все из них.