态势感知平台-武汉市开源建设生态页面增加鸿蒙生态数据可视化模块展示

src/views/Jyh/Community/components/StatsBar.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="stats-glass-bar">
+    <div class="stat-node">
+      <span class="stat-value">1000W+</span>
+      <span class="stat-desc">鸿蒙开发者</span>
+    </div>
+    <div class="stat-separator"></div>
     <div class="stat-node">
       <span class="stat-value">150+</span>
       <span class="stat-desc">开源企业</span>

src/views/Jyh/Community/index.vue

@@ -19,6 +19,9 @@
     </div>
 
     <div class="index-module__NV_5cW__content">
+
+      <HarmonyEcoCharts />
+
       <div class="index-module__NV_5cW__chartsSection">
         <div class="index-module__NV_5cW__sectionHeader">
           <h2 class="index-module__NV_5cW__sectionTitle">
@@ -143,17 +146,13 @@
                  @mouseleave="resumeDeveloperScroll">
               <div class="developer-list">
                 <div class="developer-item" v-for="(name, index) in developerNames" :key="index">
-                  <!--                  <div class="dev-rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>-->
-
                   <div class="dev-avatar" :style="{ background: getAvatarBg(index) }">
                     {{ name.charAt(0) }}
                   </div>
-
                   <div class="dev-info">
                     <div class="dev-name">{{ name }}</div>
                     <div class="dev-tag">核心贡献者</div>
                   </div>
-
                   <div class="dev-medal">
                     <svg v-if="index < 3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                          fill="#f59e0b" stroke="none">
@@ -184,7 +183,6 @@
 
             <div class="chartCard__container">
               <div v-if="activeCommunityTab === 0" id="communityRankChart" class="chart"></div>
-
               <div v-else class="list-container"
                    ref="communityScrollRef"
                    @mouseenter="pauseCommunityScroll"
@@ -209,7 +207,6 @@
                 </div>
               </div>
             </div>
-
             <div class="source-footer">
               <span class="source-label">数据来源：</span>
               <div class="source-content">
@@ -282,105 +279,6 @@
         </div>
       </div>
 
-      <div class="index-module__NV_5cW__chartsSection" style="margin-top: 20px">
-        <div class="index-module__NV_5cW__sectionHeader">
-          <h2 class="index-module__NV_5cW__sectionTitle">
-            <span class="hm-tag-icon">HarmonyOS</span> 鸿蒙生态数据可视化
-          </h2>
-        </div>
-        <div class="index-module__NV_5cW__chartsGrid">
-
-          <div class="index-module__NV_5cW__chartCard list-card">
-            <h3 class="chartCard__title">鸿蒙优质开源项目榜</h3>
-            <div class="chartCard__container list-container"
-                 ref="scrollContainer3"
-                 @mouseenter="pauseScroll(3)"
-                 @mouseleave="resumeScroll(3)">
-              <div class="project-list">
-                <div class="project-item" v-for="(item, index) in hmProjects" :key="index">
-                  <div class="project-rank-wrapper">
-                    <span class="project-rank">{{ index + 1 }}</span>
-                  </div>
-                  <div class="project-info">
-                    <span class="project-name">{{ item.name }}</span>
-                    <span class="project-desc">{{ item.desc }}</span>
-                  </div>
-                  <div class="project-meta">
-                    <span class="project-stars">★ {{ item.stars }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="source-footer">
-              <span class="source-label">数据来源：</span>
-              <div class="source-content">
-                <svg class="source-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd" clip-rule="evenodd"
-                        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.128 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-                        fill="#333" />
-                </svg>
-                <span class="source-name">GitHub</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="index-module__NV_5cW__chartCard list-card">
-            <h3 class="chartCard__title">鸿蒙明星开发者贡献榜</h3>
-            <div class="chartCard__container list-container"
-                 ref="scrollContainer4"
-                 @mouseenter="pauseScroll(4)"
-                 @mouseleave="resumeScroll(4)">
-              <div class="developer-list">
-                <div class="developer-item" v-for="(item, index) in hmDevelopers" :key="index">
-                  <!--                  <div class="dev-rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>-->
-
-                  <div class="dev-avatar" :style="{ background: getAvatarBg(index) }">
-                    {{ item.name.charAt(0) }}
-                  </div>
-
-                  <div class="dev-info">
-                    <div class="dev-name">{{ item.name }}</div>
-                    <div class="dev-tag">核心贡献者</div>
-                  </div>
-
-                  <div class="dev-medal">
-                    <svg v-if="index < 3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
-                         fill="#f59e0b" stroke="none">
-                      <path
-                        d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-                    </svg>
-                    <span v-else class="dev-score">活跃</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="source-footer">
-              <span class="source-label">数据来源：</span>
-              <div class="source-content">
-                <img src="@/assets/imgs/logo/penguin_blue.svg" class="source-logo-circle" />
-                <span class="source-name">华科开放原子俱乐部</span>
-              </div>
-            </div>
-          </div>
-
-
-          <div class="index-module__NV_5cW__chartCard">
-            <h3 class="chartCard__title">鸿蒙开源企业贡献榜</h3>
-            <div class="chartCard__container">
-              <div v-if="!hmEnterprises.length" class="num-empty"></div>
-              <div v-else id="hmEnterpriseChart" class="chart" style="height: 300px;"></div>
-            </div>
-            <div class="source-footer">
-              <span class="source-label">数据来源：</span>
-              <div class="source-content">
-                <img src="@/assets/imgs/logo/logo-kfyzjjh.png" class="source-logo-circle" />
-                <span class="source-name">开放原子开源基金会</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
       <div class="index-module__NV_5cW__actionSection">
         <div class="index-module__NV_5cW__actionBackground"></div>
         <div class="index-module__NV_5cW__actionContent">
@@ -409,11 +307,11 @@
 import { onMounted, ref, nextTick, watch, onUnmounted, computed } from 'vue';
 import * as echarts from 'echarts';
 import { usePageResize } from '@/utils/hooks/usePageResize';
-import StatsBar from './StatsBar.vue';
+import StatsBar from './components/StatsBar.vue';
+import HarmonyEcoCharts from './components/HarmonyEcoCharts.vue';
 
 const { widthType } = usePageResize();
 
-// ================= 数据定义 =================
 const githubProjects = ref([
   {
     name: 'bootstrap',
@@ -481,6 +379,7 @@ const excellentProjects = ref([
   { 'name': 'RustSBI', 'desc': 'RISC-V 安全引导程序', 'org': '华中科技大学' },
   { 'name': 'NextDenovo', 'desc': '长读长序列组装工具', 'org': '武汉希望组' }
 ]);
+
 const chinaExcellentProjects = ref([
   {
     'name': 'Deepin 深度操作系统',
@@ -534,11 +433,14 @@ const chinaExcellentProjects = ref([
   }
 ]);
 
-// 武汉知名社区数据
 const wuhanCommunities = ref([
   { name: '黄鹤开源社区', type: '核心生态', slogan: '国家级、城市级开源社区平台，武汉开源生态的核心枢纽' },
   { name: '深度社区 (Deepin)', type: '操作系统', slogan: '全球最大桌面操作系统社区之一，全球用户超过 750 万' },
-  { name: '极狐社区 (GitLab China)', type: 'DevOps', slogan: '全球第二大开源托管平台 GitLab 在汉设立的中国发行版及开发者社区' },
+  {
+    name: '极狐社区 (GitLab China)',
+    type: 'DevOps',
+    slogan: '全球第二大开源托管平台 GitLab 在汉设立的中国发行版及开发者社区'
+  },
   { name: '开源鸿蒙社区 (OpenHarmony)', type: '万物互联', slogan: '国家级生态创新中心，设有全国首个分委会' },
   { name: 'PostgreSQL 中文社区', type: '数据库', slogan: '全球四大开源数据库之一的运营中心设在武汉' },
   { name: '武汉大学开源社区', type: '学术社团', slogan: '老牌社团，涉及 Linux、嵌入式、深度学习等方向' },
@@ -550,6 +452,50 @@ const wuhanCommunities = ref([
   { name: '湖北大学', type: '兴趣小组', slogan: '开源技术兴趣小组' }
 ]);
 
+// 开发者名单
+const developerNames = ['白纯骢', '陆红旭', '慕冬亮', '张继德', '蒋周奇', '张天雄', '阮文俊', '李奇', '陈鹏轩', '杨帆'];
+
+// 图表数据
+const chartData = ref({
+  cityProject: {
+    xAxis: ['北京', '上海', '深圳', '杭州', '广州', '成都', '武汉', '南京', '西安', '重庆'],
+    data: [757259, 678614, 343417, 315406, 177003, 168300, 120827, 111593, 58678, 56564]
+  },
+  talent: {
+    xAxis: ['北京', '上海', '广州', '深圳', '成都', '杭州', '武汉', '南京', '郑州', '长沙'],
+    data: [2115924, 1591988, 1555240, 1163580, 894108, 830306, 791335, 733581, 553397, 487971]
+  },
+  communityRank: {
+    xAxis: ['Deepin', 'OpenHarmony', 'MindSpore', 'IoTDB', 'GoFrame'],
+    data: [95, 92, 88, 76, 72]
+  },
+  club: {
+    xAxis: ['成都', '北京', '上海', '武汉', '重庆', '深圳', '苏州', '杭州', '合肥', '青岛'],
+    data: [10, 7, 5, 4, 3, 2, 2, 2, 2, 2]
+  },
+  policy: {
+    xAxis: ['江苏', '北京', '浙江', '广东', '上海', '湖北', '天津', '陕西', '河南', '云南'],
+    data: [11, 7, 3, 3, 3, 2, 2, 2, 2, 2]
+  },
+  campus: {
+    xAxis: ['南京', '武汉', '北京', '长沙', '成都', '上海', '天津', '深圳', '济南', '广州'],
+    data: [20, 16, 16, 16, 11, 10, 8, 8, 7, 6]
+  },
+  mirrors: {
+    xAxis: ['上海', '北京', '西安', '重庆', '济南', '南京', '武汉', '合肥', '香港', '长春', '成都', '深圳', '兰州', '哈尔滨', '南阳', '杭州'],
+    data: [4, 4, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
+  }
+});
+
+// ================= 逻辑处理 =================
+
+const isEmpty = ref({
+  cityProject: false, talent: false, developer: false, communityRank: false,
+  club: false, policy: false, campus: false, mirrors: false
+});
+const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({});
+
+// 社区 Tab 切换
 const activeCommunityTab = ref(0);
 const communityScrollRef = ref<HTMLElement | null>(null);
 let communityTimer: NodeJS.Timeout | null = null;
@@ -570,7 +516,6 @@ const startCommunityScroll = () => {
   if (!container) return;
   const list = container.querySelector('.community-scroll-list') as HTMLElement;
   if (!list || list.scrollHeight <= container.clientHeight) return;
-
   if (communityTimer) clearInterval(communityTimer);
   communityTimer = setInterval(() => {
     container.scrollTop += 1;
@@ -582,16 +527,13 @@ const startCommunityScroll = () => {
 const pauseCommunityScroll = () => communityTimer && clearInterval(communityTimer);
 const resumeCommunityScroll = () => activeCommunityTab.value === 1 && startCommunityScroll();
 
+// 项目 Tab 切换
 const currentProjectList = computed(() => {
   return activeTab.value === 0 ? chinaExcellentProjects.value : excellentProjects.value;
 });
 
-const switchTab = (index: number) => {
+const switchTab = () => {
-  if (activeTab.value === 1) {
+  activeTab.value = activeTab.value === 1 ? 0 : 1;
-    activeTab.value = 0;
-  } else {
-    activeTab.value = 1;
-  }
   nextTick(() => {
     if (scrollContainer2.value) scrollContainer2.value.scrollTop = 0;
     pauseScroll(2);
@@ -599,82 +541,21 @@ const switchTab = (index: number) => {
   });
 };
 
-const chartData = ref({
+// 头像背景色
-  cityProject: {
-    xAxis: ['北京', '上海', '深圳', '杭州', '广州', '成都', '武汉', '南京', '西安', '重庆'],
-    data: [757259, 678614, 343417, 315406, 177003, 168300, 120827, 111593, 58678, 56564]
-  },
-  talent: {
-    xAxis: ['北京', '上海', '广州', '深圳', '成都', '杭州', '武汉', '南京', '郑州', '长沙'],
-    data: [2115924, 1591988, 1555240, 1163580, 894108, 830306, 791335, 733581, 553397, 487971]
-  },
-  communityRank: {
-    xAxis: ['Deepin', 'OpenHarmony', 'MindSpore', 'IoTDB', 'GoFrame'],
-    data: [95, 92, 88, 76, 72]
-  },
-  club: {
-    xAxis: ['成都', '北京', '上海', '武汉','重庆', '深圳', '苏州', '杭州', '合肥', '青岛' ],
-    data: [10, 7, 5, 4, 3, 2, 2, 2, 2, 2]
-  },
-  policy: {
-    xAxis: [
-      '江苏', '北京', '浙江', '广东', '上海', '湖北', '天津',
-      '陕西', '河南', '云南'
-      // '黑龙江','安徽省', '重庆市', '宁夏回族自治区', '山东省', '湖南省'
-    ],
-    data: [11, 7, 3, 3, 3, 2, 2, 2, 2, 2
-      // 2, 2, 1, 1, 1, 1
-    ]
-  },
-  campus: {
-    xAxis: [
-      '南京', '武汉', '北京', '长沙', '成都', '上海', '天津', '深圳',
-      '济南', '广州'
-      // '呼和浩特', '长春', '吉林', '沈阳', '苏州', '青岛',
-      // '惠州', '合肥', '佛山', '南昌', '南充', '徐州', '西安', '郑州',
-      // '贵阳', '线上', '哈尔滨', '宜宾', '杭州', '太原', '大连', '银川',
-      // '西宁', '中山', '乐山', '内江', '泸州', '常德', '昌吉', '桂林',
-      // '福州', '常州', '库尔勒', '兰州', '温州', '鄂州', '乌鲁木齐', '日照',
-      // '无锡', '重庆', '东莞', '赣州'
-    ],
-    data: [
-      20, 16, 16, 16, 11, 10, 8, 8, 7, 6
-      // 5, 4, 3, 3, 3, 3,
-      // 3, 3, 3, 3, 3, 2, 2, 2,
-      // 2, 2, 2, 2, 2, 2, 2, 1,
-      // 1, 1, 1, 1, 1, 1, 1, 1,
-      // 1, 1, 1, 1, 1, 1, 1, 1,
-      // 1, 1, 1, 1
-    ]
-  },
-  mirrors: {
-    xAxis: [
-      '上海', '北京', '西安', '重庆', '济南', '南京', '武汉', '合肥', '香港',
-      '长春', '成都', '深圳', '兰州', '哈尔滨', '南阳', '杭州'
-    ],
-    data: [4, 4, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
-  }
-});
-
-// 数据定义
-const developerNames = ['白纯骢', '陆红旭', '慕冬亮', '张继德', '蒋周奇', '张天雄', '阮文俊', '李奇', '陈鹏轩', '杨帆'];
-
-const developerScrollRef = ref<HTMLElement | null>(null);
-let developerTimer: NodeJS.Timeout | null = null;
-
-// 自动生成头像背景色
 const getAvatarBg = (index: number) => {
   const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f59e0b', '#10b981', '#06b6d4', '#3b82f6'];
   return colors[index % colors.length];
 };
 
-// 滚动逻辑
+// 开发者列表滚动
+const developerScrollRef = ref<HTMLElement | null>(null);
+let developerTimer: NodeJS.Timeout | null = null;
+
 const startDeveloperScroll = () => {
   const container = developerScrollRef.value;
   if (!container) return;
   const list = container.querySelector('.developer-list') as HTMLElement;
   if (!list || list.scrollHeight <= container.clientHeight) return;
-
   if (developerTimer) clearInterval(developerTimer);
   developerTimer = setInterval(() => {
     container.scrollTop += 1;
@@ -687,16 +568,9 @@ const startDeveloperScroll = () => {
 const pauseDeveloperScroll = () => developerTimer && clearInterval(developerTimer);
 const resumeDeveloperScroll = () => startDeveloperScroll();
 
-const isEmpty = ref({
+// 自动滚动 (通用项目列表)
-  cityProject: false, talent: false, developer: false, communityRank: false,
-  club: false, policy: false, campus: false, mirrors: false
-});
-
-const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({});
 const scrollContainer1 = ref<HTMLDivElement | null>(null);
 const scrollContainer2 = ref<HTMLDivElement | null>(null);
-const scrollContainer3 = ref<HTMLDivElement | null>(null);
-const scrollContainer4 = ref<HTMLDivElement | null>(null);
 const scrollTimers: { [key: number]: NodeJS.Timeout | null } = { 1: null, 2: null };
 
 const autoScroll = (key: number) => {
@@ -721,10 +595,8 @@ const pauseScroll = (key: number) => {
 };
 const resumeScroll = (key: number) => autoScroll(key);
 
-// ================= 图表初始化=================
+// ================= 图表初始化 =================
-
 const commonGrid = { left: '3%', right: '4%', bottom: '15px', top: '15%', containLabel: true };
-const colorPalette = ['#3b82f6', '#06b6d4', '#8b5cf6', '#ec4899', '#f59e0b']; // 蓝, 青, 紫, 粉, 橙
 
 const initCityProjectChart = () => {
   const el = document.getElementById('cityProjectChart');
@@ -761,36 +633,7 @@ const initTalentChart = () => {
     yAxis: { type: 'value', name: '单位：人', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
     series: [{
       type: 'bar', data: chartData.value.talent.data, barWidth: '50%',
-      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#F97316' } // 橙色
+      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#F97316' }
-    }]
-  });
-};
-
-const initDeveloperChart = () => {
-  const el = document.getElementById('developerChart');
-  if (!el) return;
-  const myChart = echarts.init(el);
-  chartInstances.value.developer = myChart;
-  myChart.setOption({
-    tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 贡献分' },
-    grid: { left: '3%', right: '5%', bottom: '15px', top: '5%', containLabel: true },
-    xAxis: { type: 'value', show: false }, // 隐藏x轴
-    yAxis: {
-      type: 'category',
-      data: chartData.value.developer.yAxis.reverse(),
-      axisLine: { show: false },
-      axisTick: { show: false },
-      axisLabel: { color: '#333', fontWeight: 500 }
-    },
-    series: [{
-      type: 'bar', data: chartData.value.developer.data.reverse(), barWidth: 16,
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#7C3AED' }, {
-          offset: 1,
-          color: '#C4B5FD'
-        }]), borderRadius: [0, 8, 8, 0]
-      },
-      label: { show: false } // **修改点：隐藏具体分数**
     }]
   });
 };
@@ -809,9 +652,7 @@ const initCommunityRankChart = () => {
     },
     yAxis: { type: 'value', name: '单位：个', nameTextStyle: { color: '#999' } },
     series: [{
-      type: 'bar',
+      type: 'bar', data: [69, 35, 31, 25, 18, 15, 12, 12], barWidth: '40%',
-      data: [69, 35, 31, 25, 18, 15, 12, 12],
-      barWidth: '40%',
       itemStyle: { borderRadius: [4, 4, 0, 0], color: '#3b82f6' }
     }]
   });
@@ -828,8 +669,7 @@ const initClubChart = () => {
     xAxis: { type: 'category', data: chartData.value.club.xAxis, axisLabel: { color: '#666' } },
     yAxis: { type: 'value', name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
     series: [{
-      type: 'line', data: chartData.value.club.data,
+      type: 'line', data: chartData.value.club.data, smooth: true, symbolSize: 8,
-      smooth: true, symbolSize: 8,
       lineStyle: { width: 3, color: '#F59E0B' },
       itemStyle: { color: '#F59E0B', borderColor: '#fff', borderWidth: 2 },
       areaStyle: { opacity: 0.15, color: '#F59E0B' }
@@ -849,7 +689,7 @@ const initPolicyChart = () => {
     yAxis: { type: 'value', name: '单位：条', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
     series: [{
       type: 'bar', data: chartData.value.policy.data, barWidth: '45%',
-      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#2563EB' } // 蓝色
+      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#2563EB' }
     }]
   });
 };
@@ -859,23 +699,19 @@ const initCampusChart = () => {
   if (!el) return;
   const myChart = echarts.init(el);
   chartInstances.value.campus = myChart;
-  // **修改点：去掉三角形pictorialBar，改为美观的圆角柱状图**
   myChart.setOption({
     tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 场' },
     grid: commonGrid,
     xAxis: { type: 'category', data: chartData.value.campus.xAxis, axisLabel: { color: '#666' } },
     yAxis: { type: 'value', name: '单位：场次', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
     series: [{
-      type: 'bar',
+      type: 'bar', data: chartData.value.campus.data, barWidth: '35%',
-      data: chartData.value.campus.data,
-      barWidth: '35%',
       itemStyle: {
-        borderRadius: [8, 8, 0, 0], // 圆角
+        borderRadius: [8, 8, 0, 0],
-        // 活力洋红色渐变
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#EC4899' }, {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          offset: 1,
-          { offset: 0, color: '#EC4899' },
+          color: '#F472B6'
-          { offset: 1, color: '#F472B6' }
+        }])
-        ])
       }
     }]
   });
@@ -892,38 +728,22 @@ const initMirrorChart = () => {
     xAxis: { type: 'category', data: chartData.value.mirrors.xAxis, axisLabel: { color: '#666' } },
     yAxis: { type: 'value', name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
     series: [{
-      type: 'bar', data: chartData.value.mirrors.data,
+      type: 'bar', data: chartData.value.mirrors.data, barWidth: 30,
-      barWidth: 30,
       itemStyle: {
         borderRadius: [4, 4, 0, 0],
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#0EA5E9' }, {
-          { offset: 0, color: '#0EA5E9' },
+          offset: 1,
-          { offset: 1, color: '#38BDF8' }
+          color: '#38BDF8'
-        ])
+        }])
       }
     }]
   });
 };
 
-const initCharts = () => {
-  nextTick(() => {
-    initCityProjectChart();
-    initTalentChart();
-    initDeveloperChart();
-    initCommunityRankChart();
-    initClubChart();
-    initPolicyChart();
-    initCampusChart();
-    initMirrorChart();
-  });
-};
-
 const init = () => {
   nextTick(() => {
     initCityProjectChart();
-    initHmEnterpriseChart();
     initTalentChart();
-    initDeveloperChart();
     initCommunityRankChart();
     initClubChart();
     initPolicyChart();
@@ -932,108 +752,25 @@ const init = () => {
 
     autoScroll(1);
     autoScroll(2);
-    autoScroll(3);
-    autoScroll(4);
     startCommunityScroll();
     startDeveloperScroll();
   });
 };
+
 const unInit = () => {
   Object.values(scrollTimers).forEach(t => t && clearInterval(t));
   pauseDeveloperScroll();
   pauseCommunityScroll();
 };
 
-
-// 1. 鸿蒙优秀开源项目 (突出核心技术组件)
-const hmProjects = [
-  { name: 'OpenHarmony/arkui_ace_engine', desc: 'ArkUI 声明式UI开发框架引擎' },
-  { name: 'HarmonyOS/dist_softbus', desc: '极简协议分布式软总线技术' },
-  { name: 'OpenHarmony/communication_netmanager', desc: '网络管理与连接调度子系统' },
-  { name: 'ohos-standard/third_party_sqlite', desc: '适配于鸿蒙的高性能数据库组件' },
-];
-
-// 2. 鸿蒙明星开发者贡献榜 (模拟活跃度分数)
-const hmDevelopers = [
-  { name: 'Harmony_Hacker', score: '3,210', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Ark' },
-  { name: 'BlueOS_Contributor', score: '2,850', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Blue' },
-  { name: 'OpenSource_Fanatic', score: '2,460', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Fan' },
-];
-
-// 3. 鸿蒙开源企业排行榜 (体现生态伙伴参与度)
-const hmEnterprises = [
-  { name: '华为技术', value: 100 },
-  { name: '软通动力', value: 85 },
-  { name: '拓维信息', value: 72 },
-  { name: '润和软件', value: 65 },
-  { name: '中软国际', value: 58 }
-];
-
-const initHmEnterpriseChart = () => {
-  const chartDom = document.getElementById('hmEnterpriseChart');
-  if (!chartDom) return;
-
-  const myChart = echarts.init(chartDom);
-
-  const option = {
-    grid: {
-      left: '3%',
-      right: '12%',
-      bottom: '3%',
-      top: '5%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'value',
-      show: false // 保持与政策图一致，不显示坐标轴
-    },
-    yAxis: {
-      type: 'category',
-      // 反转数据，让高分的排在上面
-      data: hmEnterprises.map(item => item.name).reverse(),
-      axisLine: { show: false },
-      axisTick: { show: false },
-      axisLabel: {
-        color: '#64748b',
-        fontSize: 12
-      }
-    },
-    series: [
-      {
-        type: 'bar',
-        data: hmEnterprises.map(item => item.value).reverse(),
-        barWidth: 16,
-        itemStyle: {
-          // 使用渐变色提升质感
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: '#3b82f6' },
-            { offset: 1, color: '#60a5fa' }
-          ]),
-          borderRadius: [0, 8, 8, 0] // 右侧圆角
-        },
-        label: {
-          show: true,
-          position: 'right',
-          formatter: '{c}', // 直接显示数值
-          color: '#1e293b',
-          fontWeight: 'bold'
-        }
-      }
-    ]
-  };
-
-  myChart.setOption(option);
-
-  // 窗口缩放自适应
-  window.addEventListener('resize', () => myChart.resize());
-};
-
 watch(widthType, () => {
   init();
 });
+
 onMounted(() => {
   init();
 });
+
 onUnmounted(() => {
   unInit();
 });
@@ -1042,7 +779,6 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .index-module__NV_5cW__container {
   min-height: 100vh;
-  //background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); /* 深蓝到深紫背景 */
   padding: 2rem 1rem;
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
   color: #fff;
@@ -1125,7 +861,7 @@ onUnmounted(() => {
 
 /* 卡片玻璃拟态美化 */
 .index-module__NV_5cW__chartCard {
-  background: rgba(255, 255, 255, 0.95); /* 高不透明度白底，保证图表清晰 */
+  background: rgba(255, 255, 255, 0.95);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   padding: 1.25rem;
@@ -1212,7 +948,6 @@ onUnmounted(() => {
   font-weight: 700;
 }
 
-/* 前三名高亮 */
 .project-item:nth-child(1) .project-rank {
   background: linear-gradient(135deg, #fbbf24, #d97706);
 }
@@ -1281,36 +1016,19 @@ onUnmounted(() => {
   width: fit-content;
 }
 
-.tab-pill {
+/* 来源 Footer */
-  font-size: 12px;
-  padding: 4px 12px;
-  cursor: pointer;
-  border-radius: 6px;
-  color: #64748b;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.tab-pill.active {
-  background: #fff;
-  color: #3b82f6;
-  font-weight: 600;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-/* 来源 Footer 样式 (修改版：数据来源：Icon + Text) */
 .source-footer {
   margin-top: auto;
   padding-top: 0.75rem;
   border-top: 1px solid #f1f5f9;
   display: flex;
   align-items: center;
-  justify-content: flex-end; /* 右对齐 */
+  justify-content: flex-end;
   font-size: 11px;
 }
 
 .source-label {
-  color: #94a3b8; /* 浅灰色标签 */
+  color: #94a3b8;
   margin-right: 4px;
 }
 
@@ -1347,9 +1065,6 @@ onUnmounted(() => {
   font-weight: 500;
 }
 
-/* 深一点的灰色文字 */
-
-
 /* 行动区域 */
 .index-module__NV_5cW__actionSection {
   max-width: 1400px;
@@ -1357,7 +1072,7 @@ onUnmounted(() => {
   text-align: center;
   border-radius: 24px;
   padding: 3rem;
-  background: rgba(30, 41, 59, 0.6); /* 深色背景 */
+  background: rgba(30, 41, 59, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(12px);
   position: relative;
@@ -1603,31 +1318,6 @@ onUnmounted(() => {
   border-color: #e2e8f0;
 }
 
-/* 排名样式 */
-.dev-rank {
-  width: 24px;
-  font-weight: 800;
-  font-style: italic;
-  color: #94a3b8;
-  font-size: 14px;
-}
-
-.dev-rank.rank-1 {
-  color: #fbbf24;
-  font-size: 18px;
-}
-
-.dev-rank.rank-2 {
-  color: #94a3b8;
-  font-size: 16px;
-}
-
-.dev-rank.rank-3 {
-  color: #b45309;
-  font-size: 15px;
-}
-
-/* 头像占位 */
 .dev-avatar {
   width: 36px;
   height: 36px;
@@ -1673,49 +1363,4 @@ onUnmounted(() => {
     grid-template-columns: 1fr;
   }
 }
-
-/* 鸿蒙专项板块样式 */
-.hm-grid-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px;
-}
-
-.hm-tag-icon {
-  background: linear-gradient(90deg, #007dff, #00c4ff);
-  color: white;
-  padding: 2px 10px;
-  border-radius: 4px;
-  font-size: 14px;
-  margin-right: 8px;
-  font-weight: bold;
-}
-
-.hm-rank-card {
-  background: #ffffff;
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-  border: 1px solid #f1f5f9;
-  transition: transform 0.3s ease;
-
-  &:hover {
-    transform: translateY(-5px);
-  }
-}
-
-.hm-rank-card {
-  // ... 原有样式
-  border: 1px solid rgba(0, 125, 255, 0.1); // 淡淡的鸿蒙蓝边框
-
-  &:hover {
-    transform: translateY(-5px);
-    border-color: rgba(0, 125, 255, 0.4);
-    box-shadow: 0 10px 30px rgba(0, 125, 255, 0.1); // 蓝色系投影
-  }
-}
-
-.hm-tag-icon {
-  background: linear-gradient(90deg, #007dff, #4da1ff); // 更加纯净的华为/鸿蒙蓝
-}
 </style>