optmization

src/components/capsuleChart/index.vue

@@ -15,11 +15,15 @@
         </div>
         <div class="unit-label">
           <div class="unit-container">
-            <div v-for="unit in unitData" :key="unit">{{ unit }}</div>
+            <div v-for="(unit, index) in unitData" :key="unit + index">{{ unit }}</div>
           </div>
           <div class="unit-text">单位</div>
         </div>
       </div>
+
+      <div class="for-solt">
+        <slot></slot>
+      </div>
     </template>
   </div>
 </template>
@@ -56,7 +60,7 @@ export default {
 
       const maxValue = Math.max(...capsuleData)
 
-      this.capsuleData = capsuleData.map(v => v / maxValue)
+      this.capsuleData = capsuleData.map(v => maxValue ? v / maxValue : 0)
 
       const oneSixth = maxValue / 5
 
@@ -134,5 +138,13 @@ export default {
     flex-direction: row;
     justify-content: space-between;
   }
+
+  .for-solt {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+  }
 }
 </style>