qimaohong
/
deepChartVueApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

2 Commits
e805070c78 ... b9da90e5cb

Author SHA1 Message Date
no99 b9da90e5cb Merge branch 'hongxilin/feature-20251023103318-行情数据及页面' into milestone-20251031-简版功能开发
4 weeks ago
no99 c9b3d96fa3 行情页分时图
4 weeks ago
11 changed files with 2862 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats
  1. 3
      .hbuilderx/launch.json
  2. 392
      common/canvasMethod.js
  3. 354
      common/stockTimeInformation.js
  4. 116
      common/util.js
  5. 8
      pages.json
  6. 16
      pages/home/globalIndex.vue
  7. 1980
      pages/home/marketCondition.vue
  8. BIN
      static/marketSituation-image/marketCondition-image/favorites.png
  9. BIN
      static/marketSituation-image/marketCondition-image/function.png
  10. BIN
      static/marketSituation-image/marketCondition-image/index.png
  11. BIN
      static/marketSituation-image/marketCondition-image/setting2.png

3
.hbuilderx/launch.json
View File

@ -2,7 +2,8 @@
"version" : "1.0",
"configurations" : [
{
"playground" : "custom",
"customPlaygroundType" : "device",
"playground" : "standard",
"type" : "uni-app:app-android"
}
]

392
common/canvasMethod.js
View File

@ -0,0 +1,392 @@
/**
* 功能：Canvas绘制方法。
* 作者：洪锡林
* 时间：2025年10月25日
*
* @format
*/
import { utils } from "./util.js";
export const HCharts = {
// 清除画布
clearCanvas(ctx, width, height) {
ctx.clearRect(0, 0, width, height);
ctx.setFillStyle("#ffffff");
ctx.fillRect(0, 0, width, height);
},
// 设置画布颜色
setCanvasColor(ctx, width, height, color) {
ctx.clearRect(0, 0, width, height);
ctx.setFillStyle(color);
ctx.fillRect(0, 0, width, height);
},
// 绘制文本工具函数
drawText(ctx, text, x, y, fontSize = 12, color = "#333", align = "left") {
ctx.setFontSize(fontSize);
ctx.setFillStyle(color);
ctx.setTextAlign(align);
ctx.fillText(text, x, y);
},
/**
* 功能：绘制网格系统。
* 作者：洪锡林
* 时间：2025年10月25日
*
* grid:[{
* top:顶部距离
* bottom:底部距离
* left:左侧距离
* right:右侧距离
* lineColor:网格线颜色
* lineWidth:网格线宽度
* horizontalLineNum:水平网格线数量
* verticalLineNum:垂直网格线数量
* label:{
* fontSize:字体大小
* color:字体颜色
* onlyTwo:是否只有两个标签
* text:[{
* value:值标签
* ratio:比例标签
* },{
* value:值标签
* ratio:比例标签
* },...]
* },...]
*/
// 绘制网格系统
drawGrid(ctx, width, height, grid, openTime, closeTime) {
// 测试数据
// const preClosePrice = prevClosePrice;
for (let i = 0; i < grid.length; ++i) {
const top = grid[i].top;
const bottom = grid[i].bottom;
const left = grid[i].left;
const right = grid[i].right;
const lineColor = grid[i].lineColor;
const lineWidth = grid[i].lineWidth;
const horizontalLineNum = grid[i].horizontalLineNum - 1;
const verticalLineNum = grid[i].verticalLineNum - 1;
let label;
if (grid[i].label) {
label = grid[i].label;
}
ctx.setStrokeStyle(lineColor);
ctx.setLineWidth(lineWidth);
// 画图底的开盘收盘时间
if (i == 0 && openTime && closeTime) {
HCharts.drawText(ctx, openTime, 6, height - bottom + 12, 14, "#686868", "left");
HCharts.drawText(ctx, closeTime, width - 6, height - bottom + 12, 14, "#686868", "right");
}
// 绘制水平网格线
for (let j = 0; j <= horizontalLineNum; j++) {
const y = top + (j * (height - bottom - top)) / horizontalLineNum;
ctx.beginPath();
if (label.lineStyle[j] == "dash") {
ctx.setLineDash([5, 5]);
}
ctx.moveTo(left, y);
ctx.lineTo(width - right, y);
ctx.stroke();
ctx.setLineDash([]);
}
// 绘制垂直网格线
for (let i = 0; i <= verticalLineNum; i++) {
const x = ((width - left - right) * i) / verticalLineNum;
ctx.beginPath();
ctx.moveTo(x + left, top);
ctx.lineTo(x + left, height - bottom);
ctx.stroke();
}
}
},
// 绘制价格标签
drawAxisLabels(ctx, width, height, grid) {
for (let i = 0; i < grid.length; ++i) {
const top = grid[i].top;
const bottom = grid[i].bottom;
const left = grid[i].left;
const right = grid[i].right;
const horizontalLineNum = grid[i].horizontalLineNum - 1;
let label;
if (grid[i].label) {
label = grid[i].label;
}
// 绘制水平网格线
for (let j = 0; j <= horizontalLineNum; j++) {
const y = top + (j * (height - bottom - top)) / horizontalLineNum;
// 价格标签
if (label) {
let valueXText = left + 1;
let ratioXText = width - right - 1;
let yText = y + 10;
if (j == horizontalLineNum) {
yText = y - 1;
}
let valueAlign = "left";
let ratioAlign = "right";
let fontSize = label.fontSize;
let textColor = label.color[j];
if (label.onlyTwo) {
if (j == 0) {
HCharts.drawText(ctx, label.text[0].value, valueXText, yText, fontSize, label.color[0], valueAlign);
} else if (j == horizontalLineNum) {
HCharts.drawText(ctx, label.text[1].value, valueXText, yText, fontSize, label.color[1], valueAlign);
}
} else {
HCharts.drawText(ctx, label.text[j].value, valueXText, yText, fontSize, textColor, valueAlign);
}
if (typeof label.text[j]?.ratio !== "undefined") {
HCharts.drawText(ctx, label.text[j].ratio, ratioXText, yText, fontSize, textColor, ratioAlign);
}
}
}
}
},
// 绘制价格曲线
drawPriceLine(ctx, width, height, data, grid, priceRange) {
if (!data.length) return;
// 上下边距1
const top = grid[0].top;
const bottom = grid[0].bottom;
const left = grid[0].left;
const right = grid[0].right;
const pointLen = 240;
const priceDiff = priceRange.max - priceRange.min;
// 绘制价格曲线
ctx.setStrokeStyle("#000");
ctx.setLineWidth(1);
ctx.beginPath();
data.forEach((item, index) => {
const x = left + (index * (width - left - right)) / pointLen;
const y = top + (height - top - bottom) * (1 - (item.price - priceRange.min) / priceDiff);
if (index === 0) {
ctx.moveTo(x, y);
} else {
// 使用贝塞尔曲线平滑连接
const prevPoint = data[index - 1];
const prevX = left + ((index - 1) * (width - left - right)) / pointLen;
const prevY = top + (height - top + -bottom) * (1 - (prevPoint.price - priceRange.min) / priceDiff);
const cp1x = (prevX + x) / 2;
const cp1y = prevY;
const cp2x = (prevX + x) / 2;
const cp2y = y;
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
}
});
ctx.stroke();
// 绘制渐变背景
HCharts.drawGradientBackground(ctx, width, height, data, grid, priceRange);
},
// 绘制渐变背景
drawGradientBackground(ctx, width, height, data, grid, priceRange) {
// 上下边距1
const top = grid[0].top;
const bottom = grid[0].bottom;
const left = grid[0].left;
const right = grid[0].right;
const pointLen = 240;
const priceDiff = priceRange.max - priceRange.min;
const gradient = ctx.createLinearGradient(0, left, 0, height - top);
gradient.addColorStop(0, "rgba(0, 0, 0, 0.3)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0.05)");
ctx.beginPath();
// 绘制价格曲线路径
data.forEach((item, index) => {
const x = left + (index * (width - left - right)) / pointLen;
const y = top + (height - top - bottom) * (1 - (item.price - priceRange.min) / priceDiff);
if (index === 0) {
ctx.moveTo(x, y);
} else {
const prevPoint = data[index - 1];
const prevX = left + ((index - 1) * (width - left - right)) / pointLen;
const prevY = top + (height - top - bottom) * (1 - (prevPoint.price - priceRange.min) / priceDiff);
const cp1x = (prevX + x) / 2;
const cp1y = prevY;
const cp2x = (prevX + x) / 2;
const cp2y = y;
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
}
});
// 闭合路径
const lastX = left + ((data.length - 1) * (width - left - right)) / pointLen;
ctx.lineTo(lastX, height - bottom);
ctx.lineTo(left, height - bottom);
ctx.closePath();
ctx.setFillStyle(gradient);
ctx.fill();
},
// 绘制成交量
drawVolume(ctx, width, height, data, index, pointLen, grid, volumeRange, offset) {
if (!data.length) return;
const top = grid[index - 1].top;
const bottom = grid[index - 1].bottom;
const left = grid[index - 1].left;
const right = grid[index - 1].right;
data.forEach((item, index) => {
const x = offset + left + (index * (width - left - right)) / pointLen;
const barWidth = (width - left - right) / pointLen - 0.5;
const barHeight = (item.volume / volumeRange.max) * (height - bottom - top);
// 根据涨跌设置颜色
const isRise = index === 0 || item.price >= data[index - 1].price || item.close >= data[index - 1].close;
ctx.setFillStyle(isRise ? "green" : "red");
ctx.fillRect(x - barWidth / 2, height - bottom - barHeight, barWidth, barHeight);
});
},
// 字符宽度近似计算（避免使用 measureText）
getApproximateTextWidth(text, fontSize = 10) {
// 中文字符约等于 fontSize，英文字符约等于 fontSize * 0.6
let width = 0;
for (let char of text) {
// 判断是否为中文字符
if (char.match(/[\u4e00-\u9fa5]/)) {
width += fontSize;
} else {
width += fontSize * 0.6;
}
}
return width;
},
// 绘制顶部价格显示
drawTopPriceDisplay(ctx, grid, text) {
for (let i = 0; i < text.length; i++) {
let x = grid[i].left;
let y = grid[i].top - 4;
for (let j = 0; j < text[i].length; j++) {
ctx.setFillStyle(text[i][j].color);
ctx.setFontSize(10);
ctx.setTextAlign("left");
ctx.fillText(text[i][j].name + ":" + text[i][j].value, x, y);
x += HCharts.getApproximateTextWidth(text[i][j].name + ":" + text[i][j].value) + 5;
}
}
},
// 绘制坐标轴标签
drawCrosshairAxisLabels(ctx, width, height, grid, crosshair) {
const { x, y } = crosshair;
// X轴时间标签
if (crosshair.currentData && (crosshair.currentData.time || crosshair.currentData.date)) {
const timeText = crosshair.currentData.time || crosshair.currentData.date;
const xBoxWidth = crosshair.currentData.time ? 40 : 70;
const xBoxHeight = 15;
ctx.setFillStyle("#629AF5");
if (x - xBoxWidth / 2 <= grid[0].left) {
ctx.fillRect(grid[0].left, height - grid[0].bottom, xBoxWidth, xBoxHeight);
} else if (x + xBoxWidth / 2 < width - grid[0].right) {
ctx.fillRect(x - xBoxWidth / 2, height - grid[0].bottom, xBoxWidth, xBoxHeight);
} else {
ctx.fillRect(width - grid[0].right - xBoxWidth, height - grid[0].bottom, xBoxWidth, xBoxHeight);
}
ctx.setFillStyle("#fff");
ctx.setFontSize(12);
ctx.setTextAlign("center");
if (x - xBoxWidth / 2 <= grid[0].left) {
ctx.fillText(timeText, grid[0].left + xBoxWidth / 2, height - grid[0].bottom + 12);
} else if (x + xBoxWidth / 2 < width - grid[0].right) {
ctx.fillText(timeText, x, height - grid[0].bottom + 12);
} else {
ctx.fillText(timeText, width - grid[0].right - xBoxWidth / 2, height - grid[0].bottom + 12);
}
}
// Y轴价格标签
if (crosshair.currentData) {
const priceText = utils.formatPrice(crosshair.currentData.price);
const yBoxWidth = 50;
const yBoxHeight = 14;
ctx.setFillStyle("#629AF5");
if (x < grid[0].left + yBoxWidth + 5) {
ctx.fillRect(width - grid[0].right - yBoxWidth, y - yBoxHeight / 2, yBoxWidth, yBoxHeight);
} else {
ctx.fillRect(grid[0].left, y - yBoxHeight / 2, yBoxWidth, yBoxHeight);
}
ctx.setFillStyle("#fff");
ctx.setFontSize(11);
ctx.setTextAlign("center");
if (x < grid[0].left + yBoxWidth + 5) {
ctx.fillText(priceText, width - grid[0].right - yBoxWidth / 2, y + 3);
} else {
ctx.fillText(priceText, grid[0].left + yBoxWidth / 2, y + 3);
}
}
},
// 绘制十字准线
drawCrosshair(ctx, width, height, grid, crosshair, text) {
if (!ctx) return;
const { x, y } = crosshair;
if (crosshair.show) {
// 每次绘制前先清除整个画布
ctx.clearRect(0, 0, width, height);
// 绘制垂直准线1
ctx.setStrokeStyle("#000");
ctx.setLineWidth(1);
// ctx.setLineDash([5, 5]);
for (let i = 0; i < grid.length; i++) {
ctx.beginPath();
ctx.moveTo(x, grid[i].top);
ctx.lineTo(x, height - grid[i].bottom);
ctx.stroke();
}
// ctx.beginPath();
// ctx.moveTo(x, grid[0].top);
// ctx.lineTo(x, height - grid[0].bottom);
// ctx.stroke();
// // 绘制垂直准线2
// ctx.beginPath();
// ctx.moveTo(x, grid[1].top);
// ctx.lineTo(x, height - grid[1].bottom);
// ctx.stroke();
// 绘制水平准线
ctx.beginPath();
ctx.moveTo(grid[0].left, y);
ctx.lineTo(width - grid[0].right, y);
ctx.stroke();
ctx.setLineDash([]);
// 绘制焦点圆点 - 黑边白心（更小）
// 先绘制白色填充
ctx.setFillStyle("#ffffff");
ctx.beginPath();
ctx.arc(x, y, 2, 0, Math.PI * 2);
ctx.fill();
// 再绘制黑色边框
ctx.setStrokeStyle("#000000");
ctx.setLineWidth(1);
ctx.setLineDash([]);
ctx.beginPath();
ctx.arc(x, y, 2, 0, Math.PI * 2);
ctx.stroke();
// 绘制坐标轴标签
HCharts.drawCrosshairAxisLabels(ctx, width, height, grid, crosshair);
}
// 绘制顶部价格显示
HCharts.drawTopPriceDisplay(ctx, grid, text);
ctx.draw(false);
},
};

354
common/stockTimeInformation.js
View File

@ -0,0 +1,354 @@
/** @format */
export const prevClosePrice = 14.95; // 前一日收盘价（元）
export const timeData = [
// 上午时段：9:30-11:30（共120个数据点）
{ time: "09:30", price: 15.0, volume: 28500 }, // 开盘价15.00元，开盘放量
{ time: "09:31", price: 15.08, volume: 25300 },
{ time: "09:32", price: 15.12, volume: 22800 },
{ time: "09:33", price: 15.09, volume: 19600 },
{ time: "09:34", price: 15.15, volume: 17200 },
{ time: "09:35", price: 15.18, volume: 15800 },
{ time: "09:36", price: 15.16, volume: 14300 },
{ time: "09:37", price: 15.2, volume: 13500 },
{ time: "09:38", price: 15.17, volume: 12800 },
{ time: "09:39", price: 15.22, volume: 12100 },
{ time: "09:40", price: 15.25, volume: 11500 },
{ time: "09:41", price: 15.23, volume: 10800 },
{ time: "09:42", price: 15.26, volume: 10200 },
{ time: "09:43", price: 15.24, volume: 9800 },
{ time: "09:44", price: 15.28, volume: 9500 },
{ time: "09:45", price: 15.3, volume: 9200 },
{ time: "09:46", price: 15.27, volume: 8800 },
{ time: "09:47", price: 15.29, volume: 8500 },
{ time: "09:48", price: 15.32, volume: 8200 },
{ time: "09:49", price: 15.3, volume: 7900 },
{ time: "09:50", price: 15.33, volume: 7600 },
{ time: "09:51", price: 15.31, volume: 7400 },
{ time: "09:52", price: 15.34, volume: 7200 },
{ time: "09:53", price: 15.32, volume: 7000 },
{ time: "09:54", price: 15.35, volume: 6800 },
{ time: "09:55", price: 15.33, volume: 6600 },
{ time: "09:56", price: 15.36, volume: 6500 },
{ time: "09:57", price: 15.34, volume: 6300 },
{ time: "09:58", price: 15.37, volume: 6200 },
{ time: "09:59", price: 15.35, volume: 6100 },
{ time: "10:00", price: 15.38, volume: 6000 },
{ time: "10:01", price: 15.36, volume: 5900 },
{ time: "10:02", price: 15.39, volume: 5800 },
{ time: "10:03", price: 15.37, volume: 5700 },
{ time: "10:04", price: 15.4, volume: 5600 },
{ time: "10:05", price: 15.38, volume: 5500 },
{ time: "10:06", price: 15.41, volume: 15400 },
{ time: "10:07", price: 15.39, volume: 5300 },
{ time: "10:08", price: 15.42, volume: 5200 },
{ time: "10:09", price: 15.4, volume: 5100 },
{ time: "10:10", price: 15.43, volume: 5000 },
{ time: "10:11", price: 15.41, volume: 5100 },
{ time: "10:12", price: 15.44, volume: 5200 },
{ time: "10:13", price: 15.42, volume: 5300 },
{ time: "10:14", price: 15.45, volume: 5400 },
{ time: "10:15", price: 15.43, volume: 5500 },
{ time: "10:16", price: 15.46, volume: 5600 },
{ time: "10:17", price: 15.44, volume: 5700 },
{ time: "10:18", price: 15.47, volume: 5800 },
{ time: "10:19", price: 15.45, volume: 5900 },
{ time: "10:20", price: 15.48, volume: 6000 },
{ time: "10:21", price: 15.46, volume: 6100 },
{ time: "10:22", price: 15.49, volume: 6200 },
{ time: "10:23", price: 15.47, volume: 6300 },
{ time: "10:24", price: 15.5, volume: 6400 },
{ time: "10:25", price: 15.48, volume: 6500 },
{ time: "10:26", price: 15.51, volume: 6600 },
{ time: "10:27", price: 15.49, volume: 6700 },
{ time: "10:28", price: 15.52, volume: 6800 },
{ time: "10:29", price: 15.5, volume: 6900 },
{ time: "10:30", price: 15.53, volume: 7000 },
{ time: "10:31", price: 15.51, volume: 7100 },
{ time: "10:32", price: 15.54, volume: 7200 },
{ time: "10:33", price: 15.52, volume: 7300 },
{ time: "10:34", price: 15.55, volume: 7400 },
{ time: "10:35", price: 15.53, volume: 7500 },
{ time: "10:36", price: 15.56, volume: 7600 },
{ time: "10:37", price: 15.54, volume: 7700 },
{ time: "10:38", price: 15.57, volume: 7800 },
{ time: "10:39", price: 15.55, volume: 7900 },
{ time: "10:40", price: 15.58, volume: 8000 },
{ time: "10:41", price: 15.56, volume: 8100 },
{ time: "10:42", price: 15.59, volume: 8200 },
{ time: "10:43", price: 15.57, volume: 8300 },
{ time: "10:44", price: 15.6, volume: 8400 }, // 全天最高价15.60元
{ time: "10:45", price: 15.58, volume: 8300 },
{ time: "10:46", price: 15.56, volume: 8200 },
{ time: "10:47", price: 15.54, volume: 8100 },
{ time: "10:48", price: 15.52, volume: 8000 },
{ time: "10:49", price: 15.5, volume: 7900 },
{ time: "10:50", price: 15.48, volume: 7800 },
{ time: "10:51", price: 15.46, volume: 7700 },
{ time: "10:52", price: 15.44, volume: 7600 },
{ time: "10:53", price: 15.42, volume: 7500 },
{ time: "10:54", price: 15.4, volume: 7400 },
{ time: "10:55", price: 15.38, volume: 7300 },
{ time: "10:56", price: 15.36, volume: 7200 },
{ time: "10:57", price: 15.34, volume: 7100 },
{ time: "10:58", price: 15.32, volume: 7000 },
{ time: "10:59", price: 15.3, volume: 6900 },
{ time: "11:00", price: 15.28, volume: 6800 },
{ time: "11:01", price: 15.26, volume: 6700 },
{ time: "11:02", price: 15.24, volume: 6600 },
{ time: "11:03", price: 15.22, volume: 6500 },
{ time: "11:04", price: 15.2, volume: 6400 }, // 全天最低价15.20元
{ time: "11:05", price: 15.22, volume: 6500 },
{ time: "11:06", price: 15.24, volume: 6600 },
{ time: "11:07", price: 15.26, volume: 6700 },
{ time: "11:08", price: 15.28, volume: 6800 },
{ time: "11:09", price: 15.3, volume: 6900 },
{ time: "11:10", price: 15.32, volume: 7000 },
{ time: "11:11", price: 15.34, volume: 7100 },
{ time: "11:12", price: 15.36, volume: 7200 },
{ time: "11:13", price: 15.38, volume: 7300 },
{ time: "11:14", price: 15.4, volume: 7400 },
{ time: "11:15", price: 15.42, volume: 7500 },
{ time: "11:16", price: 15.44, volume: 7600 },
{ time: "11:17", price: 15.46, volume: 7700 },
{ time: "11:18", price: 15.48, volume: 7800 },
{ time: "11:19", price: 15.5, volume: 7900 },
{ time: "11:20", price: 15.45, volume: 8300 },
{ time: "11:21", price: 15.47, volume: 8600 },
{ time: "11:22", price: 15.43, volume: 9100 },
{ time: "11:23", price: 15.46, volume: 9500 },
{ time: "11:24", price: 15.49, volume: 10200 },
{ time: "11:25", price: 15.5, volume: 11500 },
{ time: "11:26", price: 15.48, volume: 12800 },
{ time: "11:27", price: 15.52, volume: 14300 },
{ time: "11:28", price: 15.5, volume: 16500 },
{ time: "11:29", price: 15.53, volume: 19800 }, // 午盘收盘价15.53元
// 下午时段：13:00-15:00（共120个数据点）
{ time: "13:00", price: 15.55, volume: 24600 }, // 午后开盘冲高
{ time: "13:01", price: 15.58, volume: 21300 },
{ time: "13:02", price: 15.6, volume: 18700 }, // 再次触及全天最高价
{ time: "13:03", price: 15.57, volume: 16200 },
{ time: "13:04", price: 15.55, volume: 14500 },
{ time: "13:05", price: 15.52, volume: 12800 },
{ time: "13:06", price: 15.5, volume: 11300 },
{ time: "13:07", price: 15.48, volume: 10100 },
{ time: "13:08", price: 15.5, volume: 9500 },
{ time: "13:09", price: 15.47, volume: 8900 },
{ time: "13:10", price: 15.45, volume: 8300 },
{ time: "13:11", price: 15.43, volume: 7800 },
{ time: "13:12", price: 15.46, volume: 7500 },
{ time: "13:13", price: 15.44, volume: 7200 },
{ time: "13:14", price: 15.42, volume: 6900 },
{ time: "13:15", price: 15.45, volume: 6700 },
{ time: "13:16", price: 15.43, volume: 6500 },
{ time: "13:17", price: 15.4, volume: 6300 },
{ time: "13:18", price: 15.42, volume: 6100 },
{ time: "13:19", price: 15.39, volume: 5900 },
{ time: "13:20", price: 15.41, volume: 5800 },
{ time: "13:21", price: 15.39, volume: 5700 },
{ time: "13:22", price: 15.42, volume: 5600 },
{ time: "13:23", price: 15.4, volume: 5500 },
{ time: "13:24", price: 15.43, volume: 5400 },
{ time: "13:25", price: 15.41, volume: 5300 },
{ time: "13:26", price: 15.44, volume: 5200 },
{ time: "13:27", price: 15.42, volume: 5100 },
{ time: "13:28", price: 15.45, volume: 5000 },
{ time: "13:29", price: 15.43, volume: 5100 },
{ time: "13:30", price: 15.46, volume: 5200 },
{ time: "13:31", price: 15.44, volume: 5300 },
{ time: "13:32", price: 15.47, volume: 5400 },
{ time: "13:33", price: 15.45, volume: 5500 },
{ time: "13:34", price: 15.48, volume: 5600 },
{ time: "13:35", price: 15.46, volume: 5700 },
{ time: "13:36", price: 15.49, volume: 5800 },
{ time: "13:37", price: 15.47, volume: 5900 },
{ time: "13:38", price: 15.5, volume: 6000 },
{ time: "13:39", price: 15.48, volume: 6100 },
{ time: "13:40", price: 15.51, volume: 6200 },
{ time: "13:41", price: 15.49, volume: 6300 },
{ time: "13:42", price: 15.52, volume: 6400 },
{ time: "13:43", price: 15.5, volume: 6500 },
{ time: "13:44", price: 15.53, volume: 6600 },
{ time: "13:45", price: 15.51, volume: 6700 },
{ time: "13:46", price: 15.54, volume: 6800 },
{ time: "13:47", price: 15.52, volume: 6900 },
{ time: "13:48", price: 15.55, volume: 7000 },
{ time: "13:49", price: 15.53, volume: 7100 },
{ time: "13:50", price: 15.56, volume: 7200 },
{ time: "13:51", price: 15.54, volume: 7300 },
{ time: "13:52", price: 15.57, volume: 7400 },
{ time: "13:53", price: 15.55, volume: 7500 },
{ time: "13:54", price: 15.58, volume: 7600 },
{ time: "13:55", price: 15.56, volume: 7700 },
{ time: "13:56", price: 15.59, volume: 7800 },
{ time: "13:57", price: 15.57, volume: 7900 },
{ time: "13:58", price: 15.6, volume: 8000 }, // 第三次触及全天最高价
{ time: "13:59", price: 15.58, volume: 8100 },
{ time: "14:00", price: 15.56, volume: 8200 },
{ time: "14:01", price: 15.54, volume: 8300 },
{ time: "14:02", price: 15.52, volume: 8400 },
{ time: "14:03", price: 15.5, volume: 8300 },
{ time: "14:04", price: 15.48, volume: 8200 },
{ time: "14:05", price: 15.46, volume: 8100 },
{ time: "14:06", price: 15.44, volume: 8000 },
{ time: "14:07", price: 15.42, volume: 7900 },
{ time: "14:08", price: 15.4, volume: 7800 },
{ time: "14:09", price: 15.38, volume: 7700 },
{ time: "14:10", price: 15.36, volume: 7600 },
{ time: "14:11", price: 15.34, volume: 7500 },
{ time: "14:12", price: 15.32, volume: 7400 },
{ time: "14:13", price: 15.3, volume: 7300 },
{ time: "14:14", price: 15.28, volume: 7200 },
{ time: "14:15", price: 15.26, volume: 7100 },
{ time: "14:16", price: 15.24, volume: 7000 },
{ time: "14:17", price: 15.22, volume: 6900 },
{ time: "14:18", price: 15.2, volume: 6800 }, // 再次触及全天最低价
{ time: "14:19", price: 15.22, volume: 6700 },
{ time: "14:20", price: 15.24, volume: 6600 },
{ time: "14:21", price: 15.26, volume: 6500 },
{ time: "14:22", price: 15.28, volume: 6400 },
{ time: "14:23", price: 15.3, volume: 6300 },
{ time: "14:24", price: 15.32, volume: 6200 },
{ time: "14:25", price: 15.34, volume: 6100 },
{ time: "14:26", price: 15.36, volume: 6000 },
{ time: "14:27", price: 15.38, volume: 5900 },
{ time: "14:28", price: 15.4, volume: 5800 },
{ time: "14:29", price: 15.42, volume: 5700 },
{ time: "14:30", price: 15.44, volume: 5600 },
{ time: "14:31", price: 15.46, volume: 5500 },
{ time: "14:32", price: 15.48, volume: 5400 },
{ time: "14:33", price: 15.5, volume: 5300 },
{ time: "14:34", price: 15.52, volume: 5200 },
{ time: "14:35", price: 15.54, volume: 5100 },
{ time: "14:36", price: 15.56, volume: 5000 },
{ time: "14:37", price: 15.54, volume: 5100 },
{ time: "14:38", price: 15.52, volume: 5200 },
{ time: "14:39", price: 15.5, volume: 5300 },
{ time: "14:40", price: 15.48, volume: 5400 },
{ time: "14:41", price: 15.46, volume: 5500 },
{ time: "14:42", price: 15.44, volume: 5600 },
{ time: "14:43", price: 15.42, volume: 5700 },
{ time: "14:44", price: 15.4, volume: 5800 },
{ time: "14:45", price: 15.38, volume: 5900 },
{ time: "14:46", price: 15.36, volume: 6000 },
{ time: "14:47", price: 15.34, volume: 6100 },
{ time: "14:48", price: 15.32, volume: 6200 },
{ time: "14:49", price: 15.3, volume: 6300 },
{ time: "14:50", price: 15.42, volume: 9800 }, // 尾盘开始放量
{ time: "14:51", price: 15.45, volume: 11500 },
{ time: "14:52", price: 15.43, volume: 13200 },
{ time: "14:53", price: 15.46, volume: 15800 },
{ time: "14:54", price: 15.44, volume: 18500 },
{ time: "14:55", price: 15.47, volume: 21300 },
{ time: "14:56", price: 15.45, volume: 24600 },
{ time: "14:57", price: 15.48, volume: 27800 },
{ time: "14:58", price: 15.46, volume: 31200 }, // 尾盘成交量峰值
{ time: "14:59", price: 15.45, volume: 28500 }, // 当日收盘价15.45元
];
export const klineData = [
// 第1天（起始点，位于区间中部）
{ date: "2015-10-11", open: 16.5, high: 16.8, low: 16.2, close: 16.6, volume: 185000 },
// 第2-90天（区间震荡：15.5-17.5元）
{ date: "2015-10-12", open: 16.6, high: 16.9, low: 16.4, close: 16.7, volume: 192000 },
{ date: "2015-10-13", open: 16.7, high: 17.0, low: 16.5, close: 16.6, volume: 188000 },
{ date: "2015-10-14", open: 16.6, high: 16.8, low: 16.3, close: 16.4, volume: 175000 },
{ date: "2015-10-15", open: 16.4, high: 16.7, low: 16.2, close: 16.5, volume: 181000 },
{ date: "2015-10-16", open: 16.5, high: 16.9, low: 16.3, close: 16.8, volume: 195000 },
{ date: "2015-10-17", open: 16.8, high: 17.1, low: 16.6, close: 16.7, volume: 202000 },
{ date: "2015-10-18", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 183000 },
{ date: "2015-10-19", open: 16.5, high: 16.7, low: 16.1, close: 16.3, volume: 172000 },
{ date: "2015-10-20", open: 16.3, high: 16.6, low: 16.0, close: 16.4, volume: 178000 },
{ date: "2015-10-21", open: 16.4, high: 16.8, low: 16.2, close: 16.6, volume: 189000 },
{ date: "2015-10-22", open: 16.6, high: 17.0, low: 16.5, close: 16.9, volume: 205000 },
{ date: "2015-10-23", open: 16.9, high: 17.2, low: 16.7, close: 16.8, volume: 212000 },
{ date: "2015-10-24", open: 16.8, high: 17.0, low: 16.5, close: 16.6, volume: 193000 },
{ date: "2015-10-25", open: 16.6, high: 16.8, low: 16.2, close: 16.3, volume: 176000 },
{ date: "2015-10-26", open: 16.3, high: 16.6, low: 16.0, close: 16.5, volume: 184000 },
{ date: "2015-10-27", open: 16.5, high: 16.9, low: 16.4, close: 16.7, volume: 196000 },
{ date: "2015-10-28", open: 16.7, high: 17.1, low: 16.6, close: 16.9, volume: 208000 },
{ date: "2015-10-29", open: 16.9, high: 17.3, low: 16.8, close: 17.0, volume: 215000 },
{ date: "2015-10-30", open: 17.0, high: 17.2, low: 16.7, close: 16.8, volume: 201000 },
{ date: "2015-10-31", open: 16.8, high: 17.0, low: 16.5, close: 16.6, volume: 189000 },
{ date: "2015-11-01", open: 16.6, high: 16.8, low: 16.2, close: 16.4, volume: 175000 },
{ date: "2015-11-02", open: 16.4, high: 16.7, low: 16.1, close: 16.3, volume: 171000 },
{ date: "2015-11-03", open: 16.3, high: 16.6, low: 16.0, close: 16.5, volume: 182000 },
{ date: "2015-11-04", open: 16.5, high: 16.9, low: 16.3, close: 16.7, volume: 194000 },
{ date: "2015-11-05", open: 16.7, high: 17.1, low: 16.6, close: 16.8, volume: 203000 },
{ date: "2015-11-06", open: 16.8, high: 17.0, low: 16.5, close: 16.6, volume: 190000 },
{ date: "2015-11-07", open: 16.6, high: 16.8, low: 16.3, close: 16.4, volume: 178000 },
{ date: "2015-11-08", open: 16.4, high: 16.7, low: 16.1, close: 16.3, volume: 173000 },
{ date: "2015-11-09", open: 16.3, high: 16.6, low: 15.9, close: 16.2, volume: 168000 }, // 触及区间下沿
{ date: "2015-11-10", open: 16.2, high: 16.5, low: 16.0, close: 16.4, volume: 176000 },
{ date: "2015-11-11", open: 16.4, high: 16.8, low: 16.3, close: 16.6, volume: 187000 },
{ date: "2015-11-12", open: 16.6, high: 17.0, low: 16.5, close: 16.8, volume: 198000 },
{ date: "2015-11-13", open: 16.8, high: 17.2, low: 16.7, close: 16.9, volume: 206000 },
{ date: "2015-11-14", open: 16.9, high: 17.3, low: 16.8, close: 17.1, volume: 218000 },
{ date: "2015-11-15", open: 17.1, high: 17.4, low: 16.9, close: 17.0, volume: 212000 },
{ date: "2015-11-16", open: 17.0, high: 17.2, low: 16.7, close: 16.8, volume: 197000 },
{ date: "2015-11-17", open: 16.8, high: 17.0, low: 16.5, close: 16.6, volume: 185000 },
{ date: "2015-11-18", open: 16.6, high: 16.8, low: 16.3, close: 16.4, volume: 177000 },
{ date: "2015-11-19", open: 16.4, high: 16.7, low: 16.1, close: 16.3, volume: 172000 },
{ date: "2015-11-20", open: 16.3, high: 16.6, low: 16.0, close: 16.5, volume: 183000 },
{ date: "2015-11-21", open: 16.5, high: 16.9, low: 16.4, close: 16.7, volume: 195000 },
{ date: "2015-11-22", open: 16.7, high: 17.1, low: 16.6, close: 16.9, volume: 204000 },
{ date: "2015-11-23", open: 16.9, high: 17.2, low: 16.8, close: 17.0, volume: 213000 },
{ date: "2015-11-24", open: 17.0, high: 17.3, low: 16.9, close: 17.1, volume: 221000 },
{ date: "2015-11-25", open: 17.1, high: 17.4, low: 17.0, close: 17.2, volume: 228000 }, // 触及区间上沿
{ date: "2015-11-26", open: 17.2, high: 17.3, low: 16.8, close: 16.9, volume: 215000 },
{ date: "2015-11-27", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 199000 },
{ date: "2015-11-28", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 186000 },
{ date: "2015-11-29", open: 16.5, high: 16.7, low: 16.2, close: 16.3, volume: 175000 },
{ date: "2015-11-30", open: 16.3, high: 16.6, low: 16.0, close: 16.4, volume: 179000 },
{ date: "2015-12-01", open: 16.4, high: 16.8, low: 16.3, close: 16.6, volume: 188000 },
{ date: "2015-12-02", open: 16.6, high: 17.0, low: 16.5, close: 16.8, volume: 199000 },
{ date: "2015-12-03", open: 16.8, high: 17.2, low: 16.7, close: 16.9, volume: 207000 },
{ date: "2015-12-04", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 193000 },
{ date: "2015-12-05", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 182000 },
{ date: "2015-12-06", open: 16.5, high: 16.7, low: 16.2, close: 16.3, volume: 173000 },
{ date: "2015-12-07", open: 16.3, high: 16.6, low: 15.9, close: 16.1, volume: 167000 }, // 触及区间下沿
{ date: "2015-12-08", open: 16.1, high: 16.4, low: 16.0, close: 16.3, volume: 174000 },
{ date: "2015-12-09", open: 16.3, high: 16.7, low: 16.2, close: 16.5, volume: 185000 },
{ date: "2015-12-10", open: 16.5, high: 16.9, low: 16.4, close: 16.7, volume: 196000 },
{ date: "2015-12-11", open: 16.7, high: 17.1, low: 16.6, close: 16.9, volume: 205000 },
{ date: "2015-12-12", open: 16.9, high: 17.3, low: 16.8, close: 17.0, volume: 214000 },
{ date: "2015-12-13", open: 17.0, high: 17.2, low: 16.8, close: 16.9, volume: 203000 },
{ date: "2015-12-14", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 191000 },
{ date: "2015-12-15", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 180000 },
{ date: "2015-12-16", open: 16.5, high: 16.7, low: 16.2, close: 16.3, volume: 172000 },
{ date: "2015-12-17", open: 16.3, high: 16.6, low: 16.0, close: 16.4, volume: 178000 },
{ date: "2015-12-18", open: 16.4, high: 16.8, low: 16.3, close: 16.6, volume: 189000 },
{ date: "2015-12-19", open: 16.6, high: 17.0, low: 16.5, close: 16.8, volume: 200000 },
{ date: "2015-12-20", open: 16.8, high: 17.2, low: 16.7, close: 16.9, volume: 208000 },
{ date: "2015-12-21", open: 16.9, high: 17.3, low: 16.8, close: 17.1, volume: 219000 },
{ date: "2015-12-22", open: 17.1, high: 17.4, low: 17.0, close: 17.2, volume: 226000 }, // 触及区间上沿
{ date: "2015-12-23", open: 17.2, high: 17.3, low: 16.8, close: 16.9, volume: 213000 },
{ date: "2015-12-24", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 198000 },
{ date: "2015-12-25", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 185000 },
{ date: "2015-12-26", open: 16.5, high: 16.7, low: 16.2, close: 16.3, volume: 174000 },
{ date: "2015-12-27", open: 16.3, high: 16.6, low: 16.0, close: 16.5, volume: 183000 },
{ date: "2015-12-28", open: 16.5, high: 16.9, low: 16.4, close: 16.7, volume: 195000 },
{ date: "2015-12-29", open: 16.7, high: 17.1, low: 16.6, close: 16.9, volume: 204000 },
{ date: "2015-12-30", open: 16.9, high: 17.2, low: 16.8, close: 17.0, volume: 212000 },
{ date: "2015-12-31", open: 17.0, high: 17.3, low: 16.9, close: 17.1, volume: 220000 },
{ date: "2016-01-01", open: 17.1, high: 17.2, low: 16.8, close: 16.9, volume: 207000 },
{ date: "2016-01-02", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 193000 },
{ date: "2016-01-03", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 181000 },
{ date: "2016-01-04", open: 16.5, high: 16.7, low: 16.2, close: 16.3, volume: 172000 },
{ date: "2016-01-05", open: 16.3, high: 16.6, low: 15.9, close: 16.2, volume: 168000 }, // 触及区间下沿
{ date: "2016-01-06", open: 16.2, high: 16.5, low: 16.0, close: 16.4, volume: 175000 },
{ date: "2016-01-07", open: 16.4, high: 16.8, low: 16.3, close: 16.6, volume: 186000 },
{ date: "2016-01-08", open: 16.6, high: 17.0, low: 16.5, close: 16.8, volume: 197000 },
{ date: "2016-01-09", open: 16.8, high: 17.2, low: 16.7, close: 16.9, volume: 206000 },
{ date: "2016-01-10", open: 16.9, high: 17.3, low: 16.8, close: 17.1, volume: 217000 },
{ date: "2016-01-11", open: 17.1, high: 17.4, low: 17.0, close: 17.2, volume: 225000 }, // 触及区间上沿
{ date: "2016-01-12", open: 17.2, high: 17.3, low: 16.8, close: 16.9, volume: 212000 },
{ date: "2016-01-13", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 197000 },
{ date: "2016-01-14", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 184000 },
{ date: "2016-01-15", open: 16.5, high: 16.7, low: 16.2, close: 16.4, volume: 175000 },
{ date: "2016-01-16", open: 16.4, high: 16.7, low: 16.1, close: 16.3, volume: 171000 },
{ date: "2016-01-17", open: 16.3, high: 16.6, low: 16.0, close: 16.5, volume: 182000 },
{ date: "2016-01-18", open: 16.5, high: 16.9, low: 16.4, close: 16.7, volume: 194000 },
{ date: "2016-01-19", open: 16.7, high: 17.1, low: 16.6, close: 16.9, volume: 203000 },
{ date: "2016-01-20", open: 16.9, high: 17.2, low: 16.8, close: 17.0, volume: 212000 },
];

116
common/util.js
View File

@ -24,3 +24,119 @@ util.request = (url, callback, data = {}, failCallback) => {
}
export default util
// 画图需要用到的方法
export const utils = {
// 格式化价格
formatPrice(price) {
return price.toFixed(2);
},
// 计算数据范围
calculateDataRange(data, key) {
if (!data || data.length === 0) {
return {
min: 0,
max: 0,
};
}
const values = data.map((item) => item[key]);
return {
min: Math.min(...values),
max: Math.max(...values),
};
},
// 计算标签
calculateLabel(data, type = 2, preClosePrice = 0, key, num) {
let label = [];
if (key === "price") {
// 分时价格区间
if (type == 1) {
const priceRange = utils.calculateDataRange(data, "price");
const theMost = Math.max(priceRange.max - preClosePrice, preClosePrice - priceRange.min);
const mid = (num - 1) / 2;
// 计算分时价格标签
label[mid] = {
value: utils.formatPrice(preClosePrice),
ratio: utils.formatPrice(0) + "%",
};
for (let i = 0; i < mid; i++) {
label[i] = {
value: utils.formatPrice(preClosePrice + (theMost * (mid - i)) / mid),
ratio: utils.formatPrice((100 * (theMost * (mid - i))) / mid / preClosePrice) + "%",
};
label[num - 1 - i] = {
value: utils.formatPrice(preClosePrice - (theMost * (mid - i)) / mid),
ratio: utils.formatPrice((-1 * 100 * (theMost * (mid - i))) / mid / preClosePrice) +
"%",
};
}
timeChartObject.value.max = preClosePrice + theMost;
timeChartObject.value.min = preClosePrice - theMost;
return label;
} else {
const highPriceRange = utils.calculateDataRange(data, "high");
const lowPriceRange = utils.calculateDataRange(data, "low");
const priceDiff = highPriceRange.max * 1.01 - lowPriceRange.min * 0.99;
for (let i = 0; i < num; ++i) {
label[i] = {
value: utils.formatPrice(highPriceRange.max - (i * priceDiff) / num),
};
}
return label;
}
} else if (key === "volume") {
const volumeRange = utils.calculateDataRange(data, "volume");
label[0] = {
value: utils.formatPrice(volumeRange.max),
};
label[1] = {
value: utils.formatPrice(0),
};
return label;
}
return null;
},
// 线性插值
lerp(start, end, factor) {
return start + (end - start) * factor;
},
// 股市数值格式化方法
formatStockNumber(value, decimalPlaces = 2) {
const num = Number(value);
if (isNaN(num)) return "0";
const absNum = Math.abs(num);
const sign = num < 0 ? "-" : "";
if (absNum >= 1000000000000) {
// 万亿级别
return sign + (absNum / 1000000000000).toFixed(decimalPlaces) + "万亿";
} else if (absNum >= 100000000) {
// 亿级别
return sign + (absNum / 100000000).toFixed(decimalPlaces) + "亿";
} else if (absNum >= 10000) {
// 万级别
return sign + (absNum / 10000).toFixed(decimalPlaces) + "万";
} else {
// 小于万的直接显示
return sign + absNum.toFixed(decimalPlaces);
}
},
};
// 防抖函数
export const throttle = (fn, delay = 1000) => {
//距离上一次的执行时间
let lastTime = 0;
return function() {
let _this = this;
let _arguments = arguments;
let now = new Date().getTime();
//如果距离上一次执行超过了delay才能再次执行
if (now - lastTime > delay) {
fn.apply(_this, _arguments);
lastTime = now;
}
};
};

8
pages.json
View File

@ -177,6 +177,14 @@
{
"navigationBarTitleText" : "分享领取奖励"
}
},
{
"path" : "pages/home/marketCondition",
"style" :
{
"navigationBarTitleText" : "行情",
"navigationStyle": "custom"
}
}
],
"globalStyle": {

16
pages/home/globalIndex.vue
View File

@ -282,15 +282,15 @@ const viewMore = (market) => {
// 方法：查看指数详情
const viewIndexDetail = (item) => {
console.log('查看指数详情:', item.indexName)
uni.showToast({
title: `查看 ${item.indexName} 详情`,
icon: 'none',
duration: 2000
})
// 这里可以跳转到具体的指数详情页面
// uni.navigateTo({
// url: `/pages/detail/indexDetail?id=${item.id}`
// uni.showToast({
// title: `查看 ${item.indexName} 详情`,
// icon: 'none',
// duration: 2000
// })
// 这里可以跳转到具体的指数详情页面
uni.navigateTo({
url: `/pages/home/marketCondition`
})
}
// 生命周期：页面挂载

1980
pages/home/marketCondition.vue
File diff suppressed because it is too large
View File

BIN
static/marketSituation-image/marketCondition-image/favorites.png
View File

Side by Side

After

Width: 33  |  Height: 32  |  Size: 460 B

BIN
static/marketSituation-image/marketCondition-image/function.png
View File

Side by Side

After

Width: 36  |  Height: 36  |  Size: 539 B

BIN
static/marketSituation-image/marketCondition-image/index.png
View File

Side by Side

After

Width: 46  |  Height: 46  |  Size: 1.7 KiB

BIN
static/marketSituation-image/marketCondition-image/setting2.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 2.3 KiB

Write Preview
Loading…
Cancel
Save