From 3ffe0716e66125605be64b6e89bd3d5b7e616e39 Mon Sep 17 00:00:00 2001 From: d266377 Date: Wed, 28 Jan 2026 10:12:57 +0800 Subject: [PATCH] =?UTF-8?q?=E6=80=81=E5=8A=BF=E6=84=9F=E7=9F=A5=E5=B9=B3?= =?UTF-8?q?=E5=8F=B0-=E5=BC=80=E6=BA=90=E7=94=9F=E6=80=81=E4=B8=8E?= =?UTF-8?q?=E8=B4=A1=E7=8C=AE=E4=BB=B7=E5=80=BC=E5=85=A8=E6=99=AF-?= =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E6=B2=BB=E7=90=86=E5=81=A5=E5=BA=B7=E5=BA=A6?= =?UTF-8?q?=E5=AF=B9=E6=AF=94=E7=BB=84=E4=BB=B6=E6=8A=BD=E7=A6=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CommunityGovernanceHealthChart.vue | 353 ++++++++++++++++++ src/views/Jyh/ecosystem/index.vue | 271 +------------- 2 files changed, 357 insertions(+), 267 deletions(-) create mode 100644 src/views/Jyh/ecosystem/components/CommunityGovernanceHealthChart.vue diff --git a/src/views/Jyh/ecosystem/components/CommunityGovernanceHealthChart.vue b/src/views/Jyh/ecosystem/components/CommunityGovernanceHealthChart.vue new file mode 100644 index 0000000..4fa8095 --- /dev/null +++ b/src/views/Jyh/ecosystem/components/CommunityGovernanceHealthChart.vue @@ -0,0 +1,353 @@ + + + + + \ No newline at end of file diff --git a/src/views/Jyh/ecosystem/index.vue b/src/views/Jyh/ecosystem/index.vue index ff5232a..b644624 100644 --- a/src/views/Jyh/ecosystem/index.vue +++ b/src/views/Jyh/ecosystem/index.vue @@ -137,13 +137,7 @@ -
-

社区治理健康度对比

-
-
-
-
-
+
@@ -281,6 +275,7 @@ import * as echarts from 'echarts'; import TalentMapChart from './TalentMapChart.vue' import InfrastructureCoverageChart from './components/InfrastructureCoverageChart.vue' import UniversityClubStatsChart from './components/UniversityClubStatsChart.vue' +import CommunityGovernanceHealthChart from './components/CommunityGovernanceHealthChart.vue' import { usePageResize } from '@/utils/hooks/usePageResize'; // 页面尺寸响应式 @@ -445,71 +440,8 @@ const chartData = ref({ radius: ['30%', '40%'] } ], - // 高校开源社团/俱乐部数据(来自 UniversityClubStatsChart.vue) - universityClubs: [ - // 华东地区 - { university: '上海交通大学', club: 'SJTU-LUG (Linux User Group)' }, - { university: '上海交通大学', club: '开放原子开源俱乐部' }, - { university: '复旦大学', club: 'Fudan LUG' }, - { university: '复旦大学', club: '开放原子开源俱乐部' }, - { university: '浙江大学', club: 'ZJU-LUG' }, - { university: '浙江大学', club: 'AAA (Azure Availability Association)' }, - { university: '浙江大学', club: '开放原子开源俱乐部' }, - { university: '南京大学', club: 'NJU-LUG' }, - { university: '南京大学', club: 'eScience 协会' }, - { university: '南京大学', club: '开放原子开源俱乐部' }, - { university: '中国科学技术大学', club: 'USTC-LUG' }, - { university: '中国科学技术大学', club: 'VLAB' }, - { university: '同济大学', club: 'Tongji LUG' }, - { university: '同济大学', club: '开放原子开源俱乐部' }, - { university: '华东师范大学', club: 'ECNU LUG' }, - // 华北地区 - { university: '清华大学', club: 'TUNA (清华大学学生网络与开源软件协会)' }, - { university: '清华大学', club: '开放原子开源俱乐部' }, - { university: '北京大学', club: 'PKUOSC (北京大学开源软件协会)' }, - { university: '北京大学', club: 'PKU-LUG' }, - { university: '北京邮电大学', club: 'BYR Team' }, - { university: '北京邮电大学', club: '开放原子开源俱乐部' }, - { university: '北京航空航天大学', club: 'BUAA LUG' }, - { university: '北京航空航天大学', club: '开放原子开源俱乐部' }, - { university: '中国科学院大学', club: 'UCAS LUG' }, - { university: '天津大学', club: 'TJU LUG' }, - { university: '南开大学', club: 'NKU LUG' }, - { university: '哈尔滨工业大学', club: 'HIT LUG' }, - { university: '哈尔滨工业大学', club: '开放原子开源俱乐部' }, - // 华中/华南地区 - { university: '华中科技大学', club: 'HUST LUG' }, - { university: '华中科技大学', club: '联创团队' }, - { university: '华中科技大学', club: '开放原子开源俱乐部' }, - { university: '武汉大学', club: 'WHU LUG' }, - { university: '武汉大学', club: '网络安全协会' }, - { university: '中山大学', club: 'SYSU LUG' }, - { university: '南方科技大学', club: 'SUSTech CRA' }, - { university: '南方科技大学', club: '开放原子开源俱乐部' }, - { university: '深圳大学', club: 'SZU LUG' }, - { university: '深圳大学', club: '开放原子开源俱乐部' }, - // 西部/其他地区 - { university: '电子科技大学', club: 'UESTC LUG' }, - { university: '电子科技大学', club: '星辰工作室' }, - { university: '电子科技大学', club: '开放原子开源俱乐部' }, - { university: '四川大学', club: 'SCU LUG' }, - { university: '西安电子科技大学', club: 'XDU LUG' }, - { university: '西安电子科技大学', club: '开放原子开源俱乐部' }, - { university: '兰州大学', club: 'LZU LUG' }, - { university: '兰州大学', club: '开放原子开源俱乐部' }, - { university: '重庆邮电大学', club: 'Redrock 团队' }, - { university: '重庆邮电大学', club: 'LUG' }, - { university: '湖南大学', club: 'HNU LUG' }, - { university: '中南大学', club: 'CSU LUG' }, - { university: '山东大学', club: 'SDU LUG' }, - { university: '厦门大学', club: 'XMU LUG' } - ], - // 社区治理健康度对比(来自 CommunityGovernanceHealth.vue) - communityHealth: { - indicators: ['PR 合并率', 'Issue 响应时间', 'CI/CD 使用率', '平均代码质量得分', '安全审计频率', '贡献者多样性'], - github: [82, 88, 78, 85, 75, 80], - gitcode: [68, 75, 55, 72, 60, 65] - }, + + // 语言与技术竞争(南丁格尔玫瑰图数据) languageTech: { // 主流语言数据(基于2025年数据,增长率为2024→2025的变化) @@ -539,7 +471,6 @@ const chartData = ref({ // 空数据标识 const isEmpty = ref({ - communityHealth: false, languageTech: false }); @@ -607,7 +538,6 @@ const getTalentLevel = (density: number) => { // 图表实例存储(用于resize时销毁重绘) const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({ - communityHealthChart: null, languageTechChart: null, vitalityChart: null, heatmapChart: null @@ -758,195 +688,6 @@ const formatDevs = (num: number) => { }; // ===================== 新增结束 ===================== - - - - -// 初始化社区治理健康度对比(纵向柱状图) -const initCommunityHealthChart = () => { - const el = document.getElementById('ossCompassChart'); - if (!el) return; - - if (chartInstances.value.communityHealthChart) { - chartInstances.value.communityHealthChart.dispose(); - } - - const myChart = echarts.init(el); - chartInstances.value.communityHealthChart = myChart; - - const data = chartData.value.communityHealth; - - myChart.setOption({ - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - shadowStyle: { - color: 'rgba(59, 130, 246, 0.1)' - } - }, - backgroundColor: 'rgba(255, 255, 255, 0.98)', - borderColor: '#3b82f6', - borderWidth: 2, - borderRadius: 8, - padding: 16, - textStyle: { color: '#333', fontSize: 13 }, - extraCssText: 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);', - formatter: (params: any) => { - const indicator = params[0].name; - const githubValue = params[0].value; - const gitcodeValue = params[1].value; - const diff = githubValue - gitcodeValue; - const diffPercent = ((diff / githubValue) * 100).toFixed(1); - - return ` -
-
${indicator}
-
- - GitHub 社区 - ${githubValue} -
-
- - GitCode 社区 - ${gitcodeValue} -
- ${diff > 0 ? `
📊 GitHub 领先 ${diffPercent}%
` : ''} -
- `; - } - }, - legend: { - data: ['GitHub 社区', 'GitCode 社区'], - top: '2%', - right: '5%', - itemWidth: 14, - itemHeight: 14, - itemGap: 15, - textStyle: { - color: '#333', - fontSize: 12, - fontWeight: '600' - }, - icon: 'roundRect' - }, - grid: { - left: '5%', - right: '5%', - bottom: '8%', - top: '15%', - containLabel: true - }, - xAxis: { - type: 'category', - data: data.indicators, - axisLabel: { - fontSize: 11, - color: '#666', - fontWeight: '500', - interval: 0, - rotate: 20, - margin: 12 - }, - axisTick: { - alignWithLabel: true, - length: 5 - }, - axisLine: { - lineStyle: { color: '#e5e7eb', width: 2 } - } - }, - yAxis: { - type: 'value', - name: '健康度得分', - nameTextStyle: { - fontSize: 13, - color: '#666', - fontWeight: '600', - padding: [0, 0, 0, 10] - }, - max: 100, - axisLabel: { - fontSize: 12, - color: '#666', - formatter: '{value}' - }, - splitLine: { - lineStyle: { - color: 'rgba(0, 0, 0, 0.06)', - type: 'dashed' - } - } - }, - series: [ - { - name: 'GitHub 社区', - type: 'bar', - data: data.github, - barWidth: '35%', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ - { offset: 0, color: '#FF4900' }, - { offset: 0.5, color: '#BF232A' }, - { offset: 1, color: '#BF232A' } - ]), - borderRadius: [6, 6, 0, 0], - shadowBlur: 10, - shadowColor: 'rgba(191, 35, 42, 0.3)' - }, - label: { - show: true, - position: 'top', - formatter: '{c}', - fontSize: 11, - color: '#BF232A', - fontWeight: 'bold' - }, - emphasis: { - itemStyle: { - shadowBlur: 20, - shadowColor: 'rgba(191, 35, 42, 0.6)' - } - } - }, - { - name: 'GitCode 社区', - type: 'bar', - data: data.gitcode, - barWidth: '35%', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ - { offset: 0, color: '#FFAB00' }, - { offset: 0.5, color: '#FF4900' }, - { offset: 1, color: '#FF4900' } - ]), - borderRadius: [6, 6, 0, 0], - shadowBlur: 10, - shadowColor: 'rgba(255, 73, 0, 0.3)' - }, - label: { - show: true, - position: 'top', - formatter: '{c}', - fontSize: 11, - color: '#FF4900', - fontWeight: 'bold' - }, - emphasis: { - itemStyle: { - shadowBlur: 20, - shadowColor: 'rgba(255, 73, 0, 0.6)' - } - } - } - ], - animationDuration: 1000, - animationEasing: 'cubicOut', - animationDelay: (idx: number) => idx * 80 - }); -}; - // 根据增长率动态生成颜色的函数 const getColorByGrowth = (growth: number, tab: string) => { const minGrowth = -5; @@ -1768,12 +1509,10 @@ const initHeatmapChart = () => { const initCharts = () => { // 空数据判断 isEmpty.value = { - communityHealth: chartData.value.communityHealth.github.every(item => item === 0), languageTech: chartData.value.languageTech.mainstream.length === 0 && chartData.value.languageTech.emerging.length === 0 }; // 初始化各图表 - if (!isEmpty.value.communityHealth) nextTick(() => initCommunityHealthChart()); if (!isEmpty.value.languageTech) nextTick(() => initLanguageTechChart()); nextTick(() => initVitalityChart()); nextTick(() => initHeatmapChart()); @@ -2807,8 +2546,6 @@ onMounted(() => { pointer-events: none; } - - /* 热力图特殊样式 */ .heatmap-section { position: relative;