完善页面

src/components/RingBarChart.vue

@@ -42,14 +42,15 @@ const ringText = (ring) => {
 <template>
   <view class="container">
     <view>
-      <view
-        v-for="(b, index) in bars"
-        :key="index"
-        :style="{
-          background: barColor(b.rate),
-          height: b.rate * 120 + 'rpx',
-        }"
-      >
+      <view v-for="(b, index) in bars" :key="index">
+        <text v-if="b && b.rate > 0.1">{{ Number(b.rate.toFixed(1)) }}%</text>
+        <view
+          :style="{
+            background: barColor(b.rate),
+            height: b.rate * 120 + 'rpx',
+          }"
+        >
+        </view>
       </view>
     </view>
     <view>
@@ -71,6 +72,13 @@ const ringText = (ring) => {
   min-height: 50rpx;
 }
 .container > view:first-child > view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 18rpx;
+  color: #333;
+}
+.container > view:first-child > view > view {
   transition: all 0.3s ease;
   width: 5vw;
   height: 0;