yss-project/src/app/pages/designer/dashboard/skill-radar/skill-radar.component.ts

import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as echarts from 'echarts';

interface SkillData {
  label: string;
  current: number;
  target: number;
  teamAvg: number;
}

interface SkillAnalysisItem {
  name: string;
  score: number;
  status: string;
}

@Component({
  selector: 'app-skill-radar',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './skill-radar.component.html',
  styleUrl: './skill-radar.component.scss'
})
export class SkillRadarComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('radarChart') radarChartRef!: ElementRef<HTMLDivElement>;
  private radarChart: any = null;
  
  viewMode: 'self' | 'comparison' = 'self';
  
  // 能力维度数据
  skillDimensions: SkillData[] = [
    { label: '建模能力', current: 85, target: 95, teamAvg: 78 },
    { label: '渲染技巧', current: 76, target: 90, teamAvg: 72 },
    { label: '软装搭配', current: 90, target: 95, teamAvg: 85 },
    { label: '沟通能力', current: 70, target: 85, teamAvg: 75 },
    { label: '项目管理', current: 65, target: 80, teamAvg: 68 },
    { label: '创新能力', current: 82, target: 90, teamAvg: 76 }
  ];
  
  // 能力分析数据
  skillAnalysis: SkillAnalysisItem[] = [
    { name: '建模能力', score: 85, status: '优秀' },
    { name: '渲染技巧', score: 76, status: '良好' },
    { name: '软装搭配', score: 90, status: '优秀' },
    { name: '沟通能力', score: 70, status: '需要提升' },
    { name: '项目管理', score: 65, status: '需要提升' },
    { name: '创新能力', score: 82, status: '良好' }
  ];
  
  // 提升建议
  improvementSuggestions = [
    '在项目管理方面，建议使用敏捷管理方法，提高任务优先级判断能力',
    '沟通能力可以通过主动与客户进行阶段性汇报来提升',
    '渲染技巧可以学习新的灯光设置和材质调整方法，提升作品真实感',
    '继续保持软装搭配和建模能力的优势，探索更多创新风格'
  ];

  constructor() { }

  ngOnInit(): void {
    // 初始化组件数据
  }

  ngAfterViewInit(): void {
    // 初始化雷达图
    this.initRadarChart();
  }

  // 切换视图模式
  switchViewMode(mode: 'self' | 'comparison'): void {
    this.viewMode = mode;
    this.updateRadarChart();
  }

  // 初始化雷达图
  private initRadarChart(): void {
    const chartDom = this.radarChartRef.nativeElement;
    this.radarChart = echarts.init(chartDom);
    
    const option = this.getEChartsOption();
    this.radarChart.setOption(option);

    // 窗口调整大小时重绘图表
    window.addEventListener('resize', () => {
      if (this.radarChart) {
        this.radarChart.resize();
      }
    });
  }

  // 获取ECharts配置选项
  private getEChartsOption() {
    const indicators = this.skillDimensions.map(dim => ({
      name: dim.label,
      max: 100
    }));

    const series = [
      {
        name: '个人能力',
        type: 'radar',
        data: [
          {
            value: this.skillDimensions.map(dim => dim.current),
            name: '个人能力',
            itemStyle: {
              color: '#ff6384'
            },
            areaStyle: {
              color: 'rgba(255, 99, 132, 0.2)'
            }
          }
        ]
      }
    ];

    if (this.viewMode === 'comparison') {
      series[0].data.push({
        value: this.skillDimensions.map(dim => dim.teamAvg),
        name: '团队平均',
        itemStyle: {
          color: '#36a2eb'
        },
        areaStyle: {
          color: 'rgba(54, 162, 235, 0.2)'
        }
      });
    }

    return {
      title: {
        text: '能力雷达图',
        left: 'center',
        textStyle: {
          fontSize: 16,
          color: '#333'
        }
      },
      legend: {
        data: this.viewMode === 'comparison' ? ['个人能力', '团队平均'] : ['个人能力'],
        bottom: 10
      },
      radar: {
        indicator: indicators,
        radius: '60%',
        axisLine: {
          lineStyle: {
            color: 'rgba(200, 200, 200, 0.3)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(200, 200, 200, 0.3)'
          }
        },
        splitArea: {
          show: false
        }
      },
      series: series,
      tooltip: {
        trigger: 'item',
        formatter: function(params: any) {
          return `${params.seriesName}<br/>${params.name}: ${params.value}`;
        }
      }
    };
  }



  // 更新雷达图
  private updateRadarChart(): void {
    if (this.radarChart) {
      const option = this.getEChartsOption();
      this.radarChart.setOption(option);
    }
  }

  // 清理图表资源
  ngOnDestroy(): void {
    if (this.radarChart) {
      this.radarChart.destroy();
    }
  }
}