cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

态势感知平台-开源生态与贡献价值全景-中国开源人才密度地图接口对接

Browse Source
This commit is contained in:
d266377
2026-01-29 10:12:33 +08:00
parent 424a0a1de6
commit 5ce6380dea
1 changed files with 166 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/views/Jyh/ecosystem/components/talentMapChart.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="map-container">
<div id="talentMapChart" class="chart"></div>
<div id="talentMapChart" class="chart" v-if="!loading"></div>
<div class="num-empty" v-else>加载中...</div>
<!-- 右侧排行榜 -->
<div class="map-rank-panel">
@@ -22,47 +23,162 @@ import {onMounted, ref, onBeforeUnmount, computed} from 'vue';
// 初始化中国开源人才密度地图
import * as echarts from "echarts";
import geoJson from '../json/china.json';
import { talentMapDataPage2 } from '@/api/jyh/situation';
const talentMapChart = ref()
// 定义数据结构
interface TalentMapItem {
name: string;
density: number;
total: number;
}
// 中国开源人才密度地图数据
const talentMapData = ref([
{ name: '北京市', value: [116.4074, 39.9042, 141.15, 231.47] },
{ name: '上海市', value: [121.4737, 31.2304, 269.83, 169.99] },
{ name: '浙江省', value: [120.1551, 30.2794, 8.94, 90.98] },
{ name: '广东省', value: [113.2644, 23.1291, 7.5, 149.76] },
{ name: '台湾省', value: [121.5090, 25.0443, 32.75, 117.88] },
{ name: '四川省', value: [104.0657, 30.6595, 1.01, 48.7] },
{ name: '江苏省', value: [118.7780, 32.0472, 5.25, 56.28] },
{ name: '湖北省', value: [114.3053, 30.5928, 1.84, 34.09] },
{ name: '福建省', value: [119.3062, 26.0747, 1.39, 16.79] },
{ name: '陕西省', value: [108.9480, 34.2632, 1.04, 21.38] },
{ name: '重庆市', value: [106.5049, 29.5332, 1.61, 13.24] },
{ name: '山东省', value: [120.3331, 36.0670, 1.02, 16.02] },
{ name: '湖南省', value: [112.9822, 28.1944, 0.68, 14.25] },
{ name: '安徽省', value: [117.2830, 31.8611, 0.93, 12.92] },
{ name: '辽宁省', value: [123.4321, 41.8007, 0.77, 11.37] },
{ name: '云南省', value: [102.7123, 25.0406, 0.1, 3.68] },
{ name: '天津市', value: [117.1901, 39.1258, 7.79, 9.34] },
{ name: '河南省', value: [113.6654, 34.7579, 0.55, 9.07] },
{ name: '吉林省', value: [125.3245, 43.8171, 0.15, 2.7] },
{ name: '江西省', value: [115.8581, 28.6820, 0.25, 4.17] },
{ name: '广西壮族自治区', value: [108.3200, 22.8241, 0.14, 3.15] },
{ name: '黑龙江省', value: [126.5349, 45.8038, 0.11, 5.13] },
{ name: '澳门特别行政区', value: [113.5490, 22.1987, 737.5, 2.36] },
{ name: '河北省', value: [114.5024, 38.0454, 0.26, 4.74] },
{ name: '山西省', value: [112.5489, 37.8570, 0.25, 3.78] },
{ name: '贵州省', value: [106.7135, 26.5783, 0.11, 1.93] },
{ name: '内蒙古自治区', value: [111.6708, 40.8183, 0.01, 0.96] },
{ name: '香港特别行政区', value: [114.1095, 22.3964, 1797.7, 197.75] },
{ name: '新疆维吾尔自治区', value: [87.6168, 43.7928, 0.01, 0.77] },
{ name: '甘肃省', value: [103.8235, 36.0580, 0.04, 1.46] },
{ name: '海南省', value: [110.3312, 20.0319, 0.36, 1.25] },
{ name: '宁夏回族自治区', value: [106.2782, 38.4664, 0.05, 0.27] },
{ name: '西藏自治区', value: [91.1175, 29.6469, 0.01, 0.14] },
{ name: '青海省', value: [101.7782, 36.6172, 0.01, 0.18] }
]);
const talentMapData = ref<any[]>([]);
const loading = ref(true);
// 从API获取数据
const fetchDataFromApi = async () => {
try {
loading.value = true;
const response = await talentMapDataPage2();
if (response.code === 0 && response.data) {
// 转换API返回的数据格式为图表所需格式
talentMapData.value = response.data.map((item: TalentMapItem) => {
// 查找省份坐标，如果找不到则使用默认坐标
let coordinates = [104.5, 37.5]; // 默认为中国中心坐标
// 匹配省份坐标
const provinceCoords: Record<string, [number, number]> = {
'北京市': [116.4074, 39.9042],
'上海市': [121.4737, 31.2304],
'浙江省': [120.1551, 30.2794],
'广东省': [113.2644, 23.1291],
'台湾省': [121.5090, 25.0443],
'四川省': [104.0657, 30.6595],
'江苏省': [118.7780, 32.0472],
'湖北省': [114.3053, 30.5928],
'福建省': [119.3062, 26.0747],
'陕西省': [108.9480, 34.2632],
'重庆市': [106.5049, 29.5332],
'山东省': [120.3331, 36.0670],
'湖南省': [112.9822, 28.1944],
'安徽省': [117.2830, 31.8611],
'辽宁省': [123.4321, 41.8007],
'云南省': [102.7123, 25.0406],
'天津市': [117.1901, 39.1258],
'河南省': [113.6654, 34.7579],
'吉林省': [125.3245, 43.8171],
'江西省': [115.8581, 28.6820],
'广西壮族自治区': [108.3200, 22.8241],
'黑龙江省': [126.5349, 45.8038],
'澳门特别行政区': [113.5490, 22.1987],
'河北省': [114.5024, 38.0454],
'山西省': [112.5489, 37.8570],
'贵州省': [106.7135, 26.5783],
'内蒙古自治区': [111.6708, 40.8183],
'香港特别行政区': [114.1095, 22.3964],
'新疆维吾尔自治区': [87.6168, 43.7928],
'甘肃省': [103.8235, 36.0580],
'海南省': [110.3312, 20.0319],
'宁夏回族自治区': [106.2782, 38.4664],
'西藏自治区': [91.1175, 29.6469],
'青海省': [101.7782, 36.6172]
};
const coord = provinceCoords[item.name] || coordinates;
// 返回格式：[经度, 纬度, 密度, 总量]
return {
name: item.name,
value: [coord[0], coord[1], item.density, item.total]
};
});
} else {
console.error('获取人才地图数据失败:', response.msg || '未知错误');
// 设置默认数据
talentMapData.value = [
{ name: '北京市', value: [116.4074, 39.9042, 141.15, 231.47] },
{ name: '上海市', value: [121.4737, 31.2304, 269.83, 169.99] },
{ name: '浙江省', value: [120.1551, 30.2794, 8.94, 90.98] },
{ name: '广东省', value: [113.2644, 23.1291, 7.5, 149.76] },
{ name: '台湾省', value: [121.5090, 25.0443, 32.75, 117.88] },
{ name: '四川省', value: [104.0657, 30.6595, 1.01, 48.7] },
{ name: '江苏省', value: [118.7780, 32.0472, 5.25, 56.28] },
{ name: '湖北省', value: [114.3053, 30.5928, 1.84, 34.09] },
{ name: '福建省', value: [119.3062, 26.0747, 1.39, 16.79] },
{ name: '陕西省', value: [108.9480, 34.2632, 1.04, 21.38] },
{ name: '重庆市', value: [106.5049, 29.5332, 1.61, 13.24] },
{ name: '山东省', value: [120.3331, 36.0670, 1.02, 16.02] },
{ name: '湖南省', value: [112.9822, 28.1944, 0.68, 14.25] },
{ name: '安徽省', value: [117.2830, 31.8611, 0.93, 12.92] },
{ name: '辽宁省', value: [123.4321, 41.8007, 0.77, 11.37] },
{ name: '云南省', value: [102.7123, 25.0406, 0.1, 3.68] },
{ name: '天津市', value: [117.1901, 39.1258, 7.79, 9.34] },
{ name: '河南省', value: [113.6654, 34.7579, 0.55, 9.07] },
{ name: '吉林省', value: [125.3245, 43.8171, 0.15, 2.7] },
{ name: '江西省', value: [115.8581, 28.6820, 0.25, 4.17] },
{ name: '广西壮族自治区', value: [108.3200, 22.8241, 0.14, 3.15] },
{ name: '黑龙江省', value: [126.5349, 45.8038, 0.11, 5.13] },
{ name: '澳门特别行政区', value: [113.5490, 22.1987, 737.5, 2.36] },
{ name: '河北省', value: [114.5024, 38.0454, 0.26, 4.74] },
{ name: '山西省', value: [112.5489, 37.8570, 0.25, 3.78] },
{ name: '贵州省', value: [106.7135, 26.5783, 0.11, 1.93] },
{ name: '内蒙古自治区', value: [111.6708, 40.8183, 0.01, 0.96] },
{ name: '香港特别行政区', value: [114.1095, 22.3964, 1797.7, 197.75] },
{ name: '新疆维吾尔自治区', value: [87.6168, 43.7928, 0.01, 0.77] },
{ name: '甘肃省', value: [103.8235, 36.0580, 0.04, 1.46] },
{ name: '海南省', value: [110.3312, 20.0319, 0.36, 1.25] },
{ name: '宁夏回族自治区', value: [106.2782, 38.4664, 0.05, 0.27] },
{ name: '西藏自治区', value: [91.1175, 29.6469, 0.01, 0.14] },
{ name: '青海省', value: [101.7782, 36.6172, 0.01, 0.18] }
];
}
} catch (error) {
console.error('获取人才地图数据异常:', error);
// 设置默认数据
talentMapData.value = [
{ name: '北京市', value: [116.4074, 39.9042, 141.15, 231.47] },
{ name: '上海市', value: [121.4737, 31.2304, 269.83, 169.99] },
{ name: '浙江省', value: [120.1551, 30.2794, 8.94, 90.98] },
{ name: '广东省', value: [113.2644, 23.1291, 7.5, 149.76] },
{ name: '台湾省', value: [121.5090, 25.0443, 32.75, 117.88] },
{ name: '四川省', value: [104.0657, 30.6595, 1.01, 48.7] },
{ name: '江苏省', value: [118.7780, 32.0472, 5.25, 56.28] },
{ name: '湖北省', value: [114.3053, 30.5928, 1.84, 34.09] },
{ name: '福建省', value: [119.3062, 26.0747, 1.39, 16.79] },
{ name: '陕西省', value: [108.9480, 34.2632, 1.04, 21.38] },
{ name: '重庆市', value: [106.5049, 29.5332, 1.61, 13.24] },
{ name: '山东省', value: [120.3331, 36.0670, 1.02, 16.02] },
{ name: '湖南省', value: [112.9822, 28.1944, 0.68, 14.25] },
{ name: '安徽省', value: [117.2830, 31.8611, 0.93, 12.92] },
{ name: '辽宁省', value: [123.4321, 41.8007, 0.77, 11.37] },
{ name: '云南省', value: [102.7123, 25.0406, 0.1, 3.68] },
{ name: '天津市', value: [117.1901, 39.1258, 7.79, 9.34] },
{ name: '河南省', value: [113.6654, 34.7579, 0.55, 9.07] },
{ name: '吉林省', value: [125.3245, 43.8171, 0.15, 2.7] },
{ name: '江西省', value: [115.8581, 28.6820, 0.25, 4.17] },
{ name: '广西壮族自治区', value: [108.3200, 22.8241, 0.14, 3.15] },
{ name: '黑龙江省', value: [126.5349, 45.8038, 0.11, 5.13] },
{ name: '澳门特别行政区', value: [113.5490, 22.1987, 737.5, 2.36] },
{ name: '河北省', value: [114.5024, 38.0454, 0.26, 4.74] },
{ name: '山西省', value: [112.5489, 37.8570, 0.25, 3.78] },
{ name: '贵州省', value: [106.7135, 26.5783, 0.11, 1.93] },
{ name: '内蒙古自治区', value: [111.6708, 40.8183, 0.01, 0.96] },
{ name: '香港特别行政区', value: [114.1095, 22.3964, 1797.7, 197.75] },
{ name: '新疆维吾尔自治区', value: [87.6168, 43.7928, 0.01, 0.77] },
{ name: '甘肃省', value: [103.8235, 36.0580, 0.04, 1.46] },
{ name: '海南省', value: [110.3312, 20.0319, 0.36, 1.25] },
{ name: '宁夏回族自治区', value: [106.2782, 38.4664, 0.05, 0.27] },
{ name: '西藏自治区', value: [91.1175, 29.6469, 0.01, 0.14] },
{ name: '青海省', value: [101.7782, 36.6172, 0.01, 0.18] }
];
} finally {
loading.value = false;
}
};
// 计算 TOP 5 地区
const topRegions = computed(() => {
@@ -76,8 +192,10 @@ const topRegions = computed(() => {
return sorted.slice(0, 5);
});
// 挂载时初始化
// 组件挂载时获取数据
onMounted(() => {
fetchDataFromApi();
// 数据加载完成后初始化图表
setTimeout(() => {
initTalentMapChart()
}, 100);
@@ -198,6 +316,16 @@ const initTalentMapChart = () => {
</script>
<style lang="scss" scoped>
.num-empty {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #999;
}
.map-container {
display: flex;
gap: 2rem;