shoot-miniprograms/src/components/RingBarChart.vue

<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">
        <text v-if="b && b.rate * 100 > 0.1">
          {{ Number((b.rate * 100).toFixed(1)) }}%
        </text>
        <view
          :style="{
            background: barColor(b.rate),
            height: b.rate * 300 + '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 > 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;
}
.container > view:first-child > view > 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>