130 lines
2.8 KiB
Vue
130 lines
2.8 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
import type * as API from '@/service/types'
|
|||
|
|
import UniEcharts from 'uni-echarts'
|
|||
|
|
import { computed } from 'vue'
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
data: API.StudentScoreStat[]
|
|||
|
|
loading?: boolean
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
viewStudents: [score: number]
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
// 图表配置（横向柱状图）
|
|||
|
|
const chartOption = computed(() => {
|
|||
|
|
if (!props.data || props.data.length === 0) {
|
|||
|
|
return {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 按分数排序
|
|||
|
|
const sortedData = [...props.data].sort((a, b) => (a.score || 0) - (b.score || 0))
|
|||
|
|
|
|||
|
|
const categories = sortedData.map(item => `${item.score || 0}分`)
|
|||
|
|
const counts = sortedData.map(item => item.student_count || 0)
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
confine: true,
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow',
|
|||
|
|
},
|
|||
|
|
formatter: (params: any) => {
|
|||
|
|
if (!Array.isArray(params))
|
|||
|
|
return ''
|
|||
|
|
const param = params[0]
|
|||
|
|
// 使用 \n 换行而不是 <br/>
|
|||
|
|
return `${param.axisValue}\n${param.marker} 人数: ${param.value}人`
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: 50,
|
|||
|
|
right: 30,
|
|||
|
|
bottom: 30,
|
|||
|
|
top: 20,
|
|||
|
|
containLabel: false,
|
|||
|
|
},
|
|||
|
|
// 横向柱状图：xAxis 为数值轴，yAxis 为类目轴
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
name: '人数',
|
|||
|
|
nameTextStyle: {
|
|||
|
|
fontSize: 11,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
fontSize: 10,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed',
|
|||
|
|
color: '#eeeeee',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: categories,
|
|||
|
|
axisLabel: {
|
|||
|
|
fontSize: 10,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#cccccc',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// 反转 Y 轴，让分数从上到下递增
|
|||
|
|
inverse: true,
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '人数',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: counts,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#3b82f6',
|
|||
|
|
},
|
|||
|
|
barMaxWidth: 30,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'right',
|
|||
|
|
fontSize: 10,
|
|||
|
|
formatter: '{c}人',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const showChart = computed(() => {
|
|||
|
|
return !props.loading && props.data && props.data.length > 0
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="score-chart">
|
|||
|
|
<!-- 图表 -->
|
|||
|
|
<view v-if="showChart" class="chart-container">
|
|||
|
|
<uni-echarts :option="chartOption" custom-class="chart" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载状态 -->
|
|||
|
|
<view v-if="loading" class="h-60 flex items-center justify-center">
|
|||
|
|
<wd-loading size="24" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 暂无数据 -->
|
|||
|
|
<view v-if="!loading && (!data || data.length === 0)" class="py-8 text-center">
|
|||
|
|
<text class="text-sm text-gray-500">暂无数据</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.chart {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 250px;
|
|||
|
|
}
|
|||
|
|
</style>
|