longcai/JiaZhiQianYan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

涨停分析，异常数据对接，词云优化

Browse Source
This commit is contained in:
renzhijun
2026-02-06 10:49:28 +08:00
parent 21e16f543f
commit 8445e95ba3
3 changed files with 315 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
components/WordCloud/WordCloud.vue
View File

@@ -1,24 +1,22 @@
<template>
<view class="word-cloud-container">
<!-- canvas组件，适配小程序 -->
<!-- uni-app / 小程序 canvas，2d 模式 -->
<canvas
type="2d"
ref="wordCloudCanvas"
id="wordCloudCanvas"
class="word-cloud-canvas"
:style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"
: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,79 +29,56 @@ 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: [] // 已放置的文字信息（用于碰撞检测）
placedWords: [], // 已放置文字的包围盒（用于碰撞检测）
centerWords: [], // value 最大的 3 个
otherWords: [] // 其余词
};
},
watch: {
// 词云数据变化时重绘
wordData: {
deep: true,
handler() {
this.drawWordCloud();
},
deep: true
}
}
},
mounted() {
this.initCanvas();
},
methods: {
// 初始化canvas
async initCanvas() {
// 修复点1：增加延迟，确保canvas节点渲染完成（兼容小程序渲染时机）
await new Promise(resolve => setTimeout(resolve, 50));
// 适配小程序获取canvas上下文
methods: {
// 初始化 canvas
async initCanvas() {
// 延迟，确保 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;
const ctx = canvas.getContext('2d');
// 修复点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 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;
@@ -111,183 +86,189 @@ export default {
});
},
// 绘制词云核心方法
// 绘制词云
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 sorted = [...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);
// 中心层：取前 3 个
this.centerWords = sorted.slice(0, 3);
this.otherWords = sorted.slice(3);
// 逐个绘制文字
sortedWords.forEach((word, index) => {
this.placeWord(word, index);
// 先画中心层（优先级最高）
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;
const text = word.text || word.name;
const maxAttempts = 200;
// ===== 核心优化：重新设计字号计算逻辑 =====
// 1. 归一化value（0-1区间）
let normalizedValue = 1;
if (this.valueMax !== this.valueMin) {
normalizedValue = (word.value - this.valueMin) / (this.valueMax - this.valueMin);
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
);
// ==========================================
// 随机两档旋转角度
const angleLimit =
Math.random() > 0.5
? 60 * Math.PI / 180
: 30 * Math.PI / 180;
// 旋转角度：-60° 到 60°
const rotateAngle = (Math.random() - 0.5) * 120 * Math.PI / 180;
const angle = (Math.random() - 0.5) * 2 * angleLimit;
// 设置字体样式
ctx.font = `${fontSize}px sans-serif`;
// 设置字体（全部加粗）
ctx.font = `bold ${fontSize}px sans-serif`;
// 获取文字宽度和高度（用于碰撞检测）
const textWidth = ctx.measureText(word.text || word.name).width; // 兼容text/name字段
// 优化3：更精准的文字高度估算（从1.2→1.05），减少无效空间
// 测量文字尺寸
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;
let x, y;
// 碰撞检测：检查当前位置是否与已放置的文字重叠（传入间距容差）
const isOverlap = this.checkOverlap(x, y, textWidth, textHeight, rotateAngle, 2); // 间距容差2px
// ===== 中心层：固定布局，保证 3 个一定能放下 =====
if (layer === 'center') {
const centerX = this.width / 2;
const centerY = this.height / 2;
if (!isOverlap) {
// ===== 核心修改：按位置分层设置颜色 =====
// 1. 计算画布中心坐标
const centerX = this.canvasWidth / 2;
const centerY = this.canvasHeight / 2;
// 中心三个固定位置
const offsets = [
{ x: 0, y: 0 }, // 最大的，正中
{ x: -80, y: 0 }, // 左
{ x: 80, y: 0 } // 右
];
// 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];
const pos = offsets[index] || offsets[0];
x = centerX + pos.x;
y = centerY + pos.y;
} else {
// 中心层（距离≤1/3最大半径）：#EF4444
color = this.colorList[2];
// 中 / 外层：随机位置
x = this.width * 0.05 + Math.random() * this.width * 0.9;
y = this.height * 0.05 + Math.random() * this.height * 0.9;
}
// =========================================
// 设置文字颜色
ctx.fillStyle = color;
// 计算旋转后的包围盒
const rect = this.getBoundingRect(
x,
y,
textWidth,
textHeight,
angle,
2
);
// 无重叠，绘制文字
this.drawTextAtPosition(word.text || word.name, x, y, rotateAngle, fontSize);
// 外层：超出画布直接跳过，继续尝试
if (layer === 'outer') {
if (
rect.left < 0 ||
rect.right > this.width ||
rect.top < 0 ||
rect.bottom > this.height
) {
continue;
}
}
// 记录已放置的文字信息（用于后续碰撞检测）
this.placedWords.push({
x, y, width: textWidth, height: textHeight, angle: rotateAngle
});
// 碰撞检测
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 xs = [];
const ys = [];
// 计算包围盒的最小/最大坐标
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));
points.forEach(p => {
xs.push(x + p.x * cos - p.y * sin);
ys.push(y + p.x * sin + p.y * cos);
});
return { left, right, top, bottom };
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%;

22
pages/ztfx/ztfx.vue
View File

@@ -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));
},

68
pagesStock/stockCenterDetails/bkydmx.vue
View File

@@ -188,35 +188,28 @@
}
},
computed: {
// 筛选后的股票列表
// 筛选后的股票列表：按板块codes匹配 + 连板排序/筛选
filteredStocks() {
if (!this.allStocks.length) return [];
if (!this.originData?.stocks || !this.bkList.length) return [];
let stocks = [...this.allStocks];
// 1. 获取当前选中板块的股票代码集合
const currentBk = this.bkList[this.activeIndex];
if (!currentBk?.codes || currentBk.codes.length === 0) return [];
const targetCodes = new Set(currentBk.codes); // 转Set提升匹配效率
// 先筛选当前选中板块的股票
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;
});
}
}
// 2. 从stocks中筛选出scode在targetCodes中的股票
let stocks = this.originData.stocks.filter(stock => targetCodes.has(stock.scode));
// 根据筛选类型排序/过滤
// 3. 保留原有筛选/排序逻辑
switch (this.filterIndex) {
case 0: // 按连板数
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连板）
case 1: // 只看龙头（≥2连板），并按连板数从高到低排序
stocks = stocks.filter(stock => this.parseContinuousDays(stock.continuous_days) >= 2);
stocks.sort((a, b) => {
const aDays = this.parseContinuousDays(a.continuous_days);
@@ -224,12 +217,11 @@ computed: {
return bDays - aDays;
});
break;
}
return stocks;
}
},
},
onLoad(e) {
this.activeIndex = e.index
@@ -351,15 +343,14 @@ 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));
@@ -369,16 +360,13 @@ computed: {
}
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
@@ -387,6 +375,7 @@ computed: {
},
/**
* 请求接口数据（优化：动态日期+自动时间戳）
*/
@@ -399,7 +388,6 @@ computed: {
const requestUrl = `${baseURL}/data/zt/daily/${formattedDate}.json?t=${timestamp}`;
console.log('请求URL：', requestUrl);
const res = await uni.request({
url: requestUrl,
method: 'GET'
@@ -407,27 +395,17 @@ computed: {
if (res.statusCode === 200 && res.data) {
this.originData = res.data;
const { sector_data } = this.originData;
// 处理板块列表
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;
// 解析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 {