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 } from 'vue';
import * as echarts from 'echarts';

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

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

// 漏洞语言分布数据
const languageTrendData = {
  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]
    }
  ]
};

// 初始化漏洞语言分布图表（堆叠面积图）
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.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.series.map(item => item.name)
      },
      grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: languageTrendData.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(() => {
  nextTick(() => {
    initLanguageTrendChart();
  });
});

// 在组件卸载前清理资源
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>