提交代码

src/app/routes/data-v/s1/s1.component.html

@@ -77,28 +77,17 @@
   <div nz-col nzSpan="8">
     <data-v-card title="化验结果" [showSetting]="true" [optionsList]="optionsCheckList"
       (onCheckedItemsChange)="handleCheckedItems($event)">
-      <nz-list nzGrid>
-        <div nz-row [nzGutter]="16">
-          <!-- 使用 *ngFor 来遍历 optionsCheckList -->
-          <div nz-col *ngFor="let item of optionsCheckList; let i = index" nzSpan="12">
-            <!-- 使用 *ngIf 检查当前项的 checked 属性 -->
-            <nz-list-item *ngIf="item.checked">
-              <div class="centered-element">
-                <!-- 只有当 checked 为 true 时才渲染 app-chart-component -->
-                <app-chart-component *ngIf="item.checked" [options]="item.options" style="width:auto; height: 11rem;">
-                </app-chart-component>
-              </div>
-            </nz-list-item>
-          </div>
+      <div class="scrollable-container">
+        @for (item of optionsCheckList; track item) {
+        <div *ngIf="item.checked" class="centered-element">
+          <app-chart-component [options]="item.options" style="width: 80%; height: 16rem;" />
         </div>
-      </nz-list>
-
-
+        }
+      </div>
       <div nz-row style="justify-content: center;align-items: center;margin-top: 0.4rem;">
         <div nz-col nzSpan="12">
           <div class="centered-element">
             <app-chart-component [options]="chart_options3" style="width: 26rem; height: 11rem;" />
-
           </div>
         </div>
         <div nz-col nzSpan="12">

src/app/routes/data-v/s1/s1.component.less

@@ -28,6 +28,15 @@
     height: 5rem;
 }
 
+.scrollable-container {
+    overflow-y: auto;
+    /* 水平滚动关闭，垂直滚动开启 */
+    width: 100%;
+    /* 或者指定一个固定的宽度 */
+    height: 20rem;
+    /* 根据需求设置容器的高度以触发滚动条 */
+}
+
 .centered-element {
     display: flex;
     align-items: center;