From 678dd3842a0d51b399d30a081c28f07571ef1567 Mon Sep 17 00:00:00 2001 From: HeZhaohui Date: Thu, 18 Dec 2025 11:06:07 +0800 Subject: [PATCH] =?UTF-8?q?Tcode=E5=B9=B3=E5=8F=B0=E6=94=B9=E9=80=A0?= =?UTF-8?q?=E5=8D=87=E7=BA=A7-=E6=BC=8F=E6=B4=9E=E8=AF=AD=E8=A8=80?= =?UTF-8?q?=E5=88=86=E5=B8=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Jyh/security/index.vue | 250 ++++++++++++++++++++----------- 1 file changed, 163 insertions(+), 87 deletions(-) diff --git a/src/views/Jyh/security/index.vue b/src/views/Jyh/security/index.vue index 08d4292..e4ff643 100644 --- a/src/views/Jyh/security/index.vue +++ b/src/views/Jyh/security/index.vue @@ -66,26 +66,6 @@
- - - - -

情报流

@@ -105,14 +85,6 @@
- -

行业分布

@@ -122,15 +94,6 @@
- -
-

开源社区区域分布

-
-
-
-
-
-

高危组件 Top 10

@@ -139,54 +102,6 @@
- -
-

OSS Compass 开源项目排行

-
-
-
-
-
- - -
-

武汉开源开发者排行榜

-
-
-
-
-
- - -
-

2025武汉市优秀开源软件项目

- -
-
-
- {{ index + 1 }} -
- {{ item.name }} - {{ item.desc }} -
- {{ item.org }} -
-
-
-
- - -

CVE 月度趋势

@@ -215,6 +130,15 @@
+ + +
+

漏洞语言分布

+
+
+
+
+
@@ -419,6 +343,85 @@ const chartData = ref({ { name: 'Go', data: [60, 65, 70, 72, 75] } ] }, + // 编程语言使用趋势数据 + languageTrend: { + years: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'], + series: [ + { + name: 'JavaScript', + type: 'established', + color: '#FAC858', + data: [65, 64, 69, 70, 69, 65, 61, 61] + }, + { + name: 'Python', + type: 'established', + color: '#5470C6', + data: [32, 41, 49, 55, 52, 53, 54, 60] + }, + { + name: 'HTML/CSS', + type: 'established', + color: '#91CC75', + data: [60, 55, 61, 61, 60, 54, 52, 52] + }, + { + name: 'SQL', + type: 'established', + color: '#9254DE', + data: [42, 47, 56, 56, 54, 49, 52, 50] + }, + { + name: 'Java', + type: 'established', + color: '#EE6666', + data: [47, 51, 50, 54, 49, 48, 49, 49] + }, + { + name: 'TypeScript', + type: 'emerging', + color: '#73C0DE', + data: [12, 17, 25, 28, 29, 34, 34, 50] + }, + { + name: 'Shell', + type: 'established', + color: '#52C41A', + data: [29, 29, 40, 39, 37, 34, 34, 41] + }, + { + name: 'C++', + type: 'established', + color: '#FF6E00', + data: [17, 18, 20, 27, 23, 25, 25, 21] + }, + { + name: 'C#', + type: 'established', + color: '#722ED1', + data: [20, 22, 24, 22, 21, 23, 21, 19] + }, + { + name: 'Go', + type: 'emerging', + color: '#00DDFF', + data: [8, 12, 18, 19, 17, 19, 17, 14] + }, + { + name: 'PHP', + type: 'declining', + color: '#F5222D', + data: [30, 26, 29, 27, 32, 20, 18, 15] + }, + { + name: 'Rust', + type: 'emerging', + color: '#FC8452', + data: [2, 2, 5, 7, 6, 9, 10, 10] + } + ] + }, + // 高危组件数据（基于真实开源项目使用情况和漏洞统计） highRiskComponent: [ { name: 'Log4j2', cvss: 9.8, vulnCount: 15, usage: '1200万+', desc: 'CVE-2021-44228等严重RCE漏洞' }, @@ -1029,6 +1032,77 @@ const initHighRiskComponentChart = () => { }); }; +// 初始化编程语言使用趋势堆叠面积图 +const initLanguageTrendChart = () => { + const el = document.getElementById('languageTrendChart'); + if (!el) return; + + if (chartInstances.value.languageTrendChart) { + chartInstances.value.languageTrendChart.dispose(); + } + + const myChart = echarts.init(el); + chartInstances.value.languageTrendChart = myChart; + + // 准备堆叠面积图数据 + const series = chartData.value.languageTrend.series.map(item => ({ + name: item.name, + type: 'line', + stack: '总量', + areaStyle: { + color: item.color + }, + lineStyle: { + width: 1, + color: item.color + }, + symbol: 'none', + data: item.data + })); + + myChart.setOption({ + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + }, + formatter: (params: any) => { + let res = `
${params[0].name}年
`; + params.forEach((p: any) => { + res += `
${p.seriesName}: ${p.value}%
`; + }); + return res; + } + }, + legend: { + top: 0, + textStyle: { fontSize: 12 }, + data: chartData.value.languageTrend.series.map(item => item.name) + }, + grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: chartData.value.languageTrend.years, + axisLabel: { fontSize: 12 } + } + ], + yAxis: [ + { + type: 'value', + name: '使用率(%)', + nameTextStyle: { fontSize: 12 }, + axisLabel: { fontSize: 12 } + } + ], + series: series + }); +}; + // 初始化武汉市语言与技术竞争趋势（折线图） const initLanguageTechChart = () => { const el = document.getElementById('languageTechChart'); @@ -1102,7 +1176,8 @@ const initCharts = () => { highRiskComponent: chartData.value.highRiskComponent.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) + chartData.value.cveData.regional.cveCount.every(item => item === 0), + languageTrend: chartData.value.languageTrend.series.every(s => s.data.every(d => d === 0)) }; // 初始化各图表 @@ -1114,6 +1189,7 @@ const initCharts = () => { if (!isEmpty.value.highRiskComponent) nextTick(() => initHighRiskComponentChart()); if (!isEmpty.value.industryDistribution) nextTick(() => initIndustryDistributionChart()); if (!isEmpty.value.cveData) nextTick(() => initCVEChart()); + if (!isEmpty.value.languageTrend) nextTick(() => initLanguageTrendChart()); }; // 页面resize时重绘图表 @@ -1346,7 +1422,7 @@ onMounted(() => { font-size: 1.1rem; font-weight: 600; margin: 0 0 1rem 0; - text-align: center; + text-align: left; } .chartCard__container {