diff --git a/src/views/Jyh/security/index.vue b/src/views/Jyh/security/index.vue
index e4ff643..396e44a 100644
--- a/src/views/Jyh/security/index.vue
+++ b/src/views/Jyh/security/index.vue
@@ -139,6 +139,15 @@
@@ -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 = `
${params[0].name}
`;
+ let total = 0;
+ params.forEach((p: any) => {
+ total += p.value;
+ });
+ params.forEach((p: any) => {
+ const percentage = ((p.value / total) * 100).toFixed(1);
+ res += `
${p.seriesName}: ${p.value} (${percentage}%)
`;
+ });
+ 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时重绘图表