diff --git a/src/api/jyh/situation.ts b/src/api/jyh/situation.ts index 0feb54f..49e62ba 100644 --- a/src/api/jyh/situation.ts +++ b/src/api/jyh/situation.ts @@ -210,9 +210,9 @@ export function excellentDeveloperPage2(params?: any): Promise { } // 开源生态与贡献价值全景-开发者活力波形图 -export function vitalityDataPage2(params?: any): Promise { +export function vitalityPage2(params?: any): Promise { return request({ - url: `/api/v1/page2/vitalityData`, + url: `/api/v1/page2/vitality`, method: 'get', params }); diff --git a/src/views/Jyh/ecosystem/components/VitalityWaveChart.vue b/src/views/Jyh/ecosystem/components/VitalityWaveChart.vue index 6f5ea91..6e5cdcd 100644 --- a/src/views/Jyh/ecosystem/components/VitalityWaveChart.vue +++ b/src/views/Jyh/ecosystem/components/VitalityWaveChart.vue @@ -8,7 +8,8 @@ 开发者活力波形图
-
+
加载中...
+
@@ -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: ["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] + 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(() => {