态势感知平台-开源生态与贡献价值全景-语言与技术竞争接口对接

src/views/Jyh/ecosystem/index.vue

@@ -130,7 +130,8 @@
               </div>
             </div>
             <div class="chartCard__container">
-              <div class="num-empty" v-if="isEmpty.languageTech"></div>
+              <div v-if="languageTechLoading" class="loading-indicator">加载中...</div>
+              <div v-else-if="isEmpty.languageTech" class="num-empty"></div>
               <div v-else id="languageTechChart" class="chart"></div>
             </div>
           </div>
@@ -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<any[]>([]);
 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时重绘图表