Tcode平台改造升级-行业分布图表

src/views/Jyh/security/index.vue

@@ -100,7 +100,7 @@
             <h3 class="chartCard__title">行业分布</h3>
             <div class="chartCard__container">
               <div class="num-empty" v-if="isEmpty.university"></div>
-              <div v-else id="universityChart" class="chart"></div>
+              <div v-else id="cweAttackSurfaceRadar" class="chart"></div>
             </div>
           </div>
 
@@ -358,6 +358,22 @@ const chartData = ref({
     { name: 'jQuery', cvss: 9.1, vulnCount: 6, usage: '3000万+', desc: 'XSS和原型污染漏洞' },
     { name: 'Lodash', cvss: 9.0, vulnCount: 5, usage: '2200万+', desc: '原型污染漏洞，影响Node.js生态' },
     { name: 'Moment.js', cvss: 9.0, vulnCount: 4, usage: '1100万+', desc: 'ReDoS和原型污染漏洞' }
+  ],
+  // 行业分布数据
+  industryDistribution: [
+    { value: 25.8, name: '人工智能' },
+    { value: 18.4, name: '云计算' },
+    { value: 15.6, name: '大数据' },
+    { value: 12.2, name: '物联网' },
+    { value: 9.6, name: '网络安全' },
+    { value: 7.1, name: '区块链' },
+    { value: 6.4, name: '工业互联网' },
+    { value: 4.9, name: '移动开发' }
+  ],
+  // 科技感配色方案
+  industryColorPalette: [
+    '#00f0ff', '#00b03e', '#ffeb00', '#ffab00',
+    '#ff5100', '#c0232a', '#a262f2', '#379bff'
   ]
 });
 
@@ -368,7 +384,8 @@ const isEmpty = ref({
   ossCompass: false,
   developer: false,
   languageTech: false,
-  highRiskComponent: false
+  highRiskComponent: false,
+  industryDistribution: false
 });
 
 // 图表实例存储（用于resize时销毁重绘）
@@ -378,7 +395,8 @@ const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({
   ossCompassChart: null,
   developerChart: null,
   languageTechChart: null,
-  highRiskComponentRank: null
+  highRiskComponentRank: null,
+  cweAttackSurfaceRadar: null
 });
 
 // ===================== 新增：列表自动滚动逻辑 =====================
@@ -664,6 +682,47 @@ const initDeveloperChart = () => {
   });
 };
 
+// 初始化行业分布图表（饼图）
+const initIndustryDistributionChart = () => {
+  const el = document.getElementById('cweAttackSurfaceRadar');
+  if (!el) return;
+
+  if (chartInstances.value.cweAttackSurfaceRadar) {
+    chartInstances.value.cweAttackSurfaceRadar.dispose();
+  }
+
+  const myChart = echarts.init(el);
+  chartInstances.value.cweAttackSurfaceRadar = myChart;
+
+  myChart.setOption({
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => `${params.name}: ${params.percent}% (${params.value}%)`
+    },
+    legend: {
+      bottom: '0',
+      textStyle: { fontSize: 12 },
+      itemWidth: 10,
+      itemHeight: 10
+    },
+    color: chartData.value.industryColorPalette,
+    series: [
+      {
+        name: '行业分布',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        data: chartData.value.industryDistribution,
+        label: {
+          show: true,
+          formatter: '{b}: {d}%',
+          fontSize: 10
+        }
+      }
+    ],
+    grid: { left: 0, bottom: 0, top: 0, right: 0 }
+  });
+};
+
 // 初始化高危组件Top 10图表（横向柱状图）
 const initHighRiskComponentChart = () => {
   const el = document.getElementById('highRiskComponentRank');
@@ -810,7 +869,8 @@ const initCharts = () => {
     ossCompass: chartData.value.ossCompass.data.every(item => item === 0),
     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
+    highRiskComponent: chartData.value.highRiskComponent.length === 0,
+    industryDistribution: chartData.value.industryDistribution.length === 0
   };
 
   // 初始化各图表
@@ -820,6 +880,7 @@ const initCharts = () => {
   if (!isEmpty.value.developer) nextTick(() => initDeveloperChart());
   if (!isEmpty.value.languageTech) nextTick(() => initLanguageTechChart());
   if (!isEmpty.value.highRiskComponent) nextTick(() => initHighRiskComponentChart());
+  if (!isEmpty.value.industryDistribution) nextTick(() => initIndustryDistributionChart());
 };
 
 // 页面resize时重绘图表