态势感知平台-开源生态与贡献价值全景-开发者活力波形图接口对接

src/api/jyh/situation.ts

@@ -210,9 +210,9 @@ export function excellentDeveloperPage2(params?: any): Promise<any> {
 }
 
 // 开源生态与贡献价值全景-开发者活力波形图
-export function vitalityDataPage2(params?: any): Promise<any> {
+export function vitalityPage2(params?: any): Promise<any> {
   return request({
-    url: `/api/v1/page2/vitalityData`,
+    url: `/api/v1/page2/vitality`,
     method: 'get',
     params
   });

src/views/Jyh/ecosystem/components/VitalityWaveChart.vue

@@ -8,7 +8,8 @@
       <span>开发者活力波形图</span>
     </h3>
     <div class="vitality__container">
-      <div id="vitalityChart" class="chart"></div>
+      <div class="num-empty" v-if="loading">加载中...</div>
+      <div id="vitalityChart" class="chart" v-else></div>
     </div>
   </div>
 </template>
@@ -17,16 +18,77 @@
 import { onMounted, ref, nextTick, watch } from 'vue';
 import * as echarts from 'echarts';
 import { usePageResize } from '@/utils/hooks/usePageResize';
+import { vitalityPage2 } from '@/api/jyh/situation';
 
 // 页面尺寸响应式
 const { widthType } = usePageResize();
 
+// 定义数据结构
+interface VitalityItem {
+  timeData: string;
+  total: number;
+}
+
 // 开发者活力数据
 const vitalityData = ref({
+  timeData: [] as string[],
+  total: [] as number[],
+  new: [] as number[]  // 默认数据，因为API只返回timeData和total
+});
+const loading = ref(true);
+
+// 从API获取数据
+const fetchDataFromApi = async () => {
+  try {
+    loading.value = true;
+    const response = await vitalityPage2();
+    
+    if (response.code === 0 && response.data) {
+      // 提取API返回的数据
+      const apiTimeData: string[] = [];
+      const apiTotalData: number[] = [];
+      
+      response.data.forEach((item: VitalityItem) => {
+        apiTimeData.push(item.timeData);
+        apiTotalData.push(item.total);
+      });
+      
+      // 计算年度新增数据（相邻年份的差值）
+      const apiNewData: number[] = [];
+      for (let i = 0; i < apiTotalData.length; i++) {
+        if (i === 0) {
+          apiNewData.push(apiTotalData[i]); // 第一年的新增就是当年总数
+        } else {
+          apiNewData.push(apiTotalData[i] - apiTotalData[i - 1]); // 后续年份为差值
+        }
+      }
+      
+      vitalityData.value = {
+        timeData: apiTimeData,
+        total: apiTotalData,
+        new: apiNewData
+      };
+    } else {
+      console.error('获取开发者活力数据失败:', response.msg || '未知错误');
+      // 设置默认数据
+      vitalityData.value = {
         timeData: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024"],
         total: [20, 50, 100, 200, 300, 400, 600, 800, 1000, 1200, 1350],
         new: [20, 30, 50, 100, 100, 100, 200, 200, 200, 200, 150]
-});
+      };
+    }
+  } catch (error) {
+    console.error('获取开发者活力数据异常:', error);
+    // 设置默认数据
+    vitalityData.value = {
+      timeData: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024"],
+      total: [20, 50, 100, 200, 300, 400, 600, 800, 1000, 1200, 1350],
+      new: [20, 30, 50, 100, 100, 100, 200, 200, 200, 200, 150]
+    };
+  } finally {
+    loading.value = false;
+  }
+};
 
 // 图表实例存储（用于resize时销毁重绘）
 const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({
@@ -265,8 +327,10 @@ watch(widthType, () => {
   nextTick(() => initVitalityChart());
 });
 
-// 挂载时初始化
+// 组件挂载时获取数据
 onMounted(() => {
+  fetchDataFromApi();
+  // 数据加载完成后初始化图表
   setTimeout(() => {
     initVitalityChart();
   }, 100);
@@ -274,6 +338,16 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.num-empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #999;
+}
+
 .index-module__NV_5cW__vitalitySection {
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);