From e67c386cb7289ca7e226e7e4d6cc8c3c7f745866 Mon Sep 17 00:00:00 2001 From: d266377 Date: Thu, 29 Jan 2026 11:42: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?=E8=AF=AD=E8=A8=80=E4=B8=8E=E6=8A=80=E6=9C=AF=E7=AB=9E=E4=BA=89?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Jyh/ecosystem/index.vue | 125 +++++++++++++++++++++++------- 1 file changed, 97 insertions(+), 28 deletions(-) diff --git a/src/views/Jyh/ecosystem/index.vue b/src/views/Jyh/ecosystem/index.vue index 7cb7323..458f3a4 100644 --- a/src/views/Jyh/ecosystem/index.vue +++ b/src/views/Jyh/ecosystem/index.vue @@ -130,7 +130,8 @@
-
+
加载中...
+
@@ -225,7 +226,7 @@ import VitalityWaveChart from './components/VitalityWaveChart.vue' import StatsGlass from './components/StatsGlass.vue' import StarDevelopersChart from './components/StarDevelopersChart.vue' import { usePageResize } from '@/utils/hooks/usePageResize'; -import { projectHeatMapPage2, rawEnterpriseDataPage2 } from '@/api/jyh/situation'; +import { projectHeatMapPage2, rawEnterpriseDataPage2, languageTechPage2 } from '@/api/jyh/situation'; // 页面尺寸响应式 const { widthType } = usePageResize(); @@ -433,27 +434,10 @@ const chartData = ref({ } ], - - // 语言与技术竞争（南丁格尔玫瑰图数据） + // 语言与技术竞争（南丁格尔玫瑰图数据）- 将被计算属性替代 languageTech: { - // 主流语言数据（基于2025年数据，增长率为2024→2025的变化） - mainstream: [ - { name: 'JavaScript', value: 61, growth: 0 }, - { name: 'Python', value: 57, growth: 0 }, - { name: 'HTML/CSS', value: 52, growth: 1.96 }, - { name: 'Java', value: 49, growth: 6.52 }, - { name: 'SQL', value: 47, growth: -2.08 }, - { name: 'Shell', value: 36, growth: 0 } - ], - // 新兴语言数据（基于2025年数据，增长率为2024→2025的变化） - emerging: [ - { name: 'TypeScript', value: 42, growth: 13.51 }, - { name: 'C++', value: 25, growth: 0 }, - { name: 'C#', value: 21, growth: -4.55 }, - { name: 'Go', value: 20, growth: 11.11 }, - { name: 'Kotlin', value: 18, growth: 28.57 }, - { name: 'C', value: 18, growth: 0 } - ] + mainstream: [], + emerging: [] } }); @@ -465,6 +449,13 @@ const isEmpty = ref({ // 语言图表Tab状态 const languageTab = ref<'mainstream' | 'emerging'>('mainstream'); +// 定义语言与技术竞争数据结构 +interface LanguageTechDataItem { + growth: number; + name: string; + value: number; +} + // 定义热力图数据结构 interface HeatmapDataItem { developer: number; @@ -474,6 +465,82 @@ interface HeatmapDataItem { repo: number; } +// 语言与技术竞争数据 +const languageTechData = ref<{ mainstream: LanguageTechDataItem[], emerging: LanguageTechDataItem[] }>({ + mainstream: [], + emerging: [] +}); +const languageTechLoading = ref(true); + +// 从API获取语言与技术竞争数据 +const fetchLanguageTechData = async () => { + try { + languageTechLoading.value = true; + const response = await languageTechPage2(); + + if (response.code === 0 && response.data) { + // 将API返回的数据按类型分类 + const mainstreamLanguages = ['JavaScript', 'Python', 'HTML/CSS', 'Java', 'SQL', 'Shell']; + const emergingLanguages = ['TypeScript', 'C++', 'C#', 'Go', 'Kotlin', 'C']; + + const allData = response.data || []; + + languageTechData.value = { + mainstream: allData.filter(item => mainstreamLanguages.includes(item.name)), + emerging: allData.filter(item => emergingLanguages.includes(item.name)) + }; + } else { + console.error('获取语言与技术竞争数据失败:', response.msg || '未知错误'); + // 设置默认数据 + languageTechData.value = { + // 主流语言数据（基于2025年数据，增长率为2024→2025的变化） + mainstream: [ + { name: 'JavaScript', value: 61, growth: 0 }, + { name: 'Python', value: 57, growth: 0 }, + { name: 'HTML/CSS', value: 52, growth: 1.96 }, + { name: 'Java', value: 49, growth: 6.52 }, + { name: 'SQL', value: 47, growth: -2.08 }, + { name: 'Shell', value: 36, growth: 0 } + ], + // 新兴语言数据（基于2025年数据，增长率为2024→2025的变化） + emerging: [ + { name: 'TypeScript', value: 42, growth: 13.51 }, + { name: 'C++', value: 25, growth: 0 }, + { name: 'C#', value: 21, growth: -4.55 }, + { name: 'Go', value: 20, growth: 11.11 }, + { name: 'Kotlin', value: 18, growth: 28.57 }, + { name: 'C', value: 18, growth: 0 } + ] + }; + } + } catch (error) { + console.error('获取语言与技术竞争数据异常:', error); + // 设置默认数据 + languageTechData.value = { + // 主流语言数据（基于2025年数据，增长率为2024→2025的变化） + mainstream: [ + { name: 'JavaScript', value: 61, growth: 0 }, + { name: 'Python', value: 57, growth: 0 }, + { name: 'HTML/CSS', value: 52, growth: 1.96 }, + { name: 'Java', value: 49, growth: 6.52 }, + { name: 'SQL', value: 47, growth: -2.08 }, + { name: 'Shell', value: 36, growth: 0 } + ], + // 新兴语言数据（基于2025年数据，增长率为2024→2025的变化） + emerging: [ + { name: 'TypeScript', value: 42, growth: 13.51 }, + { name: 'C++', value: 25, growth: 0 }, + { name: 'C#', value: 21, growth: -4.55 }, + { name: 'Go', value: 20, growth: 11.11 }, + { name: 'Kotlin', value: 18, growth: 28.57 }, + { name: 'C', value: 18, growth: 0 } + ] + }; + } finally { + languageTechLoading.value = false; + } +}; + // 开源项目热力图数据 [OpenRank, 活跃仓库数, 活跃开发者数, 项目名称, 所属组织] const heatmapData = ref([]); const loading = ref(true); @@ -771,8 +838,8 @@ const initLanguageTechChart = () => { chartInstances.value.languageTechChart = myChart; const currentData = languageTab.value === 'mainstream' - ? chartData.value.languageTech.mainstream - : chartData.value.languageTech.emerging; + ? languageTechData.value.mainstream + : languageTechData.value.emerging; myChart.setOption({ graphic: { @@ -1307,19 +1374,21 @@ const initHeatmapChart = () => { const initCharts = () => { // 空数据判断 isEmpty.value = { - languageTech: chartData.value.languageTech.mainstream.length === 0 && chartData.value.languageTech.emerging.length === 0 + languageTech: languageTechData.value.mainstream.length === 0 && languageTechData.value.emerging.length === 0 }; // 初始化各图表 - if (!isEmpty.value.languageTech) nextTick(() => initLanguageTechChart()); + if (!isEmpty.value.languageTech && !languageTechLoading.value) nextTick(() => initLanguageTechChart()); nextTick(() => initHeatmapChart()); }; -// 获取企业数据和热力图数据并初始化图表 +// 获取企业数据、语言技术数据和热力图数据并初始化图表 onMounted(async () => { await fetchEnterpriseData(); // 等待企业数据获取完成 + await fetchLanguageTechData(); // 等待语言技术数据获取完成 await fetchHeatmapData(); // 等待热力图数据获取完成 - nextTick(() => initHeatmapChart()); // 数据加载完成后初始化图表 + nextTick(() => initLanguageTechChart()); // 数据加载完成后初始化语言技术图表 + nextTick(() => initHeatmapChart()); // 数据加载完成后初始化热力图 }); // 页面resize时重绘图表