计分本修改

src/components/RingBarChart.vue

@@ -6,6 +6,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  total: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const barColor = (rate) => {
@@ -15,20 +19,16 @@ const barColor = (rate) => {
 };
 
 const bars = computed(() => {
-  let data = Object.values(props.data);
-  if (!data.length) data = new Array(11).fill({ ring: 0, rate: 0 });
-  const newList = data.map((item, index) => {
+  const newList = new Array(12).fill({ ring: 0, rate: 0 }).map((_, index) => {
     let ring = index;
     if (ring === 11) ring = "M";
     if (ring === 0) ring = "X";
     return {
       ring: ring,
-      rate: item,
+      rate: props.data[index] || 0,
     };
   });
-  if (newList.length >= 12) {
-    [newList[0], newList[11]] = [newList[11], newList[0]];
-  }
+  [newList[0], newList[11]] = [newList[11], newList[0]];
   return newList.reverse();
 });
 
@@ -44,12 +44,12 @@ const ringText = (ring) => {
     <view>
       <view v-for="(b, index) in bars" :key="index">
         <text v-if="b && b.rate">
-          {{ Number((b.rate * 100).toFixed(1)) }}%
+          {{ total === 0 ? `${Number((b.rate * 100).toFixed(1))}%` : b.rate }}
         </text>
         <view
           :style="{
-            background: barColor(b.rate),
-            height: b.rate * 300 + 'rpx',
+            background: barColor(total === 0 ? b.rate : b.rate / total),
+            height: (total === 0 ? b.rate : b.rate / total) * 300 + 'rpx',
           }"
         >
         </view>
@@ -64,6 +64,12 @@ const ringText = (ring) => {
 </template>
 
 <style scoped>
+.container {
+  min-height: 150rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
 .container > view {
   padding: 0 10rpx;
 }
@@ -79,10 +85,11 @@ const ringText = (ring) => {
   align-items: center;
   font-size: 18rpx;
   color: #333;
+  width: 5vw;
 }
 .container > view:first-child > view > view {
+  width: 100%;
   transition: all 0.3s ease;
-  width: 5vw;
   height: 0;
 }
 .container > view:last-child {