Situation-Awareness-Platform-Frontend/src/views/Jyh/security/components/VulnerabilityLanguageChart.vue

<template>
  <div class="index-module__NV_5cW__chartCard chartCard__wide mb-[1.5rem]">
    <h3 class="chartCard__title">漏洞语言分布</h3>
    <div class="chartCard__container">
      <div class="num-empty" v-if="isEmpty.languageTrend"></div>
      <div v-else id="languageTrendChart" class="chart"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
import { languageTrendPage1 } from '@/api/jyh/situation';

// 空数据标识
const isEmpty = ref({
  languageTrend: false
});

// 图表实例存储（用于resize时销毁重绘）
const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({
  languageTrendChart: null
});

// 漏洞语言分布数据 - 响应式数据
const languageTrendData = ref({
  years: [] as string[],
  series: [] as any[]
});

// 获取后端数据
const fetchLanguageTrendData = async () => {
  try {
    console.log('开始请求漏洞语言分布数据...');
    const response = await languageTrendPage1();
    const businessData = response.data; // Axios响应格式，业务数据在response.data中
    console.log('API响应:', response);
    
    if (businessData?.code === 200) {
      console.log('API返回的数据:', businessData.data);
      
      // 处理后端返回的数据格式
      const processedData = processBackendData(businessData.data);
      languageTrendData.value = processedData;
      
      // 更新空数据标识
      isEmpty.value.languageTrend = !processedData.years || processedData.years.length === 0;
    } else {
      console.error('获取漏洞语言分布数据失败:', businessData?.msg || '未知错误');
      // 设置默认数据
      setDefaultData();
    }
  } catch (error) {
    console.error('获取漏洞语言分布数据异常:', error);
    // 发生异常时设置默认数据
    setDefaultData();
  }
};

// 处理后端返回的数据格式
const processBackendData = (backendData: any[]) => {
  // 按语言分组
  const groupedData: { [key: string]: { year: string, value: number }[] } = {};
  
  backendData.forEach(item => {
    if (!groupedData[item.name]) {
      groupedData[item.name] = [];
    }
    groupedData[item.name].push({
      year: item.year,
      value: item.data
    });
  });
  
  // 提取所有年份并排序
  const allYearsSet = new Set<string>();
  Object.values(groupedData).forEach(langData => {
    langData.forEach(d => allYearsSet.add(d.year));
  });
  const years = Array.from(allYearsSet).sort();
  
  // 生成系列数据
  const series = Object.entries(groupedData).map(([name, data]) => {
    // 根据年份顺序填充数据，缺失的设为0
    const values = years.map(year => {
      const found = data.find(d => d.year === year);
      return found ? found.value : 0;
    });
    
    // 这里可以使用预定义的颜色方案，或者动态生成
    const predefinedColors: { [key: string]: string } = {
      'JavaScript': '#FAC858',
      'Python': '#5470C6',
      'HTML/CSS': '#91CC75',
      'SQL': '#9254DE',
      'Java': '#EE6666',
      'TypeScript': '#73C0DE',
      'Shell': '#52C41A',
      'C++': '#FF6E00',
      'C#': '#722ED1',
      'Go': '#00DDFF',
      'PHP': '#F5222D',
      'Rust': '#FC8452'
    };
    
    const color = predefinedColors[name] || getRandomColor();
    
    return {
      name: name,
      type: 'established', // 可以根据实际情况调整
      color: color,
      data: values
    };
  });
  
  return {
    years: years,
    series: series
  };
};

// 设置默认数据
const setDefaultData = () => {
  languageTrendData.value = {
    years: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
    series: [
      {
        name: 'JavaScript',
        type: 'established',
        color: '#FAC858',
        data: [65, 64, 69, 70, 69, 65, 61, 61]
      },
      {
        name: 'Python',
        type: 'established',
        color: '#5470C6',
        data: [32, 41, 49, 55, 52, 53, 54, 60]
      },
      {
        name: 'HTML/CSS',
        type: 'established',
        color: '#91CC75',
        data: [60, 55, 61, 61, 60, 54, 52, 52]
      },
      {
        name: 'SQL',
        type: 'established',
        color: '#9254DE',
        data: [42, 47, 56, 56, 54, 49, 52, 50]
      },
      {
        name: 'Java',
        type: 'established',
        color: '#EE6666',
        data: [47, 51, 50, 54, 49, 48, 49, 49]
      },
      {
        name: 'TypeScript',
        type: 'emerging',
        color: '#73C0DE',
        data: [12, 17, 25, 28, 29, 34, 34, 50]
      },
      {
        name: 'Shell',
        type: 'established',
        color: '#52C41A',
        data: [29, 29, 40, 39, 37, 34, 34, 41]
      },
      {
        name: 'C++',
        type: 'established',
        color: '#FF6E00',
        data: [17, 18, 20, 27, 23, 25, 25, 21]
      },
      {
        name: 'C#',
        type: 'established',
        color: '#722ED1',
        data: [20, 22, 24, 22, 21, 23, 21, 19]
      },
      {
        name: 'Go',
        type: 'emerging',
        color: '#00DDFF',
        data: [8, 12, 18, 19, 17, 19, 17, 14]
      },
      {
        name: 'PHP',
        type: 'declining',
        color: '#F5222D',
        data: [30, 26, 29, 27, 32, 20, 18, 15]
      },
      {
        name: 'Rust',
        type: 'emerging',
        color: '#FC8452',
        data: [2, 2, 5, 7, 6, 9, 10, 10]
      }
    ]
  };
  isEmpty.value.languageTrend = false;
};

// 生成随机颜色的辅助函数
const getRandomColor = () => {
  const colors = ['#FAC858', '#5470C6', '#91CC75', '#9254DE', '#EE6666', '#73C0DE', '#52C41A', '#FF6E00', '#722ED1', '#00DDFF', '#F5222D', '#FC8452'];
  return colors[Math.floor(Math.random() * colors.length)];
};

// 初始化漏洞语言分布图表（堆叠面积图）
const initLanguageTrendChart = () => {
  const el = document.getElementById('languageTrendChart');
  if (!el) return;

  // 延迟执行以确保DOM已渲染
  setTimeout(() => {
    const chartEl = document.getElementById('languageTrendChart');
    if (!chartEl) return;

    if (chartInstances.value.languageTrendChart) {
      chartInstances.value.languageTrendChart.dispose();
    }

    const myChart = echarts.init(chartEl);
    chartInstances.value.languageTrendChart = myChart;

    // 准备堆叠面积图数据
    const series = languageTrendData.value.series.map(item => ({
      name: item.name,
      type: 'line',
      stack: '总量',
      areaStyle: {
        color: item.color
      },
      lineStyle: {
        width: 1,
        color: item.color
      },
      symbol: 'none',
      data: item.data
    }));

    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        },
        formatter: (params: any) => {
          let res = `<div>${params[0].name}年</div>`;
          params.forEach((p: any) => {
            res += `<div style="display:flex;align-items:center;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${p.color};"></span>${p.seriesName}: ${p.value}%</div>`;
          });
          return res;
        }
      },
      legend: {
        top: 0,
        textStyle: { fontSize: 12 },
        data: languageTrendData.value.series.map(item => item.name)
      },
      grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: languageTrendData.value.years,
          axisLabel: { fontSize: 12 }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '使用率(%)',
          nameTextStyle: { fontSize: 12 },
          axisLabel: { fontSize: 12 }
        }
      ],
      series: series
    });

    // 监听窗口大小变化，重新调整图表大小
    window.addEventListener('resize', () => {
      if (chartInstances.value.languageTrendChart) {
        chartInstances.value.languageTrendChart.resize();
      }
    });
  }, 0);
};


// 在组件挂载后获取数据并初始化图表
onMounted(async () => {
  await fetchLanguageTrendData();
  nextTick(() => {
    initLanguageTrendChart();
  });
});

// 监听数据变化，重新初始化图表
watch(languageTrendData, () => {
  if (!isEmpty.value.languageTrend) {
    nextTick(() => {
      initLanguageTrendChart();
    });
  }
}, { deep: true });

// 在组件卸载前清理资源
onUnmounted(() => {
  if (chartInstances.value.languageTrendChart) {
    chartInstances.value.languageTrendChart.dispose();
  }
});

defineExpose({
  initLanguageTrendChart
});
</script>

<style scoped>
.index-module__NV_5cW__chartCard {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffffe6;
  border: 1px solid #ffffff4d;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 16px #00000014;
  transition: all 0.3s;
}

.index-module__NV_5cW__chartCard:hover {
  border-color: #3b82f64d;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px #0000001f;
}

.chartCard__wide {
  grid-column: 1 / -1; /* 跨列显示 */
}

.chartCard__title {
  color: #333;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  text-align: left;
}

.chartCard__container {
  width: 100%;
  height: 300px; /* 图表高度 */
  position: relative;
}

.mb-\[1\.5rem\] {
  margin-bottom: 1.5rem;
}

/* 与示例一致的空数据样式 */
.num-empty {
  height: 10px;
  border-top: 2px solid #2951E0;
  width: 100%;
  background: linear-gradient(180deg, rgba(41, 81, 224, 0.12) 0%, rgba(41, 81, 224, 0.04) 100%);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.chart {
  width: 100%;
  height: 100%;
}
</style>