dz-app/pages/test-center/mbti/components/results/score-chart.vue

<template>
    <view class="score-chart">
        <view :class="['wrap', {'is-odd': isOdd(i)}]" v-for="(item,i) in labels">
            <view v-if="!isOdd(i)" class="label">{{ labels[i] }}</view>
            <view class="score-wrap">
                <view class="bg" :style="{width: scores[i] * ratio + 'rpx'}">
                    <text class="value">{{ scores[i] }}</text>
                </view>
            </view>
            <view v-if="isOdd(i)" class="label">{{ labels[i] }}</view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        scores: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        ratio() {
            const totalWidth = (750 - 72 - 20 - 40) / 2;
            return totalWidth / (Math.max(...this.scores) + 5);
        }
    },
    data() {
        return {
            labels: ['E', 'I', 'S', 'N', 'T', 'F', 'J', 'P']
        }
    },
    methods: {
        isOdd(i) {
            return (i + 1) % 2 === 0;
        }
    }
}
</script>

<style lang="scss" scoped>
.score-chart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 20rpx;
    row-gap: 10rpx;
}

.wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(50% - 10rpx);
}

.score-wrap {
    width: 1px;
    flex: 1;
    height: 16px;
    display: flex;
    justify-content: flex-end;
}

.label {
    width: 40rpx;
    font-weight: 600;
}


.bg {
    height: 100%;
    background-color: #F2FBD3;
    position: relative;
    display: flex;
    align-items: center;

    .value {
        color: #4A4A4A;
        font-size: 12px;
        padding-left: 4px;
        font-weight: 500;
    }
}


.is-odd {
    .score-wrap {
        justify-content: flex-start;
    }

    .bg {
        justify-content: flex-end;

        .value {
            padding-right: 4px;
        }
    }
}
</style>