shoot-miniprograms/src/components/RingBarChart.vue

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  total: {
    type: Number,
    default: 0,
  },
});

const barColor = (rate) => {
  if (rate >= 0.4) return "#FDC540";
  if (rate >= 0.2) return "#FED847";
  return "#ffe88f";
};

const bars = computed(() => {
  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: props.data[index] || 0,
    };
  });
  [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">
        <text v-if="b && b.rate">
          {{ total === 0 ? `${Number((b.rate * 100).toFixed(1))}%` : b.rate }}
        </text>
        <view
          :style="{
            background: barColor(total === 0 ? b.rate : b.rate / total),
            height:
              Math.max((total === 0 ? b.rate : b.rate / total) * 240) + 'rpx',
          }"
        >
        </view>
      </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 {
  min-height: 150rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.container > view {
  padding: 0 10rpx;
}
.container > view:first-child {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  min-height: 50rpx;
}
.container > view:first-child > view {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18rpx;
  color: #333;
  width: 5vw;
}
.container > view:first-child > view > view {
  width: 100%;
  transition: all 0.3s ease;
  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>