From 8445e95ba3688c1a2bb8c82129b92d6160314d33 Mon Sep 17 00:00:00 2001
From: renzhijun <3051619471@qq.com>
Date: Fri, 6 Feb 2026 10:49:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=A8=E5=81=9C=E5=88=86=E6=9E=90=EF=BC=8C?=
 =?UTF-8?q?=E5=BC=82=E5=B8=B8=E6=95=B0=E6=8D=AE=E5=AF=B9=E6=8E=A5=EF=BC=8C?=
 =?UTF-8?q?=E8=AF=8D=E4=BA=91=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/WordCloud/WordCloud.vue       | 396 +++++++++++------------
 pages/ztfx/ztfx.vue                      |  22 +-
 pagesStock/stockCenterDetails/bkydmx.vue | 236 ++++++--------
 3 files changed, 315 insertions(+), 339 deletions(-)

diff --git a/components/WordCloud/WordCloud.vue b/components/WordCloud/WordCloud.vue
index 82ce1d1..48bc24e 100644
--- a/components/WordCloud/WordCloud.vue
+++ b/components/WordCloud/WordCloud.vue
@@ -1,24 +1,22 @@
 <template>
   <view class="word-cloud-container">
-    <!-- canvas组件，适配小程序 -->
-  <canvas 
-    type="2d" 
-    ref="wordCloudCanvas" 
-    id="wordCloudCanvas" 
-    class="word-cloud-canvas"
-    :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"
-  ></canvas>
+    <!-- uni-app / 小程序 canvas，2d 模式 -->
+    <canvas
+      type="2d"
+      class="word-cloud-canvas"
+      :style="{ width: width + 'px', height: height + 'px' }"
+    ></canvas>
   </view>
 </template>
 
 <script>
 export default {
-  name: "WordCloud",
+  name: 'WordCloud',
+
   props: {
-    // 词云数据 [{text: '关键词', value: 100}, ...]
+    // 词云数据：[{ text: '关键词', value: 100 }]
     wordData: {
       type: Array,
-      required: true,
       default: () => []
     },
     // 画布宽度
@@ -31,263 +29,246 @@ export default {
       type: Number,
       default: 300
     },
-    // 文字颜色列表（分层配色）
+    // 颜色：外 / 中 / 内
     colorList: {
       type: Array,
-      default: () => ['#60A5FA', '#FEC200', '#EF4444'] // 外圈、中间、中心
-    },
-    // 新增：字号配置，让组件更灵活
-    fontSizeConfig: {
-      type: Object,
-      default: () => ({
-        minSize: 12,    // 最小字号
-        maxSize: 40,    // 最大字号
-        scaleFactor: 0.1 // 缩放因子，越大字号差异越明显
-      })
+      default: () => ['#60A5FA', '#FEC200', '#EF4444']
     }
   },
+
   data() {
     return {
-      canvasWidth: this.width,
-      canvasHeight: this.height,
-      ctx: null, // canvas 2d 上下文
-      placedWords: [] // 已放置的文字信息（用于碰撞检测）
+      ctx: null,        // canvas 2d 上下文
+      placedWords: [],  // 已放置文字的包围盒（用于碰撞检测）
+      centerWords: [],  // value 最大的 3 个
+      otherWords: []    // 其余词
     };
   },
+
   watch: {
+    // 词云数据变化时重绘
     wordData: {
+      deep: true,
       handler() {
         this.drawWordCloud();
-      },
-      deep: true
+      }
     }
   },
+
   mounted() {
     this.initCanvas();
   },
+
   methods: {
-    // 初始化canvas
+    // 初始化 canvas
     async initCanvas() {
-      // 修复点1：增加延迟，确保canvas节点渲染完成（兼容小程序渲染时机）
-      await new Promise(resolve => setTimeout(resolve, 50));
-      
-      // 适配小程序获取canvas上下文
+      // 延迟，确保 canvas 已渲染（小程序必需）
+      await new Promise(r => setTimeout(r, 50));
+
       const query = uni.createSelectorQuery().in(this);
-      // 修复点2：使用ref选择器（.ref-wordCloudCanvas）替代ID选择器，或给canvas加id
-      query.select('.word-cloud-canvas') // 改用class选择器，与模板中canvas的class对应
-        .fields({ node: true, size: true })
-        .exec(async (res) => {
-          // 修复点3：增加空值判断，避免res[0]为null时报错
-          if (!res || !res[0] || !res[0].node) {
-            console.error('获取canvas节点失败，请检查canvas是否正确渲染');
-            return;
-          }
-          
+      query
+        .select('.word-cloud-canvas')
+        .fields({ node: true })
+        .exec(res => {
+          if (!res || !res[0] || !res[0].node) return;
+
           const canvas = res[0].node;
-          let ctx = null;
-          
-          // 修复点4：兼容不同小程序平台的canvas 2d上下文获取
-          try {
-            ctx = canvas.getContext('2d');
-          } catch (e) {
-            console.warn('获取2d上下文失败，尝试兼容处理', e);
-            // 部分小程序平台需要先初始化canvas 2d
-            ctx = uni.createCanvasContext('wordCloudCanvas', this);
-          }
-          
-          if (!ctx) {
-            console.error('无法获取canvas 2d上下文');
-            return;
-          }
-          
-          // 设置canvas尺寸
+          const ctx = canvas.getContext('2d');
+
+          // 适配高清屏
           const dpr = uni.getSystemInfoSync().pixelRatio || 1;
-          canvas.width = this.canvasWidth * dpr;
-          canvas.height = this.canvasHeight * dpr;
+          canvas.width = this.width * dpr;
+          canvas.height = this.height * dpr;
           ctx.scale(dpr, dpr);
-          
+
           this.ctx = ctx;
           this.drawWordCloud();
         });
     },
-    
-    // 绘制词云核心方法
+
+    // 绘制词云
     drawWordCloud() {
       if (!this.ctx || !this.wordData.length) return;
-      
-      // 清空画布和已放置文字记录
-      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+
+      // 清空画布
+      this.ctx.clearRect(0, 0, this.width, this.height);
       this.placedWords = [];
-      
-      // 按权重排序（权重越大，文字越大）
-      const sortedWords = [...this.wordData].sort((a, b) => b.value - a.value);
-      
-      // 计算value的最大值和最小值，用于归一化
-      const values = sortedWords.map(item => item.value);
-      this.valueMax = Math.max(...values);
-      this.valueMin = Math.min(...values);
-      
-      // 逐个绘制文字
-      sortedWords.forEach((word, index) => {
-        this.placeWord(word, index);
+
+      // 按 value 从大到小排序
+      const sorted = [...this.wordData].sort((a, b) => b.value - a.value);
+
+      // 中心层：取前 3 个
+      this.centerWords = sorted.slice(0, 3);
+      this.otherWords = sorted.slice(3);
+
+      // 先画中心层（优先级最高）
+      this.centerWords.forEach((word, index) => {
+        this.placeWord(word, 'center', index);
       });
+
+      // 再画中 / 外层
+      this.otherWords.forEach(word => {
+        this.placeWord(word, 'other');
+      });
+	    // ⭐ 通知父组件：canvas 绘制完成
+	    this.$emit('rendered');
     },
-    
-    // 放置单个文字（核心：碰撞检测，确保不重叠）
-    placeWord(word, index) {
+
+    // 放置单个词
+    placeWord(word, type, index = 0) {
       const ctx = this.ctx;
-      // 优化1：提高最大尝试次数（从50→150），让更多文字能找到位置
-      const maxAttempts = 150; 
-      const { minSize, maxSize, scaleFactor } = this.fontSizeConfig;
-      
-      // ===== 核心优化：重新设计字号计算逻辑 =====
-      // 1. 归一化value（0-1区间）
-      let normalizedValue = 1;
-      if (this.valueMax !== this.valueMin) {
-        normalizedValue = (word.value - this.valueMin) / (this.valueMax - this.valueMin);
+      const text = word.text || word.name;
+      const maxAttempts = 200;
+
+      let fontSize = 24;
+      let layer = 'middle';
+
+      // 根据层级设置字号
+      if (type === 'center') {
+        fontSize = 32;        // ⭐ 最中间三个：32px
+        layer = 'center';
+      } else {
+        layer = Math.random() > 0.5 ? 'middle' : 'outer';
+        fontSize = layer === 'outer' ? 18 : 24;
       }
-      
-      // 2. 计算字号：基于归一化值，确保最小到最大的平滑过渡
-      // 公式：最小字号 + (最大字号 - 最小字号) * 归一化值 * 缩放因子
-      const fontSize = Math.min(
-        minSize + (maxSize - minSize) * normalizedValue * scaleFactor,
-        maxSize
-      );
-      // ==========================================
-      
-      // 旋转角度：-60° 到 60°
-      const rotateAngle = (Math.random() - 0.5) * 120 * Math.PI / 180;
-      
-      // 设置字体样式
-      ctx.font = `${fontSize}px sans-serif`;
-      
-      // 获取文字宽度和高度（用于碰撞检测）
-      const textWidth = ctx.measureText(word.text || word.name).width; // 兼容text/name字段
-      // 优化3：更精准的文字高度估算（从1.2→1.05），减少无效空间
-      const textHeight = fontSize * 1.05; 
-      
-      // 尝试放置文字，直到找到不重叠的位置
+
+      // 随机两档旋转角度
+      const angleLimit =
+        Math.random() > 0.5
+          ? 60 * Math.PI / 180
+          : 30 * Math.PI / 180;
+
+      const angle = (Math.random() - 0.5) * 2 * angleLimit;
+
+      // 设置字体（全部加粗）
+      ctx.font = `bold ${fontSize}px sans-serif`;
+
+      // 测量文字尺寸
+      const textWidth = ctx.measureText(text).width;
+      const textHeight = fontSize * 1.05;
+
       for (let i = 0; i < maxAttempts; i++) {
-        // 优化4：扩大随机位置范围（从0.2-0.8→0.05-0.95），利用边缘空间
-        const x = this.canvasWidth * 0.05 + Math.random() * this.canvasWidth * 0.9;
-        const y = this.canvasHeight * 0.05 + Math.random() * this.canvasHeight * 0.9;
-        
-        // 碰撞检测：检查当前位置是否与已放置的文字重叠（传入间距容差）
-        const isOverlap = this.checkOverlap(x, y, textWidth, textHeight, rotateAngle, 2); // 间距容差2px
-        
-        if (!isOverlap) {
-          // ===== 核心修改：按位置分层设置颜色 =====
-          // 1. 计算画布中心坐标
-          const centerX = this.canvasWidth / 2;
-          const centerY = this.canvasHeight / 2;
-          
-          // 2. 计算当前文字位置到中心的距离（欧几里得距离）
-          const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
-          
-          // 3. 计算画布最大半径（中心到角落的距离）
-          const maxDistance = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
-          
-          // 4. 按距离分三层分配颜色
-          let color;
-          if (distance > maxDistance * 0.66) {
-            // 外圈（距离>2/3最大半径）：#60A5FA
-            color = this.colorList[0];
-          } else if (distance > maxDistance * 0.33) {
-            // 中间层（距离>1/3最大半径）：#FEC200
-            color = this.colorList[1];
-          } else {
-            // 中心层（距离≤1/3最大半径）：#EF4444
-            color = this.colorList[2];
+        let x, y;
+
+        // ===== 中心层：固定布局，保证 3 个一定能放下 =====
+        if (layer === 'center') {
+          const centerX = this.width / 2;
+          const centerY = this.height / 2;
+
+          // 中心三个固定位置
+          const offsets = [
+            { x: 0, y: 0 },      // 最大的，正中
+            { x: -80, y: 0 },   // 左
+            { x: 80, y: 0 }     // 右
+          ];
+
+          const pos = offsets[index] || offsets[0];
+          x = centerX + pos.x;
+          y = centerY + pos.y;
+        } else {
+          // 中 / 外层：随机位置
+          x = this.width * 0.05 + Math.random() * this.width * 0.9;
+          y = this.height * 0.05 + Math.random() * this.height * 0.9;
+        }
+
+        // 计算旋转后的包围盒
+        const rect = this.getBoundingRect(
+          x,
+          y,
+          textWidth,
+          textHeight,
+          angle,
+          2
+        );
+
+        // 外层：超出画布直接跳过，继续尝试
+        if (layer === 'outer') {
+          if (
+            rect.left < 0 ||
+            rect.right > this.width ||
+            rect.top < 0 ||
+            rect.bottom > this.height
+          ) {
+            continue;
           }
-          // =========================================
-          
-          // 设置文字颜色
-          ctx.fillStyle = color;
-          
-          // 无重叠，绘制文字
-          this.drawTextAtPosition(word.text || word.name, x, y, rotateAngle, fontSize); 
-          
-          // 记录已放置的文字信息（用于后续碰撞检测）
-          this.placedWords.push({
-            x, y, width: textWidth, height: textHeight, angle: rotateAngle
-          });
-          break;
         }
+
+        // 碰撞检测
+        if (this.checkOverlapRect(rect)) continue;
+
+        // 根据层级设置颜色
+        ctx.fillStyle =
+          layer === 'center'
+            ? this.colorList[2]
+            : layer === 'middle'
+            ? this.colorList[1]
+            : this.colorList[0];
+
+        // 绘制文字
+        this.drawText(text, x, y, angle);
+
+        // 保存包围盒
+        this.placedWords.push({ rect });
+        break;
       }
     },
-    
-    // 碰撞检测：检查当前文字是否与已放置的文字重叠（新增间距容差参数）
-    checkOverlap(x, y, width, height, angle, gap = 2) {
-      // 简化碰撞检测：使用包围盒检测（旋转后的矩形包围盒）
-      const currentRect = this.getBoundingRect(x, y, width, height, angle, gap);
-      
-      for (const placed of this.placedWords) {
-        const placedRect = this.getBoundingRect(placed.x, placed.y, placed.width, placed.height, placed.angle, gap);
-        
-        // 轴对齐包围盒（AABB）碰撞检测
+
+    // 碰撞检测（AABB）
+    checkOverlapRect(current) {
+      for (const item of this.placedWords) {
+        const r = item.rect;
         if (
-          currentRect.left < placedRect.right &&
-          currentRect.right > placedRect.left &&
-          currentRect.top < placedRect.bottom &&
-          currentRect.bottom > placedRect.top
+          current.left < r.right &&
+          current.right > r.left &&
+          current.top < r.bottom &&
+          current.bottom > r.top
         ) {
-          return true; // 重叠
+          return true;
         }
       }
-      return false; // 不重叠
+      return false;
     },
-    
-    // 获取旋转后文字的包围盒（新增间距容差参数，缩小包围盒）
+
+    // 计算旋转后的包围盒
     getBoundingRect(x, y, width, height, angle, gap = 2) {
-      // 计算旋转后的四个顶点
       const cos = Math.cos(angle);
       const sin = Math.sin(angle);
-      
-      // 优化5：缩小包围盒（减去间距容差），让文字间距更小
+
       const halfW = (width - gap) / 2;
       const halfH = (height - gap) / 2;
-      
-      // 四个顶点坐标（相对于中心）
+
       const points = [
         { x: -halfW, y: -halfH },
-        { x: -halfW, y: halfH },
+        { x: halfW, y: -halfH },
         { x: halfW, y: halfH },
-        { x: halfW, y: -halfH }
+        { x: -halfW, y: halfH }
       ];
-      
-      // 旋转并平移到实际位置
-      const rotatedPoints = points.map(point => ({
-        x: x + point.x * cos - point.y * sin,
-        y: y + point.x * sin + point.y * cos
-      }));
-      
-      // 计算包围盒的最小/最大坐标
-      const left = Math.min(...rotatedPoints.map(p => p.x));
-      const right = Math.max(...rotatedPoints.map(p => p.x));
-      const top = Math.min(...rotatedPoints.map(p => p.y));
-      const bottom = Math.max(...rotatedPoints.map(p => p.y));
-      
-      return { left, right, top, bottom };
+
+      const xs = [];
+      const ys = [];
+
+      points.forEach(p => {
+        xs.push(x + p.x * cos - p.y * sin);
+        ys.push(y + p.x * sin + p.y * cos);
+      });
+
+      return {
+        left: Math.min(...xs),
+        right: Math.max(...xs),
+        top: Math.min(...ys),
+        bottom: Math.max(...ys)
+      };
     },
-    
-    // 在指定位置绘制旋转后的文字
-    drawTextAtPosition(text, x, y, angle, fontSize) {
+
+    // 绘制文字
+    drawText(text, x, y, angle) {
       const ctx = this.ctx;
-      
-      // 保存当前画布状态
       ctx.save();
-      
-      // 平移到文字中心位置
       ctx.translate(x, y);
-      // 旋转
       ctx.rotate(angle);
-      
-      // 绘制文字（居中对齐）
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       ctx.fillText(text, 0, 0);
-      
-      // 恢复画布状态
       ctx.restore();
     }
   }
@@ -299,6 +280,7 @@ export default {
   width: 100%;
   height: 100%;
 }
+
 .word-cloud-canvas {
   width: 100%;
   height: 100%;
diff --git a/pages/ztfx/ztfx.vue b/pages/ztfx/ztfx.vue
index 58760a9..9845c2d 100644
--- a/pages/ztfx/ztfx.vue
+++ b/pages/ztfx/ztfx.vue
@@ -101,7 +101,7 @@
       color: 'white',
       fontSize: '24rpx',
       fontWeight: '500'
-    }" >
+    }" @click="bkydAction(index)" >
 							<view class="single-line-ellipsis">{{item.title}}</view>
 							<view class="count-text">{{item.count}}只</view>
 
@@ -138,7 +138,7 @@
 					<view v-show="activeType === 0" style="width: 100%; height: 500rpx;">
 						<l-echart ref="chartRef"></l-echart>
 					</view>
-					<WordCloud v-show="activeType === 1" :wordData="wordData" :width="330" :height="330" />
+					<WordCloud v-show="activeType === 1" :wordData="wordData" :width="330" :height="330"  @rendered="onWordCloudRendered" />
 				</view>
 
 
@@ -556,6 +556,10 @@
 			//}
 		},
 		methods: {
+			 // 词云绘制完成
+			  onWordCloudRendered() {
+			    uni.hideLoading();
+			  },
 getStockHeatType(stock) {
 				// 假设通过连板数计算热度（可根据实际业务逻辑调整）
 				const days = stock.continuous_days_num || 0;
@@ -725,9 +729,19 @@ getStockHeatType(stock) {
 						break;
 					case 1:
 						//this.$refs.chartRef && this.initPieChart(); // 增加存在性判断
+						 uni.showLoading({
+						        title: '词云生成中...',
+						        mask: true // 防止用户误触
+						      });
+
 						this.initWordCloud();
 						break;
 					case 2:
+					 uni.showLoading({
+					        title: '词云生成中...',
+					        mask: true // 防止用户误触
+					      });
+
 						this.initWordCloud();
 						break;
 				}
@@ -916,7 +930,9 @@ getStockHeatType(stock) {
 					}];
 				}
 
-
+ setTimeout(() => {
+    uni.hideLoading();
+  }, 2000);
 
 				//console.log('父页面设置词云数据:', JSON.stringify(this.wordData));
 			},
diff --git a/pagesStock/stockCenterDetails/bkydmx.vue b/pagesStock/stockCenterDetails/bkydmx.vue
index 0240c4e..79ee82b 100644
--- a/pagesStock/stockCenterDetails/bkydmx.vue
+++ b/pagesStock/stockCenterDetails/bkydmx.vue
@@ -188,48 +188,40 @@
 			}
 		},
 computed: {
-	// 筛选后的股票列表
-	filteredStocks() {
-		if (!this.allStocks.length) return [];
-		
-		let stocks = [...this.allStocks];
-		
-		// 先筛选当前选中板块的股票
-		if (this.activeIndex >= 0 && this.bkList.length) {
-			const currentSector = this.bkList[this.activeIndex]?.title;
-			if (currentSector) {
-				stocks = stocks.filter(stock => {
-					// 匹配核心板块或板块分类
-					const sectorMatch = stock.core_sectors.some(s => s.includes(currentSector)) || 
-										(Array.isArray(stock.sector_category) ? stock.sector_category.includes(currentSector) : stock.sector_category === currentSector);
-					return sectorMatch;
-				});
-			}
-		}
-		
-		// 根据筛选类型排序/过滤
-		switch (this.filterIndex) {
-			case 0: // 按连板数
-				stocks.sort((a, b) => {
-					const aDays = this.parseContinuousDays(a.continuous_days);
-					const bDays = this.parseContinuousDays(b.continuous_days);
-					return bDays - aDays;
-				});
-				break;
-			case 1: // 只看龙头（≥2连板）
-				stocks = stocks.filter(stock => this.parseContinuousDays(stock.continuous_days) >= 2);
-				stocks.sort((a, b) => {
-					const aDays = this.parseContinuousDays(a.continuous_days);
-					const bDays = this.parseContinuousDays(b.continuous_days);
-					return bDays - aDays;
-				});
-				break;
-			
-		}
-		
-		return stocks;
-	}
-},
+	 // 筛选后的股票列表：按板块codes匹配 + 连板排序/筛选
+	    filteredStocks() {
+	      if (!this.originData?.stocks || !this.bkList.length) return [];
+	      
+	      // 1. 获取当前选中板块的股票代码集合
+	      const currentBk = this.bkList[this.activeIndex];
+	      if (!currentBk?.codes || currentBk.codes.length === 0) return [];
+	      const targetCodes = new Set(currentBk.codes); // 转Set提升匹配效率
+	      
+	      // 2. 从stocks中筛选出scode在targetCodes中的股票
+	      let stocks = this.originData.stocks.filter(stock => targetCodes.has(stock.scode));
+	      
+	      // 3. 保留原有筛选/排序逻辑
+	      switch (this.filterIndex) {
+	        case 0: // 按连板数从高到低排序
+	          stocks.sort((a, b) => {
+	            const aDays = this.parseContinuousDays(a.continuous_days);
+	            const bDays = this.parseContinuousDays(b.continuous_days);
+	            return bDays - aDays;
+	          });
+	          break;
+	        case 1: // 只看龙头（≥2连板），并按连板数从高到低排序
+	          stocks = stocks.filter(stock => this.parseContinuousDays(stock.continuous_days) >= 2);
+	          stocks.sort((a, b) => {
+	            const aDays = this.parseContinuousDays(a.continuous_days);
+	            const bDays = this.parseContinuousDays(b.continuous_days);
+	            return bDays - aDays;
+	          });
+	          break;
+	      }
+	      
+	      return stocks;
+	    }
+	  },
 
 		onLoad(e) {
 			this.activeIndex = e.index
@@ -351,99 +343,85 @@ computed: {
 			},
 
 	
-			// 为所有股票添加角色标签
-						setStockRoles() {
-							if (!this.originData || !this.originData.stocks || !this.bkList.length) return;
-							console.log("setStockRoles",JSON.stringify(this.originData.stocks))
-							this.allStocks = this.originData.stocks.map(stock => {
-								// 找到股票所属板块的热度排名
-								let sectorIndex = -1;
-								const stockSectors = Array.isArray(stock.sector_category) ? stock.sector_category : [stock.sector_category];
-								
-								// 匹配板块列表中的位置
-								this.bkList.some((bk, idx) => {
-									const match = stockSectors.some(s => s.includes(bk.title));
-									if (match) {
-										sectorIndex = idx;
-										return true;
-									}
-									return false;
-								});
-								
-								// 获取同板块的所有股票
-								const sectorStocks = this.originData.stocks.filter(s => {
-									const sSectors = Array.isArray(s.sector_category) ? s.sector_category : [s.sector_category];
-									return sSectors.some(ss => stockSectors.includes(ss));
-								});
-								
-								// 获取股票角色
-								const stockRole = this.getStockRole(stock, sectorStocks, sectorIndex);
-								
-								return {
-									...stock,
-									stockRole: stockRole.text ? stockRole : null
-								};
-							});
-						},
+	
+					 // 为所有股票添加角色标签
+					    setStockRoles() {
+					      if (!this.originData || !this.originData.stocks || !this.bkList.length) return;
+					      this.allStocks = this.originData.stocks.map(stock => {
+					        // 找到股票所属板块的热度排名
+					        let sectorIndex = -1;
+					        const stockSectors = Array.isArray(stock.sector_category) ? stock.sector_category : [stock.sector_category];
+					        // 匹配板块列表中的位置
+					        this.bkList.some((bk, idx) => {
+					          const match = stockSectors.some(s => s.includes(bk.title));
+					          if (match) {
+					            sectorIndex = idx;
+					            return true;
+					          }
+					          return false;
+					        });
+					        // 获取同板块的所有股票
+					        const sectorStocks = this.originData.stocks.filter(s => {
+					          const sSectors = Array.isArray(s.sector_category) ? s.sector_category : [s.sector_category];
+					          return sSectors.some(ss => stockSectors.includes(ss));
+					        });
+					        // 获取股票角色
+					        const stockRole = this.getStockRole(stock, sectorStocks, sectorIndex);
+					        return {
+					          ...stock,
+					          stockRole: stockRole.text ? stockRole : null
+					        };
+					      });
+					    },
+
 			
 
 			/**
 			 * 请求接口数据（优化：动态日期+自动时间戳）
 			 */
 			// 请求接口数据
-			async fetchData() {
-				try {
-					const timestamp = new Date().getTime();
-					const formattedDate = this.selectedFullDate;
-					const baseURL = getBaseURL1();
-					const requestUrl = `${baseURL}/data/zt/daily/${formattedDate}.json?t=${timestamp}`;
-
-					console.log('请求URL：', requestUrl);
-
-					const res = await uni.request({
-						url: requestUrl,
-						method: 'GET'
-					});
-
-					if (res.statusCode === 200 && res.data) {
-						this.originData = res.data;
-
-						// 处理板块列表
-						const chartData = this.originData.chart_data || {};
-						const labels = chartData.labels || [];
-						const counts = chartData.counts || [];
-
-						const maxCount = counts.length > 0 ? Math.max(...counts) : 0;
-						const maxLen = Math.min(labels.length, counts.length);
-						let bkList = [];
-
-						for (let i = 0; i < maxLen; i++) {
-							const title = labels[i];
-							const count = counts[i] || 0;
-							bkList.push({
-								title,
-								count
-							});
-						}
-
-						this.bkList = bkList;
-
-						// 为股票添加角色标签
-						this.setStockRoles();
-					} else {
-						uni.showToast({
-							title: '数据请求失败',
-							icon: 'none'
-						});
-					}
-				} catch (error) {
-					console.error('请求异常:', error);
-					uni.showToast({
-						title: '网络异常',
-						icon: 'none'
-					});
-				}
-			},
+			 async fetchData() {
+			      try {
+			        const timestamp = new Date().getTime();
+			        const formattedDate = this.selectedFullDate;
+			        const baseURL = getBaseURL1();
+			        const requestUrl = `${baseURL}/data/zt/daily/${formattedDate}.json?t=${timestamp}`;
+			
+			        console.log('请求URL：', requestUrl);
+			        const res = await uni.request({
+			          url: requestUrl,
+			          method: 'GET'
+			        });
+			
+			        if (res.statusCode === 200 && res.data) {
+			          this.originData = res.data;
+			          const { sector_data } = this.originData;
+			          
+			          // 解析sector_data生成板块列表：剔除「其他」，格式[{title: 板块名, codes: 股票代码数组}]
+			          this.bkList = Object.entries(sector_data)
+			            .filter(([sectorName]) => sectorName !== '其他') // 去掉其他板块
+			            .map(([sectorName, sectorInfo]) => ({
+			              title: sectorName,
+			              codes: sectorInfo.stock_codes || [] // 取板块对应的股票代码
+			            }));
+			          
+			          console.log('生成板块列表：', this.bkList);
+			          // 为股票添加角色标签
+			          this.setStockRoles();
+			        } else {
+			          uni.showToast({
+			            title: '数据请求失败',
+			            icon: 'none'
+			          });
+			        }
+			      } catch (error) {
+			        console.error('请求异常:', error);
+			        uni.showToast({
+			          title: '网络异常',
+			          icon: 'none'
+			        });
+			      }
+			    },
 		}
 	}
 </script>