Tcode平台改造升级-CVE 月度趋势图表

src/views/Jyh/security/index.vue

@@ -160,13 +160,40 @@
             </div>
           </div>
 
-          <!-- 7. 武汉市语言与技术竞争趋势（折线图，近五年）-->
+          <!-- 7. 武汉市语言与技术竞争趋势（折线图，近五年）
           <div class="index-module__NV_5cW__chartCard chartCard__wide">
             <h3 class="chartCard__title">武汉市语言与技术竞争趋势（2021-2025）</h3>
             <div class="chartCard__container">
               <div class="num-empty" v-if="isEmpty.languageTech"></div>
               <div v-else id="languageTechChart" class="chart"></div>
             </div>
+          </div> -->
+
+          <div class="index-module__NV_5cW__chartCard chartCard__wide">
+            <div class="chartCard__header">
+              <h3 class="chartCard__title">CVE 月度趋势</h3>
+              <!-- 视图切换按钮，用于切换全球和区域视图 -->
+              <div class="chartCard__actions">
+                <button 
+                  class="chartCard__actionBtn" 
+                  :class="{ 'chartCard__actionBtn--active': cveView === 'global' }"
+                  @click="switchCveView('global')"
+                >
+                  全球
+                </button>
+                <button 
+                  class="chartCard__actionBtn" 
+                  :class="{ 'chartCard__actionBtn--active': cveView === 'regional' }"
+                  @click="switchCveView('regional')"
+                >
+                  区域
+                </button>
+              </div>
+            </div>
+            <div class="chartCard__container">
+              <div class="num-empty" v-if="isEmpty.cveData"></div>
+              <div v-else id="CVEChart" class="chart"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -374,9 +401,25 @@ const chartData = ref({
   industryColorPalette: [
     '#00f0ff', '#00b03e', '#ffeb00', '#ffab00',
     '#ff5100', '#c0232a', '#a262f2', '#379bff'
-  ]
+  ],
+  // CVE图表数据
+  cveData: {
+    // 全球CVE：2024年实际数据（基于Excel数据）
+    global: {
+      cveCount: [98402, 418, 7025, 3711, 5115, 3228, 3044, 2957, 2592, 1455, 4826, 4661],
+      acceleration: [0, -99.58, 1580.62, -47.17, 37.83, -36.89, -5.70, -2.86, -12.34, -43.87, 231.68, -3.42] // 环比增长率（%）
+    },
+    // 中国区域CVE：2024年数据（约占全球30%）
+    regional: {
+      cveCount: [29521, 125, 2108, 1113, 1535, 968, 913, 887, 778, 437, 1448, 1398],
+      acceleration: [0, -99.58, 1580.62, -47.17, 37.83, -36.89, -5.70, -2.86, -12.34, -43.87, 231.68, -3.42] // 环比增长率（%）
+    }
+  }
 });
 
+// 视图切换状态变量（global: 全球, regional: 区域）
+const cveView = ref('global');
+
 // 空数据标识
 const isEmpty = ref({
   university: false,
@@ -385,7 +428,8 @@ const isEmpty = ref({
   developer: false,
   languageTech: false,
   highRiskComponent: false,
-  industryDistribution: false
+  industryDistribution: false,
+  cveData: false
 });
 
 // 图表实例存储（用于resize时销毁重绘）
@@ -396,7 +440,8 @@ const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({
   developerChart: null,
   languageTechChart: null,
   highRiskComponentRank: null,
-  cweAttackSurfaceRadar: null
+  cweAttackSurfaceRadar: null,
+  CVEChart: null
 });
 
 // ===================== 新增：列表自动滚动逻辑 =====================
@@ -475,6 +520,145 @@ onUnmounted(() => {
     }
   });
 });
+
+// CVE视图切换方法
+const switchCveView = (view: 'global' | 'regional') => {
+  cveView.value = view;
+  nextTick(() => {
+    initCVEChart();
+  });
+};
+
+// 初始化CVE图表（柱状图+折线图）
+const initCVEChart = () => {
+  const el = document.getElementById('CVEChart');
+  if (!el) return;
+
+  if (chartInstances.value.CVEChart) {
+    chartInstances.value.CVEChart.dispose();
+  }
+
+  const myChart = echarts.init(el);
+  chartInstances.value.CVEChart = myChart;
+
+  // 获取当前视图的数据
+  const currentData = chartData.value.cveData[cveView.value === 'global' ? 'global' : 'regional'];
+  const cveCount = currentData.cveCount;
+  const acceleration = currentData.acceleration;
+
+  // 月份数据
+  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+
+  myChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#999'
+        }
+      },
+      formatter: (params: any) => {
+        let res = `<div>${params[0].name}</div>`;
+        params.forEach((p: any) => {
+          if (p.seriesName === 'CVE数量') {
+            res += `<div>${p.marker}${p.seriesName}: ${p.value}</div>`;
+          } else {
+            res += `<div>${p.marker}${p.seriesName}: ${p.value}%</div>`;
+          }
+        });
+        return res;
+      }
+    },
+    legend: {
+      top: 0,
+      textStyle: { fontSize: 12 },
+      data: ['CVE数量', '环比增长率']
+    },
+    grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
+    xAxis: [
+      {
+        type: 'category',
+        data: months,
+        axisPointer: {
+          type: 'shadow'
+        },
+        axisLabel: { fontSize: 12 }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: 'CVE数量',
+        nameTextStyle: { fontSize: 12, color: '#333' },
+        axisLabel: { fontSize: 12, color: '#666' },
+        position: 'left',
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed'
+          }
+        }
+      },
+      {
+        type: 'value',
+        name: '环比增长率(%)',
+        nameTextStyle: { fontSize: 12, color: '#333' },
+        axisLabel: { fontSize: 12, color: '#666' },
+        position: 'right',
+        splitLine: {
+          show: false
+        }
+      }
+    ],
+    series: [
+      {
+        name: 'CVE数量',
+        type: 'bar',
+        data: cveCount,
+        itemStyle: { 
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#3b82f6' },
+            { offset: 1, color: '#60a5fa' }
+          ])
+        },
+        barWidth: 20,
+        label: {
+          show: true,
+          position: 'top',
+          formatter: '{c}',
+          fontSize: 10,
+          color: '#333'
+        }
+      },
+      {
+        name: '环比增长率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: acceleration,
+        itemStyle: { 
+          color: '#ef4444',
+          borderWidth: 2
+        },
+        lineStyle: { 
+          width: 2,
+          color: '#ef4444'
+        },
+        symbol: 'circle',
+        symbolSize: 6,
+        smooth: true,
+        label: {
+          show: true,
+          position: 'top',
+          formatter: (params: any) => `${params.value}%`,
+          fontSize: 10,
+          color: '#333'
+        }
+      }
+    ]
+  });
+};
+
 // ===================== 新增结束 =====================
 
 // 初始化高校参与分布饼图
@@ -870,7 +1054,9 @@ const initCharts = () => {
     developer: chartData.value.developer.data.every(item => item === 0),
     languageTech: chartData.value.languageTech.series.every(s => s.data.every(d => d === 0)),
     highRiskComponent: chartData.value.highRiskComponent.length === 0,
-    industryDistribution: chartData.value.industryDistribution.length === 0
+    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)
   };
 
   // 初始化各图表
@@ -881,6 +1067,7 @@ const initCharts = () => {
   if (!isEmpty.value.languageTech) nextTick(() => initLanguageTechChart());
   if (!isEmpty.value.highRiskComponent) nextTick(() => initHighRiskComponentChart());
   if (!isEmpty.value.industryDistribution) nextTick(() => initIndustryDistributionChart());
+  if (!isEmpty.value.cveData) nextTick(() => initCVEChart());
 };
 
 // 页面resize时重绘图表
@@ -1489,4 +1676,42 @@ onMounted(() => {
     max-height: 300px;
   }
 }
+
+/* 图表卡片头部样式 */
+.chartCard__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+/* 图表操作按钮样式 */
+.chartCard__actions {
+  display: flex;
+  gap: 8px;
+}
+
+.chartCard__actionBtn {
+  padding: 4px 12px;
+  border: 1px solid #d1d5db;
+  background-color: #f9fafb;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.chartCard__actionBtn:hover {
+  background-color: #f3f4f6;
+}
+
+.chartCard__actionBtn--active {
+  background-color: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.chartCard__actionBtn--active:hover {
+  background-color: #2563eb;
+}
 </style>