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

<template>
  <div class="index-module__NV_5cW__chartCard mb-[1.5rem]">
    <h3 class="chartCard__title">编程语言安全态势</h3>
    <div class="chartCard__container">
      <div class="num-empty" v-if="isEmpty.scatterData"></div>
      <div v-else id="scatterChart" class="chart"></div>
    </div>
  </div>
</template>

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

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

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

// 气泡图数据 - 响应式数据
const scatterData = ref({
  scatterData: [] as any[],
  midX: 50,
  midY: 50,
  quadrantColors: {
    Q1: '#BF232A', // [高密度, 低活跃度] - 极高风险
    Q2: '#FF4900', // [高密度, 高活跃度] - 高风险，需密切关注
    Q3: '#00B43E', // [低密度, 低活跃度] - 低风险，但维护成本高
    Q4: '#0063D0' // [低密度, 高活跃度] - 健康生态
  }
});

// 获取后端数据
const fetchScatterData = async () => {
  try {
    console.log('开始请求编程语言安全态势数据...');
    const response = await scatterDataPage1();
    const businessData = response.data; // Axios响应格式，业务数据在response.data中

    console.log('API响应:', response);
    
    if (businessData?.code === 200) {
      console.log('API返回的数据:', businessData.data);
      
      // 处理后端返回的数据格式
      const processedData = processBackendScatterData(businessData.data);
      scatterData.value.scatterData = processedData;
      
      // 更新空数据标识
      isEmpty.value.scatterData = !processedData || processedData.length === 0;
    } else {
      console.error('获取编程语言安全态势数据失败:', businessData?.msg || '未知错误');
      // 设置默认数据
      setDefaultScatterData();
    }
  } catch (error) {
    console.error('获取编程语言安全态势数据异常:', error);
    // 发生异常时设置默认数据
    setDefaultScatterData();
  }
};

// 处理后端返回的数据格式
const processBackendScatterData = (backendData: any[]) => {
  // 后端返回的数据已经是正确的格式，直接转换即可
  return backendData.map(item => [
    item.x,    // 代码活跃度(X)
    item.y,    // 漏洞密度(Y)
    item.size, // 漏洞总数(Size)
    item.name  // 语言名称(Name)
  ]);
};

// 设置默认数据
const setDefaultScatterData = () => {
  scatterData.value.scatterData = [
    [95, 75, 450, 'JavaScript'], // 最高活跃度：9,345,046个项目
    [90, 70, 380, 'Python'],     // 高活跃度：9,261,587个项目
    [85, 65, 320, 'TypeScript'], // 高增长：78.1%增长率
    [75, 80, 420, 'Java'],       // 传统强势：3,520,215个项目
    [45, 60, 280, 'C++'],        // 中等活跃：1,701,552个项目
    [40, 55, 250, 'C#'],         // 中等活跃：1,478,463个项目
    [35, 45, 180, 'PHP'],        // 传统Web语言
    [25, 25, 80, 'Go'],          // 新兴语言，低漏洞密度
    [15, 20, 45, 'Rust'],        // 安全性较好的新语言
    [60, 50, 200, 'Shell'],      // 脚本语言
  ];
  isEmpty.value.scatterData = false;
};

// 初始化气泡图
const initScatterChart = () => {
  const el = document.getElementById('scatterChart');
  if (!el) return;

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

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

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

    // 数据处理
    const data = scatterData.value.scatterData.map(item => ({
      value: [item[0], item[1], item[2]],
      name: item[3]
    }));

    // 计算四象限颜色
    const getColor = (x: number, y: number) => {
      if (x < scatterData.value.midX && y >= scatterData.value.midY) return scatterData.value.quadrantColors.Q1; // 高密度, 低活跃度 - 极高风险
      if (x >= scatterData.value.midX && y >= scatterData.value.midY) return scatterData.value.quadrantColors.Q2; // 高密度, 高活跃度 - 高风险
      if (x < scatterData.value.midX && y < scatterData.value.midY) return scatterData.value.quadrantColors.Q3; // 低密度, 低活跃度 - 低风险
      return scatterData.value.quadrantColors.Q4; // 低密度, 高活跃度 - 健康生态
    };

    myChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: (params: any) => {
          return `
            <div>${params.data.name}</div>
            <div>代码活跃度: ${params.data.value[0]}</div>
            <div>漏洞密度: ${params.data.value[1]}</div>
            <div>漏洞总数: ${params.data.value[2]}</div>
          `;
        }
      },
      grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
      xAxis: {
        type: 'value',
        name: '代码活跃度',
        nameTextStyle: { fontSize: 12 },
        axisLabel: { fontSize: 12 },
        splitLine: { show: true }
      },
      yAxis: {
        type: 'value',
        name: '漏洞密度',
        nameTextStyle: { fontSize: 12 },
        axisLabel: { fontSize: 12 },
        splitLine: { show: true }
      },
      series: [{
        type: 'scatter',
        data: data,
        symbolSize: (val: any) => val[2] / 2, // 根据漏洞总数调整气泡大小
        itemStyle: {
          color: (params: any) => getColor(params.value[0], params.value[1])
        },
        label: {
          show: true,
          formatter: (params: any) => params.data.name,
          position: 'inside',
          fontSize: 10,
          color: '#fff'
        }
      }]
    });

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

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

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

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

defineExpose({
  initScatterChart
});
</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__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>