态势感知平台-全球开源风险态势感知监控中心漏洞语言分布图组件抽离

src/views/Jyh/security/index.vue

@@ -46,18 +46,13 @@
           <!-- 情报流 -->
           <IntelligenceFeed />
 
+          <!-- CVE 月度趋势：全球图 区域图 -->
           <CveTrendChart />
         </div>
       </div>
 
-      <!-- 编程语言使用趋势堆叠面积图 -->
-      <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>
+      <!-- 编程语言使用趋势堆叠面积图-->
+      <VulnerabilityLanguageChart />
 
       <!-- 高危漏洞占比图表 -->
       <div class="index-module__NV_5cW__chartCard mb-[1.5rem]">
@@ -89,6 +84,7 @@ import IndustryDistribution from './components/IndustryDistribution.vue';
 import HighRiskComponentRank from './components/HighRiskComponentRank.vue';
 import IntelligenceFeed from './components/IntelligenceFeed.vue';
 import CveTrendChart from './components/CveTrendChart.vue';
+import VulnerabilityLanguageChart from './components/VulnerabilityLanguageChart.vue';
 import StatsGlass from '@/views/Jyh/security/StatsGlass.vue';
 
 // 页面尺寸响应式
@@ -183,84 +179,7 @@ const chartData = ref({
       { name: 'Go', data: [60, 65, 70, 72, 75] }
     ]
   },
-  // 编程语言使用趋势数据
-  languageTrend: {
-    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]
-      }
-    ]
-  },
+
 
   // 漏洞占比数据
   vulnerabilitySeverity: {
@@ -559,76 +478,7 @@ const initDeveloperChart = () => {
   });
 };
 
-// 初始化编程语言使用趋势堆叠面积图
-const initLanguageTrendChart = () => {
-  const el = document.getElementById('languageTrendChart');
-  if (!el) return;
 
-  if (chartInstances.value.languageTrendChart) {
-    chartInstances.value.languageTrendChart.dispose();
-  }
-
-  const myChart = echarts.init(el);
-  chartInstances.value.languageTrendChart = myChart;
-
-  // 准备堆叠面积图数据
-  const series = chartData.value.languageTrend.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: chartData.value.languageTrend.series.map(item => item.name)
-    },
-    grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
-    xAxis: [
-      {
-        type: 'category',
-        boundaryGap: false,
-        data: chartData.value.languageTrend.years,
-        axisLabel: { fontSize: 12 }
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        name: '使用率(%)',
-        nameTextStyle: { fontSize: 12 },
-        axisLabel: { fontSize: 12 }
-      }
-    ],
-    series: series
-  });
-};
 
 // 初始化高危漏洞占比图表
 const initVulnerabilitySeverityChart = () => {
@@ -830,7 +680,7 @@ const initCharts = () => {
 
 
 
-    languageTrend: chartData.value.languageTrend.series.every(s => s.data.every(d => d === 0)),
+
     vulnerabilitySeverity: chartData.value.vulnerabilitySeverity.series.every(s => s.data.every(d => d === 0)),
     scatterData: chartData.value.scatterData.length === 0
   };
@@ -844,7 +694,7 @@ const initCharts = () => {
 
 
 
-  if (!isEmpty.value.languageTrend) nextTick(() => initLanguageTrendChart());
+
   if (!isEmpty.value.vulnerabilitySeverity) nextTick(() => initVulnerabilitySeverityChart());
   if (!isEmpty.value.scatterData) nextTick(() => initScatterChart());
 };