diff --git a/src/views/Jyh/security/index.vue b/src/views/Jyh/security/index.vue
index c7d748c..0edc961 100644
--- a/src/views/Jyh/security/index.vue
+++ b/src/views/Jyh/security/index.vue
@@ -96,11 +96,11 @@
-->
-
+
@@ -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时重绘图表