Tcode平台改造升级-漏洞等级分布图表

src/views/Jyh/security/index.vue

@@ -140,6 +140,15 @@
         </div>
       </div>
       
+      <!-- 高危漏洞占比图表 -->
+      <div class="index-module__NV_5cW__chartCard">
+        <h3 class="chartCard__title">漏洞等级分布</h3>
+        <div class="chartCard__container">
+          <div class="num-empty" v-if="isEmpty.vulnerabilitySeverity"></div>
+          <div v-else id="vulnerabilitySeverityChart" class="chart"></div>
+        </div>
+      </div>
+
       <!-- 加入武汉开源社区行动区 -->
       <div class="index-module__NV_5cW__actionSection">
         <div class="index-module__NV_5cW__actionBackground"></div>
@@ -435,6 +444,38 @@ const chartData = ref({
     { name: 'Lodash', cvss: 9.0, vulnCount: 5, usage: '2200万+', desc: '原型污染漏洞，影响Node.js生态' },
     { name: 'Moment.js', cvss: 9.0, vulnCount: 4, usage: '1100万+', desc: 'ReDoS和原型污染漏洞' }
   ],
+  
+  // 漏洞占比数据
+  vulnerabilitySeverity: {
+    categories: ['2024Q1', '2024Q2', '2024Q3', '2024Q4', '2025Q1', '2025Q2', '2025Q3', '2025Q4'],
+    series: [
+      {
+        name: '高危漏洞',
+        type: 'bar',
+        stack: 'total',
+        itemStyle: { color: '#FF4D4F' },
+        barWidth: 16,
+        data: [35, 42, 58, 45, 67, 78, 62, 85, 92]
+      },
+      {
+        name: '中危漏洞',
+        type: 'bar',
+        stack: 'total',
+        itemStyle: { color: '#FAAD14' },
+        barWidth: 16,
+        data: [65, 72, 88, 95, 112, 105, 120, 135, 128]
+      },
+      {
+        name: '低危漏洞',
+        type: 'bar',
+        stack: 'total',
+        itemStyle: { color: '#36CFC9' },
+        barWidth: 16,
+        data: [120, 135, 150, 142, 165, 180, 175, 190, 210]
+      }
+    ]
+  },
+  
   // 行业分布数据
   industryDistribution: [
     { value: 25.8, name: '人工智能' },
@@ -1103,6 +1144,62 @@ const initLanguageTrendChart = () => {
   });
 };
 
+// 初始化高危漏洞占比图表
+const initVulnerabilitySeverityChart = () => {
+  const el = document.getElementById('vulnerabilitySeverityChart');
+  if (!el) return;
+
+  if (chartInstances.value.vulnerabilitySeverityChart) {
+    chartInstances.value.vulnerabilitySeverityChart.dispose();
+  }
+
+  const myChart = echarts.init(el);
+  chartInstances.value.vulnerabilitySeverityChart = myChart;
+
+  myChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: (params: any) => {
+        let res = `<div>${params[0].name}</div>`;
+        let total = 0;
+        params.forEach((p: any) => {
+          total += p.value;
+        });
+        params.forEach((p: any) => {
+          const percentage = ((p.value / total) * 100).toFixed(1);
+          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} (${percentage}%)</div>`;
+        });
+        return res;
+      }
+    },
+    legend: {
+      top: 0,
+      textStyle: { fontSize: 12 },
+      data: chartData.value.vulnerabilitySeverity.series.map(item => item.name)
+    },
+    grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
+    xAxis: [
+      {
+        type: 'category',
+        data: chartData.value.vulnerabilitySeverity.categories,
+        axisLabel: { fontSize: 12 }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '漏洞数量',
+        nameTextStyle: { fontSize: 12 },
+        axisLabel: { fontSize: 12 }
+      }
+    ],
+    series: chartData.value.vulnerabilitySeverity.series
+  });
+};
+
 // 初始化武汉市语言与技术竞争趋势（折线图）
 const initLanguageTechChart = () => {
   const el = document.getElementById('languageTechChart');
@@ -1177,7 +1274,8 @@ const initCharts = () => {
     industryDistribution: chartData.value.industryDistribution.length === 0,
     cveData: chartData.value.cveData.global.cveCount.every(item => item === 0) && 
              chartData.value.cveData.regional.cveCount.every(item => item === 0),
-    languageTrend: chartData.value.languageTrend.series.every(s => s.data.every(d => d === 0))
+    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))
   };
 
   // 初始化各图表
@@ -1190,6 +1288,7 @@ const initCharts = () => {
   if (!isEmpty.value.industryDistribution) nextTick(() => initIndustryDistributionChart());
   if (!isEmpty.value.cveData) nextTick(() => initCVEChart());
   if (!isEmpty.value.languageTrend) nextTick(() => initLanguageTrendChart());
+  if (!isEmpty.value.vulnerabilitySeverity) nextTick(() => initVulnerabilitySeverityChart());
 };
 
 // 页面resize时重绘图表