93 lines
2.4 KiB
Vue
93 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { Bar } from "vue-chartjs"
|
|
import { Rank } from "~/utils/types"
|
|
|
|
const props = defineProps<{ rankData: Rank[] }>()
|
|
|
|
const data = computed(() => ({
|
|
labels: props.rankData.map((rank) => rank.user.username),
|
|
datasets: [
|
|
{
|
|
label: "已解决",
|
|
data: props.rankData.map((rank) => rank.accepted_number),
|
|
backgroundColor: [
|
|
"rgba(255, 99, 132, 0.2)",
|
|
"rgba(255, 159, 64, 0.2)",
|
|
"rgba(55, 66, 250, 0.2)",
|
|
"rgba(75, 192, 192, 0.2)",
|
|
"rgba(54, 162, 235, 0.2)",
|
|
"rgba(153, 102, 255, 0.2)",
|
|
"rgba(48, 51, 107, 0.2)",
|
|
"rgba(249, 202, 36, 0.2)",
|
|
"rgba(106, 176, 76, 0.2)",
|
|
"rgba(119, 139, 235, 0.2)",
|
|
],
|
|
borderColor: [
|
|
"rgba(255, 99, 132, 0.6)",
|
|
"rgba(255, 159, 64, 0.6)",
|
|
"rgba(55, 66, 250, 0.6)",
|
|
"rgba(75, 192, 192, 0.6)",
|
|
"rgba(54, 162, 235, 0.6)",
|
|
"rgba(153, 102, 255, 0.6)",
|
|
"rgba(48, 51, 107, 0.6)",
|
|
"rgba(249, 202, 36, 0.6)",
|
|
"rgba(106, 176, 76, 0.6)",
|
|
"rgba(119, 139, 235, 0.6)",
|
|
],
|
|
hoverBackgroundColor: [
|
|
"rgba(255, 99, 132, 0.8)",
|
|
"rgba(255, 159, 64, 0.8)",
|
|
"rgba(55, 66, 250, 0.8)",
|
|
"rgba(75, 192, 192, 0.8)",
|
|
"rgba(54, 162, 235, 0.8)",
|
|
"rgba(153, 102, 255, 0.8)",
|
|
"rgba(48, 51, 107, 0.8)",
|
|
"rgba(249, 202, 36, 0.8)",
|
|
"rgba(106, 176, 76, 0.8)",
|
|
"rgba(119, 139, 235, 0.8)",
|
|
],
|
|
hoverBorderColor: [
|
|
"rgba(255, 99, 132, 1)",
|
|
"rgba(255, 159, 64, 1)",
|
|
"rgba(55, 66, 250, 1)",
|
|
"rgba(75, 192, 192, 1)",
|
|
"rgba(54, 162, 235, 1)",
|
|
"rgba(153, 102, 255, 1)",
|
|
"rgba(48, 51, 107, 1)",
|
|
"rgba(249, 202, 36, 1)",
|
|
"rgba(106, 176, 76, 1)",
|
|
"rgba(119, 139, 235, 1)",
|
|
],
|
|
borderWidth: 2,
|
|
},
|
|
{
|
|
label: "总提交数",
|
|
data: props.rankData.map((rank) => rank.submission_number),
|
|
hidden: true,
|
|
},
|
|
],
|
|
}))
|
|
|
|
const options = {
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
title: {
|
|
text: "全校前十名的用户（不包括超管）",
|
|
display: true,
|
|
font: { size: 20 },
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="chart">
|
|
<Bar :data="data" :options="options" />
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.chart {
|
|
height: 500px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|