diff --git a/src/views/Jyh/Community/StatsBar.vue b/src/views/Jyh/Community/StatsBar.vue new file mode 100644 index 0000000..aaa10af --- /dev/null +++ b/src/views/Jyh/Community/StatsBar.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/src/views/Jyh/Community/index.vue b/src/views/Jyh/Community/index.vue index 9e6be77..e347d3c 100644 --- a/src/views/Jyh/Community/index.vue +++ b/src/views/Jyh/Community/index.vue @@ -8,43 +8,24 @@
-
-

武汉市开源建设生态

-
WOS
-
-
- - 汇聚武汉开源力量，共建城市开源生态 -
- -
-
- 120+ - 开源企业 -
-
-
- 32+ - 高校参与 -
-
-
- 300+ - 社区活动 -
-
-
- 200+ - 开源项目 -
+ +
+
+
+ +

+ 开源 · 武汉 +

+ +
+
+ +

+ 汇聚武汉开源力量，共建城市开源生态 +

+ +
@@ -144,9 +125,9 @@ - +
-

武汉市语言与技术竞争趋势（2021-2025）

+

武汉市编程语言占比趋势（2020-2024）

@@ -239,6 +220,7 @@ import { onMounted, ref, nextTick, watch, onUnmounted } from 'vue'; import * as echarts from 'echarts'; import { usePageResize } from '@/utils/hooks/usePageResize'; +import StatsBar from './StatsBar.vue' // 页面尺寸响应式 const { widthType } = usePageResize(); @@ -268,24 +250,26 @@ const excellentProjects2025 = ref([ { name: 'fountain', desc: '仓颉编程语言实现的JAVA Spring框架的国产替代', org: '江汉大学' } ]); -// 3. 图表数据定义 +// 3. 图表数据定义（已更新为新数据） const chartData = ref({ - // 高校开源参与分布（包含华中科大、武大、湖北大学、江汉大学等） + // 高校开源参与分布（新的占比数据） university: [ - { value: 30, name: '华中科技大学' }, + { value: 28, name: '华中科技大学' }, { value: 25, name: '武汉大学' }, - { value: 15, name: '湖北大学' }, - { value: 10, name: '江汉大学' }, - { value: 8, name: '武汉理工大学' }, - { value: 7, name: '华中师范大学' }, - { value: 5, name: '其他高校' } + { value: 13, name: '江汉大学' }, + { value: 9, name: '湖北大学' }, + { value: 7, name: '武汉理工大学' }, + { value: 6, name: '华中师范大学' }, + { value: 6, name: '武汉科技大学' }, + { value: 5, name: '湖北工业大学' }, + { value: 1, name: '其他' } ], - // 开源社区区域分布 + // 开源社区区域分布（行政区+社区数量） community: { - xAxis: ['武昌区', '洪山区', '东湖高新区', '江汉区', '汉阳区', '青山区'], - data: [28, 35, 42, 18, 15, 12] + xAxis: ['洪山区', '武昌区', '东湖高新区', '江夏区', '东西湖区', '青山区'], + data: [22, 11, 9, 5, 2, 1] }, - // OSS Compass开源项目排行（提取OpenRank总分：左边数值） + // OSS Compass开源项目排行（保留原有数据） ossCompass: { yAxis: [ 'openharmony/docs', @@ -314,20 +298,29 @@ const chartData = ref({ { openRank: '30.37 | 8.57', quality: '37.1 | 4.295', wxb: '35.097 | 6.8', score: '34.19 | 6.55' } ] }, - // 武汉开源开发者排行榜（模拟数据：前10名，按贡献值排序） + // 武汉开源开发者排行榜（新的15位开发者总分数据） developer: { - yAxis: ['张XX', '李XX', '王XX', '刘XX', '陈XX', '杨XX', '黄XX', '赵XX', '吴XX', '周XX'], - data: [980, 850, 720, 650, 580, 520, 480, 420, 380, 350] + yAxis: [ + '白纯骢', '陆红旭', '蔡冬亮', '张继德', '蒋周奇', + '张天雄', '阮文俊', '李奇', '李成刚', '陈鹏轩', + '陈天宇', '彭友顺', '杨帆', '江彬', '韩凡宇' + ], + data: [92, 88, 85, 83, 81, 79, 77, 75, 74, 73, 72, 70, 68, 65, 63] }, - // 武汉市语言与技术竞争趋势（2021-2025，多系列） + // 武汉市编程语言占比趋势（2020-2024） languageTech: { - xAxis: ['2021', '2022', '2023', '2024', '2025'], + xAxis: ['2020', '2021', '2022', '2023', '2024'], series: [ - { name: 'Java', data: [85, 82, 78, 75, 72] }, - { name: 'Python', data: [78, 80, 85, 88, 90] }, - { name: 'Rust', data: [20, 35, 45, 60, 75] }, - { name: '仓颉', data: [0, 5, 15, 30, 45] }, - { name: 'Go', data: [60, 65, 70, 72, 75] } + { name: 'JavaScript', data: [15.50, 17.00, 18.50, 19.80, 20.50] }, + { name: 'Python', data: [18.00, 18.50, 17.80, 16.50, 15.20] }, + { name: 'Java', data: [10.00, 11.50, 12.80, 13.50, 14.00] }, + { name: 'TypeScript', data: [16.50, 14.80, 12.50, 10.20, 8.50] }, + { name: 'C#', data: [6.50, 6.80, 7.20, 7.50, 7.80] }, + { name: 'PHP', data: [4.20, 5.00, 5.80, 6.50, 7.00] }, + { name: 'C++', data: [5.50, 5.80, 6.00, 6.30, 6.50] }, + { name: 'Go', data: [6.00, 5.60, 5.30, 4.80, 4.20] }, + { name: 'Rust', data: [5.00, 4.50, 3.80, 3.20, 2.80] }, + { name: 'Kotlin', data: [3.50, 3.20, 3.00, 2.80, 2.50] } ] } }); @@ -446,12 +439,11 @@ const initUniversityChart = () => { formatter: (params: any) => `${params.name}: ${params.value}%` }, legend: { - // orient: 'vertical', - // left: 'left', bottom: '0', - textStyle: { fontSize: 12 }, + textStyle: { fontSize: 10 }, // 缩小图例字体，适配更多高校 itemWidth: 10, - itemHeight: 10 + itemHeight: 10, + type: 'scroll' // 开启图例滚动，避免溢出 }, series: [ { @@ -462,9 +454,12 @@ const initUniversityChart = () => { label: { show: true, formatter: '{b}: {c}%', - fontSize: 10 + fontSize: 9 // 缩小标签字体，适配更多高校 }, - color: ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#6366f1', '#14b8a6'] + color: [ + '#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', + '#6366f1', '#14b8a6', '#f43f5e', '#94a3b8' // 新增颜色，匹配9个分类 + ] } ], grid: { left: 0, bottom: 0, top: 0, right: 0 } @@ -499,7 +494,8 @@ const initCommunityChart = () => { type: 'value', name: '社区数量', nameTextStyle: { fontSize: 12 }, - axisLabel: { fontSize: 12 } + axisLabel: { fontSize: 12 }, + min: 0 // 强制y轴从0开始，更直观 }, series: [ { @@ -603,12 +599,13 @@ const initDeveloperChart = () => { type: 'value', name: '贡献值', nameTextStyle: { fontSize: 12 }, - axisLabel: { fontSize: 12 } + axisLabel: { fontSize: 12 }, + min: 0 // 强制y轴从0开始 }, yAxis: { type: 'category', data: chartData.value.developer.yAxis, - axisLabel: { fontSize: 12 } + axisLabel: { fontSize: 11 } // 缩小字体，适配15个开发者 }, series: [ { @@ -620,7 +617,7 @@ const initDeveloperChart = () => { show: true, position: 'right', formatter: '{c}', - fontSize: 12 + fontSize: 11 // 缩小标签字体 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ @@ -633,7 +630,7 @@ const initDeveloperChart = () => { }); }; -// 初始化武汉市语言与技术竞争趋势（折线图） +// 初始化武汉市编程语言占比趋势（折线图） const initLanguageTechChart = () => { const el = document.getElementById('languageTechChart'); if (!el) return; @@ -645,8 +642,11 @@ const initLanguageTechChart = () => { const myChart = echarts.init(el); chartInstances.value.languageTechChart = myChart; - // 定义系列颜色 - const colorList = ['#3b82f6', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6']; + // 定义系列颜色（10个颜色，匹配10种语言） + const colorList = [ + '#3b82f6', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6', + '#6366f1', '#14b8a6', '#f43f5e', '#94a3b8', '#475569' + ]; const series = chartData.value.languageTech.series.map((item, index) => ({ name: item.name, type: 'line', @@ -660,7 +660,9 @@ const initLanguageTechChart = () => { { offset: 0, color: `${colorList[index]}33` }, { offset: 1, color: `${colorList[index]}08` } ]) - } + }, + // 隐藏部分系列的图例，避免拥挤（可选，根据需求调整） + // legendHoverLink: index < 5 // 只显示前5个语言的图例交互 })); myChart.setOption({ @@ -669,16 +671,17 @@ const initLanguageTechChart = () => { formatter: (params: any) => { let res = `
${params[0].axisValue}
`; params.forEach((p: any) => { - res += `
${p.seriesName}: ${p.value}
`; + res += `
${p.seriesName}: ${p.value}%
`; }); return res; } }, legend: { top: 0, - textStyle: { fontSize: 12 } + textStyle: { fontSize: 10 }, + type: 'scroll' // 开启图例滚动，适配10种语言 }, - grid: { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }, + grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true }, xAxis: { type: 'category', data: chartData.value.languageTech.xAxis, @@ -686,9 +689,14 @@ const initLanguageTechChart = () => { }, yAxis: { type: 'value', - name: '使用占比/热度', + name: '占比（%）', nameTextStyle: { fontSize: 12 }, - axisLabel: { fontSize: 12 } + axisLabel: { + fontSize: 12, + formatter: '{value}%' // 显示百分比符号 + }, + min: 0, + max: 25 // 限制y轴最大值，更直观 }, series }); @@ -734,7 +742,7 @@ onMounted(() => { diff --git a/src/views/Jyh/Situation/index.vue b/src/views/Jyh/Situation/index.vue index 5c63615..694257e 100644 --- a/src/views/Jyh/Situation/index.vue +++ b/src/views/Jyh/Situation/index.vue @@ -43,7 +43,8 @@ const activeTab = ref('risk'); const tabs = [ { id: 'risk', label: '全球开源风险态势感知监控中心', icon: 'fas fa-shield-virus' }, - { id: 'eco', label: '开源生态与贡献价值全景', icon: 'fas fa-chart-network' } + { id: 'eco', label: '开源生态与贡献价值全景', icon: 'fas fa-chart-network' }, + { id: 'whky', label: '开源武汉', icon: 'fas fa-chart-network' }, ]; const isFixed = ref(false);