AIzhushou-screen/src/views/index/student-distribution.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;

// 模拟数据
const years = ['2022', '2023', '2024', '2025', '2026', '2027'];
const data = [320, 400, 350, 500, 450, 380];

const initChart = () => {
  if (!chartRef.value) return;
  
  chart = echarts.init(chartRef.value);
  
  const option = {
    grid: {
      top: '15%',
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: years,
      axisLine: {
        lineStyle: {
          color: '#E0E0E0'
        }
      },
      axisLabel: {
        color: '#999999'
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#E0E0E0'
        }
      },
      axisLabel: {
        color: '#999999'
      }
    },
    series: [
      {
        name: '学生人数',
        type: 'line',
        data: data,
        smooth: true,
        showSymbol: true,
        symbolSize: 8,
        itemStyle: {
          color: '#4B96FF'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(75, 150, 255, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(75, 150, 255, 0.1)'
              }
            ]
          }
        }
      }
    ]
  };
  
  chart.setOption(option);
};

// 监听窗口大小变化，重绘图表
const handleResize = () => {
  if (chart) {
    chart.resize();
  }
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

// 组件卸载时移除事件监听
const onUnmounted = () => {
  window.removeEventListener('resize', handleResize);
  if (chart) {
    chart.dispose();
    chart = null;
  }
};

// 添加默认导出
defineComponent({
  name: 'StudentDistribution'
});
</script>

<template>
  <div class="student-distribution">
    <div class="chart-container" ref="chartRef"></div>
    <div class="chart-info">
      <div class="info-item">
        <div class="info-label">总考生数量</div>
        <div class="info-value">24,680</div>
      </div>
      <div class="info-item">
        <div class="info-label">同比增长</div>
        <div class="info-value increase">+12.5%</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.student-distribution {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-container {
  flex: 1;
  width: 100%;
}

.chart-info {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  padding: 10px 0;
  
  .info-item {
    text-align: center;
    
    .info-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }
    
    .info-value {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      
      &.increase {
        color: #52c41a;
      }
      
      &.decrease {
        color: #f5222d;
      }
    }
  }
}
</style>