添加柱状图

src/components/RingBarChart.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const barColor = (rate) => {
+  if (rate >= 0.4) return "#FDC540";
+  if (rate >= 0.2) return "#FED847";
+  return "#ffe88f";
+};
+
+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) => {
+    let ring = index;
+    if (ring === 11) ring = "M";
+    if (ring === 0) ring = "X";
+    return {
+      ring: ring,
+      rate: item,
+    };
+  });
+  if (newList.length >= 12) {
+    [newList[0], newList[11]] = [newList[11], newList[0]];
+  }
+  return newList.reverse();
+});
+
+const ringText = (ring) => {
+  if (ring === 11) return "X";
+  if (ring === 0) return "M";
+  return ring;
+};
+</script>
+
+<template>
+  <view class="container">
+    <view>
+      <view
+        v-for="(b, index) in bars"
+        :key="index"
+        :style="{
+          background: barColor(b.rate),
+          height: b.rate * 100 + '%',
+        }"
+      >
+      </view>
+    </view>
+    <view>
+      <text v-for="(b, index) in bars" :key="index">
+        {{ b && b.ring !== undefined ? b.ring : "" }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container > view {
+  padding: 0 10rpx;
+}
+.container > view:first-child {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  height: 120rpx;
+}
+.container > view:first-child > view {
+  transition: all 0.3s ease;
+  width: 5vw;
+  height: 0;
+}
+.container > view:last-child {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  border-top: 1rpx solid #333;
+  font-size: 22rpx;
+  color: #333333;
+}
+.container > view:last-child > text {
+  text-align: center;
+}
+</style>