diff --git a/src/views/Jyh/ecosystem/index.vue b/src/views/Jyh/ecosystem/index.vue
index 6e06fb2..bb0a4a0 100644
--- a/src/views/Jyh/ecosystem/index.vue
+++ b/src/views/Jyh/ecosystem/index.vue
@@ -194,7 +194,8 @@
大量开发者
-
+
+ 加载中...
@@ -224,6 +225,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 } from '@/api/jyh/situation';
// 页面尺寸响应式
const { widthType } = usePageResize();
@@ -340,8 +342,6 @@ const excellentProjects = computed(() => {
}));
});
-
-
// 3. 图表数据定义
const chartData = ref({
// 基础设施覆盖率(来自 InfrastructureCoverageRings.vue)
@@ -390,10 +390,6 @@ const chartData = ref({
}
});
-
-
-
-
// 空数据标识
const isEmpty = ref({
languageTech: false
@@ -402,34 +398,93 @@ const isEmpty = ref({
// 语言图表Tab状态
const languageTab = ref<'mainstream' | 'emerging'>('mainstream');
-
+// 定义热力图数据结构
+interface HeatmapDataItem {
+ developer: number;
+ openrank: number;
+ org: string;
+ project: string;
+ repo: number;
+}
// 开源项目热力图数据 [OpenRank, 活跃仓库数, 活跃开发者数, 项目名称, 所属组织]
-const heatmapData = ref([
- [67538.71, 29433, 1409, 'OpenHarmony', 'Huawei'],
- [55000, 15000, 6000, 'Linux', 'Linux Foundation'],
- [60000, 8000, 7000, 'Android', 'Google'],
- [52000, 20000, 5500, 'Chromium', 'Google'],
- [38000, 16000, 4500, 'TensorFlow', 'Google'],
- [42000, 13000, 5000, 'React', 'Meta'],
- [45417.67, 18000, 8629, 'Azure', 'Microsoft'],
- [35000, 22000, 5000, 'Kubernetes', 'CNCF'],
- [21844.62, 12340, 57, 'LLM', '发芽工具'],
- [25241.13, 8000, 83, 'NixOS', '-'],
- [22961.09, 4500, 9377, 'openEuler', 'Huawei'],
- [17795.41, 2792, 975, 'DataDog', 'DataDog'],
- [25598.21, 2082, 282, '.Net', '操作系统'],
- [7405.46, 9639, 3, 'Expensify', 'Expensify'],
- [8862.2, 4625, 120, 'PaddlePaddle', 'Baidu'],
- [12959.59, 2363, 1, 'Odoo', 'Odoo'],
- [12326.76, 881, 179, 'Rust', 'Rust Foundation'],
- [6778.7, 400, 479, 'CloudHarmony', '企业应用']
-]);
+const heatmapData = ref([]);
+const loading = ref(true);
+
+// 从API获取数据
+const fetchHeatmapData = async () => {
+ try {
+ loading.value = true;
+ const response = await projectHeatMapPage2();
+
+ if (response.code === 0 && response.data) {
+ // 转换API返回的数据格式为图表所需格式
+ heatmapData.value = response.data.map((item: HeatmapDataItem) => [
+ item.openrank,
+ item.repo,
+ item.developer,
+ item.project,
+ item.org
+ ]);
+ } else {
+ console.error('获取热力图数据失败:', response.msg || '未知错误');
+ // 设置默认数据
+ heatmapData.value = [
+ [67538.71, 29433, 1409, 'OpenHarmony', 'Huawei'],
+ [55000, 15000, 6000, 'Linux', 'Linux Foundation'],
+ [60000, 8000, 7000, 'Android', 'Google'],
+ [52000, 20000, 5500, 'Chromium', 'Google'],
+ [38000, 16000, 4500, 'TensorFlow', 'Google'],
+ [42000, 13000, 5000, 'React', 'Meta'],
+ [45417.67, 18000, 8629, 'Azure', 'Microsoft'],
+ [35000, 22000, 5000, 'Kubernetes', 'CNCF'],
+ [21844.62, 12340, 57, 'LLM', '发芽工具'],
+ [25241.13, 8000, 83, 'NixOS', '-'],
+ [22961.09, 4500, 9377, 'openEuler', 'Huawei'],
+ [17795.41, 2792, 975, 'DataDog', 'DataDog'],
+ [25598.21, 2082, 282, '.Net', '操作系统'],
+ [7405.46, 9639, 3, 'Expensify', 'Expensify'],
+ [8862.2, 4625, 120, 'PaddlePaddle', 'Baidu'],
+ [12959.59, 2363, 1, 'Odoo', 'Odoo'],
+ [12326.76, 881, 179, 'Rust', 'Rust Foundation'],
+ [6778.7, 400, 479, 'CloudHarmony', '企业应用']
+ ];
+ }
+ } catch (error) {
+ console.error('获取热力图数据异常:', error);
+ // 设置默认数据
+ heatmapData.value = [
+ [67538.71, 29433, 1409, 'OpenHarmony', 'Huawei'],
+ [55000, 15000, 6000, 'Linux', 'Linux Foundation'],
+ [60000, 8000, 7000, 'Android', 'Google'],
+ [52000, 20000, 5500, 'Chromium', 'Google'],
+ [38000, 16000, 4500, 'TensorFlow', 'Google'],
+ [42000, 13000, 5000, 'React', 'Meta'],
+ [45417.67, 18000, 8629, 'Azure', 'Microsoft'],
+ [35000, 22000, 5000, 'Kubernetes', 'CNCF'],
+ [21844.62, 12340, 57, 'LLM', '发芽工具'],
+ [25241.13, 8000, 83, 'NixOS', '-'],
+ [22961.09, 4500, 9377, 'openEuler', 'Huawei'],
+ [17795.41, 2792, 975, 'DataDog', 'DataDog'],
+ [25598.21, 2082, 282, '.Net', '操作系统'],
+ [7405.46, 9639, 3, 'Expensify', 'Expensify'],
+ [8862.2, 4625, 120, 'PaddlePaddle', 'Baidu'],
+ [12959.59, 2363, 1, 'Odoo', 'Odoo'],
+ [12326.76, 881, 179, 'Rust', 'Rust Foundation'],
+ [6778.7, 400, 479, 'CloudHarmony', '企业应用']
+ ];
+ } finally {
+ loading.value = false;
+ }
+};
// 计算热力图统计数据
const topProject = computed(() => {
const sorted = [...heatmapData.value].sort((a, b) => b[0] - a[0]);
- return { name: sorted[0][3], openrank: sorted[0][0] };
+ if (heatmapData.value.length > 0) {
+ return { name: sorted[0][3], openrank: sorted[0][0] };
+ }
+ return { name: '-', openrank: 0 };
});
const totalDevs = computed(() => {
@@ -1193,6 +1248,12 @@ const initCharts = () => {
nextTick(() => initHeatmapChart());
};
+// 获取热力图数据并初始化图表
+onMounted(async () => {
+ await fetchHeatmapData(); // 等待数据获取完成
+ nextTick(() => initHeatmapChart()); // 数据加载完成后初始化图表
+});
+
// 页面resize时重绘图表
watch(widthType, () => {
initCharts();
@@ -2355,6 +2416,22 @@ onMounted(() => {
rgba(236, 72, 153, 0.02) 100%);
border: 1px solid rgba(59, 130, 246, 0.1);
position: relative;
+ min-height: 400px;
+}
+
+.heatmap-container .num-empty {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 16px;
+ color: #999;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
}
.heatmap-legend {