1. 引言

2. 技术背景

2.1 股票行情应用的核心需求

• 实时性：行情数据需毫秒级更新（如沪深交易所Level-2数据延迟<3秒）。
• 可视化：K线图需支持多周期（日/周/月/分钟级）切换、技术指标（MA、MACD）叠加。
• 可靠性：网络波动时数据不丢失，断线重连机制保障连续性。
• 跨设备协同：用户在手机查看行情时，手表/平板可同步接收涨跌幅提醒。

2.2 鸿蒙系统的技术优势

• 分布式软总线：实现跨设备数据共享与任务流转（如手机行情页同步到平板）。
• 方舟开发框架（ArkUI）：声明式UI简化K线图等复杂组件的绘制逻辑。
• 后台任务管理：通过Background Task Manager保障WebSocket长连接稳定运行。
• 通知与提醒：Notification与WantAgent支持富媒体提醒（如K线异动弹窗）。

3. 应用使用场景

4. 原理解释

4.1 K线图绘制原理

1. 数据预处理：将原始行情数据（时间、开/高/低/收、成交量）转换为坐标点。
2. 坐标系映射：将价格/时间映射到Canvas的像素坐标（如Y轴反向：价格越高Y越小）。
3. 批量绘制：通过Canvas的drawRect（实体）与drawLine（影线）绘制单根K线，循环绘制所有数据。
4. 技术指标叠加：计算MA（移动平均线）等指标，绘制折线或柱状图。

4.2 实时数据更新原理

• WebSocket长连接：客户端与行情服务器建立持久连接，服务器主动推送数据（比HTTP轮询更高效）。
• 数据解析：接收二进制/JSON格式数据，解析为结构化行情对象（如StockQuote）。
• UI刷新：通过State装饰器触发ArkUI组件重绘，更新K线与涨跌幅显示。

4.3 涨跌幅提醒原理

1. 阈值监听：后台服务实时比对当前价格与用户设置的阈值（如±5%）。
2. 跨设备通知：通过鸿蒙Notification发送到本机，结合DistributedNotification同步到其他设备。
3. 交互联动：点击提醒弹窗通过WantAgent跳转至K线详情页，保持上下文连贯。

5. 核心特性

• 低延迟渲染：基于鸿蒙Canvas的硬件加速能力，K线刷新帧率≥30FPS。
• 分布式协同：支持手机、平板、手表等多设备行情同步，断连自动重连。
• 智能提醒策略：支持自定义涨跌幅阈值、时间段免打扰、多股同时监控。
• 数据安全：行情数据通过HTTPS/WebSocket Secure加密传输，本地缓存加密存储。

6. 原理流程图

6.1 K线图实时更新流程

+---------------------+     +---------------------+     +---------------------+
|  行情服务器（WebSocket）| --> |  鸿蒙客户端接收数据  | --> |  解析为StockQuote   |
+---------------------+     +---------------------+     +----------+----------+
                                                                      |
                                                                      v
+---------------------+     +---------------------+     +---------------------+
|  State触发UI重绘     | --> |  Canvas绘制K线实体/影线| --> |  显示最新K线与指标  |
| （ArkUI响应式）      |     | （批量绘制优化）     |     | （涨跌幅标红/绿）    |
+---------------------+     +---------------------+     +---------------------+

6.2 涨跌幅提醒流程

+---------------------+     +---------------------+     +---------------------+
|  后台监听价格变化    | --> |  比对用户阈值（±5%） | --> |  满足条件触发通知    |
+---------------------+     +---------------------+     +----------+----------+
                                                                      |
                                                                      v
+---------------------+     +---------------------+     +---------------------+
|  生成本地通知        | --> |  分布式通知同步设备  | --> |  用户点击跳转K线页  |
| （含K线缩略图）      |     | （手机+手表+平板）   |     | （WantAgent路由）    |
+---------------------+     +---------------------+     +---------------------+

7. 环境准备

7.1 开发环境

• DevEco Studio：v4.0+（支持ArkUI-X与Stage模型）。
• HarmonyOS SDK：API Version 9+（需启用ohos.permission.INTERNET、ohos.permission.NOTIFICATION_CONTROLLER权限）。
• 后端服务：WebSocket行情服务器（可提供模拟数据的测试接口，如wss://api.example.com/stock/ws）。

7.2 项目结构

StockHarmonyApp/
├── entry/src/main/ets/           # 主模块（ETS代码）
│   ├── pages/                    # 页面
│   │   ├── Index.ets             # 首页（股票列表）
│   │   └── KLinePage.ets         # K线详情页
│   ├── components/               # 自定义组件
│   │   ├── KLineChart.ets        # K线图绘制组件
│   │   └── QuoteCard.ets         # 行情卡片组件
│   ├── model/                    # 数据模型
│   │   ├── StockQuote.ets        # 行情数据类
│   │   └── KLineData.ets         # K线数据类
│   ├── service/                  # 业务逻辑
│   │   ├── WebSocketService.ets  # WebSocket连接服务
│   │   └── NotificationService.ets # 提醒服务
│   └── utils/                    # 工具类
│       ├── ChartUtil.ets         # K线坐标计算工具
│       └── DateUtil.ets          # 时间格式化工具
├── entry/src/main/resources/     # 资源文件
│   ├── base/media/               # 图标（如涨跌幅箭头）
│   └── base/element/             # 颜色/字符串资源
└── ohosTest/                     # 单元测试

7.3 权限配置（module.json5）

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET",
        "reason": "$string.internet_reason"
      },
      {
        "name": "ohos.permission.NOTIFICATION_CONTROLLER",
        "reason": "$string.notification_reason"
      },
      {
        "name": "ohos.permission.DISTRIBUTED_DATASYNC",
        "reason": "$string.distributed_sync_reason"
      }
    ]
  }
}

8. 实际详细代码实现

8.1 数据模型定义

8.1.1 行情数据类（model/StockQuote.ets）

// 单条行情数据（分时图/实时报价）
export class StockQuote {
  stockCode: string = '';       // 股票代码（如600036.SH）
  stockName: string = '';       // 股票名称（如招商银行）
  currentPrice: number = 0;     // 当前价
  openPrice: number = 0;        // 开盘价
  highPrice: number = 0;        // 最高价
  lowPrice: number = 0;         // 最低价
  preClosePrice: number = 0;    // 昨收价
  volume: number = 0;           // 成交量（手）
  turnover: number = 0;         // 成交额（万元）
  changePercent: number = 0;    // 涨跌幅（%）
  timestamp: number = 0;        // 时间戳（毫秒）

  // 计算涨跌幅（%）
  calcChangePercent(): number {
    if (this.preClosePrice === 0) return 0;
    return ((this.currentPrice - this.preClosePrice) / this.preClosePrice) * 100;
  }
}

8.1.2 K线数据类（model/KLineData.ets）

// K线数据点（日/周/分钟级）
export class KLineData {
  date: string = '';            // 日期（如20231026）
  time: string = '';            // 时间（如0930，分钟级需精确到分）
  open: number = 0;             // 开盘价
  high: number = 0;             // 最高价
  low: number = 0;              // 最低价
  close: number = 0;            // 收盘价
  volume: number = 0;           // 成交量
  amount: number = 0;           // 成交额

  // 转换为Canvas绘制所需的坐标数据
  toChartPoint(canvasWidth: number, canvasHeight: number, maxPrice: number, minPrice: number): Point {
    const x = /* 时间轴映射逻辑 */;  // 根据实际时间范围计算
    const y = canvasHeight - ((this.close - minPrice) / (maxPrice - minPrice)) * canvasHeight;
    return { x, y };
  }
}

// 坐标点类型
interface Point {
  x: number;
  y: number;
}

8.2 WebSocket实时数据服务

8.2.1 WebSocket服务类（service/WebSocketService.ets）

import { StockQuote } from '../model/StockQuote';
import { BusinessError } from '@ohos.base';

export class WebSocketService {
  private ws: websocket.WebSocket | null = null;
  private url: string = 'wss://api.example.com/stock/ws'; // 行情服务器地址
  private listeners: Array<(quote: StockQuote) => void> = [];

  // 连接WebSocket
  connect(): Promise<void> {
    return new Promise((resolve, reject) => {
      this.ws = websocket.createWebSocket();
      this.ws.on('open', () => {
        console.log('WebSocket connected');
        resolve();
      });
      this.ws.on('message', (data: string | ArrayBuffer) => {
        this.handleMessage(data);
      });
      this.ws.on('close', (code: number, reason: string) => {
        console.log(`WebSocket closed: ${code}, ${reason}`);
        this.reconnect(); // 断线重连
      });
      this.ws.on('error', (err: BusinessError) => {
        console.error(`WebSocket error: ${err.message}`);
        reject(err);
      });
      this.ws.connect(this.url);
    });
  }

  // 订阅股票行情
  subscribe(stockCodes: string[]): void {
    if (this.ws?.state === websocket.State.OPEN) {
      const subMsg = JSON.stringify({ type: 'subscribe', codes: stockCodes });
      this.ws.send(subMsg);
    }
  }

  // 处理服务器消息
  private handleMessage(data: string | ArrayBuffer): void {
    try {
      const jsonStr = typeof data === 'string' ? data : new TextDecoder().decode(data);
      const quote: StockQuote = JSON.parse(jsonStr);
      quote.changePercent = quote.calcChangePercent(); // 计算涨跌幅
      // 通知所有监听器
      this.listeners.forEach(listener => listener(quote));
    } catch (err) {
      console.error('Parse message failed:', err);
    }
  }

  // 注册数据监听器
  addListener(listener: (quote: StockQuote) => void): void {
    this.listeners.push(listener);
  }

  // 断线重连（指数退避策略）
  private reconnect(): void {
    let retryCount = 0;
    const maxRetry = 5;
    const interval = 1000 * Math.pow(2, retryCount); // 1s, 2s, 4s...
    setTimeout(() => {
      if (retryCount < maxRetry) {
        console.log(`Reconnecting... attempt ${retryCount + 1}`);
        this.connect().catch(() => {
          retryCount++;
          this.reconnect();
        });
      }
    }, interval);
  }

  // 断开连接
  disconnect(): void {
    this.ws?.close();
    this.ws = null;
    this.listeners = [];
  }
}

8.3 K线图绘制组件

8.3.1 K线图组件（components/KLineChart.ets）

import { KLineData } from '../model/KLineData';
import { ChartUtil } from '../utils/ChartUtil';

@Component
export struct KLineChart {
  @State kLineData: KLineData[] = []; // 响应式K线数据
  @Prop canvasWidth: number = 300;    // 画布宽度
  @Prop canvasHeight: number = 200;   // 画布高度
  private ctx: CanvasRenderingContext2D | null = null;

  // 绘制K线
  drawKLine(ctx: CanvasRenderingContext2D): void {
    if (this.kLineData.length === 0) return;

    // 计算价格范围（用于Y轴映射）
    const prices = this.kLineData.flatMap(d => [d.open, d.high, d.low, d.close]);
    const maxPrice = Math.max(...prices);
    const minPrice = Math.min(...prices);
    const priceRange = maxPrice - minPrice;

    // 设置绘制样式
    ctx.strokeStyle = '#000000'; // 影线颜色
    ctx.fillStyle = '#FF0000';  // 阳线填充色（红色）
    ctx.lineWidth = 1;

    // 计算K线宽度与间距（假设最多显示60根K线）
    const kLineCount = Math.min(this.kLineData.length, 60);
    const kLineWidth = (this.canvasWidth - 20) / kLineCount; // 留边距20px
    const spacing = kLineWidth * 0.2; // 间距为宽度的20%

    // 遍历绘制每根K线
    for (let i = 0; i < kLineCount; i++) {
      const data = this.kLineData[i];
      const x = 10 + i * (kLineWidth + spacing); // X坐标（从左向右）

      // 计算高低价影线Y坐标（Y轴向下为正，需反转价格）
      const highY = ChartUtil.priceToY(data.high, maxPrice, minPrice, this.canvasHeight);
      const lowY = ChartUtil.priceToY(data.low, maxPrice, minPrice, this.canvasHeight);
      // 计算开收盘价实体Y坐标
      const openY = ChartUtil.priceToY(data.open, maxPrice, minPrice, this.canvasHeight);
      const closeY = ChartUtil.priceToY(data.close, maxPrice, minPrice, this.canvasHeight);

      // 绘制影线（最高价-最低价）
      ctx.beginPath();
      ctx.moveTo(x + kLineWidth / 2, highY);
      ctx.lineTo(x + kLineWidth / 2, lowY);
      ctx.stroke();

      // 绘制实体（开盘价-收盘价）
      const isYang = data.close >= data.open; // 阳线（收盘≥开盘）
      ctx.fillStyle = isYang ? '#FF0000' : '#00AA00'; // 阴线绿色
      const rectY = Math.min(openY, closeY);
      const rectHeight = Math.abs(openY - closeY) || 1; // 避免高度为0
      ctx.fillRect(x, rectY, kLineWidth, rectHeight);
    }
  }

  build() {
    Column() {
      Canvas(this.canvasWidth, this.canvasHeight)
        .onReady((ctx: CanvasRenderingContext2D) => {
          this.ctx = ctx;
          this.drawKLine(ctx); // 初始绘制
        })
        .onAreaChange((oldValue, newValue) => {
          // 尺寸变化时重绘
          if (this.ctx) this.drawKLine(this.ctx);
        })
    }
  }

  // 更新数据并重绘
  updateData(newData: KLineData[]): void {
    this.kLineData = newData;
    if (this.ctx) {
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空画布
      this.drawKLine(this.ctx); // 重绘
    }
  }
}

// 坐标转换工具（utils/ChartUtil.ets）
export class ChartUtil {
  // 价格转Y坐标（Y轴原点在顶部，价格越高Y越小）
  static priceToY(price: number, maxPrice: number, minPrice: number, canvasHeight: number): number {
    if (maxPrice === minPrice) return canvasHeight / 2;
    const ratio = (price - minPrice) / (maxPrice - minPrice);
    return canvasHeight - ratio * canvasHeight; // 反转Y轴
  }
}

8.4 涨跌幅提醒服务

8.4.1 提醒服务类（service/NotificationService.ets）

import notification from '@ohos.notification';
import wantAgent, { WantAgent } from '@ohos.app.ability.wantAgent';
import { StockQuote } from '../model/StockQuote';

export class NotificationService {
  // 发送涨跌幅提醒
  static sendQuoteAlert(quote: StockQuote, threshold: number): void {
    if (Math.abs(quote.changePercent) < threshold) return;

    // 1. 创建通知内容
    const notificationContent: notification.NotificationContent = {
      normal: {
        title: `${quote.stockName}(${quote.stockCode})`,
        text: `涨跌幅: ${quote.changePercent.toFixed(2)}%`,
        additionalText: `当前价: ${quote.currentPrice.toFixed(2)}`,
        badgeNumber: 1
      }
    };

    // 2. 创建WantAgent（点击通知跳转K线页）
    const wantAgentInfo: wantAgent.WantAgentInfo = {
      wants: [
        {
          bundleName: 'com.example.stockharmonyapp',
          abilityName: 'com.example.stockharmonyapp.MainAbility',
          uri: `stock://detail?code=${quote.stockCode}`, // 自定义协议跳转
          parameters: { stockCode: quote.stockCode }
        }
      ],
      operationType: wantAgent.OperationType.START_ABILITY,
      wantAgentFlags: [wantAgent.WantAgentFlags.UPDATE_PRESENT_FLAG]
    };

    // 3. 发布通知
    notification.publish(notificationContent, (err) => {
      if (err) {
        console.error(`Notification publish failed: ${err.code}, ${err.message}`);
      } else {
        console.log('Notification published');
      }
    });
  }
}

8.5 主页面集成（pages/Index.ets）

import { WebSocketService } from '../service/WebSocketService';
import { StockQuote } from '../model/StockQuote';
import { NotificationService } from '../service/NotificationService';
import { KLineChart } from '../components/KLineChart';

@Entry
@Component
struct Index {
  @State stockQuotes: StockQuote[] = []; // 股票列表
  private wsService: WebSocketService = new WebSocketService();

  aboutToAppear(): void {
    // 连接WebSocket并订阅行情
    this.wsService.connect().then(() => {
      this.wsService.subscribe(['600036.SH', '000001.SZ']); // 订阅示例股票
      // 注册数据监听器
      this.wsService.addListener((quote: StockQuote) => {
        this.updateQuote(quote);
        // 检查涨跌幅提醒（阈值±5%）
        NotificationService.sendQuoteAlert(quote, 5);
      });
    }).catch(err => {
      console.error('Connect failed:', err);
    });
  }

  // 更新行情列表
  updateQuote(newQuote: StockQuote): void {
    const index = this.stockQuotes.findIndex(q => q.stockCode === newQuote.stockCode);
    if (index >= 0) {
      this.stockQuotes[index] = newQuote;
    } else {
      this.stockQuotes.push(newQuote);
    }
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.stockQuotes, (quote: StockQuote) => {
          ListItem() {
            Row() {
              Column() {
                Text(`${quote.stockName}(${quote.stockCode})`)
                  .fontSize(16)
                  .fontWeight(FontWeight.Bold)
                Text(`当前价: ${quote.currentPrice.toFixed(2)}`)
                  .fontSize(14)
              }
              Blank()
              Column() {
                Text(`${quote.changePercent >= 0 ? '+' : ''}${quote.changePercent.toFixed(2)}%`)
                  .fontSize(16)
                  .fontColor(quote.changePercent >= 0 ? Color.Red : Color.Green)
                Text(`涨跌: ${quote.currentPrice - quote.preClosePrice >= 0 ? '+' : ''}${(quote.currentPrice - quote.preClosePrice).toFixed(2)}`)
                  .fontSize(12)
              }
            }
            .width('100%')
            .padding(10)
            .backgroundColor(Color.White)
            .borderRadius(8)
          }
        }, (quote: StockQuote) => quote.stockCode)
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }

  aboutToDisappear(): void {
    this.wsService.disconnect(); // 页面销毁时断开连接
  }
}

9. 运行结果与测试步骤

9.1 运行结果

• K线图：实时绘制最新K线，阳线红色、阴线绿色，影线清晰显示高低价。
• 涨跌幅提醒：当股价涨跌幅超±5%时，状态栏弹出通知，点击可跳转至K线详情页。
• 跨设备同步：在手机设置提醒后，手表会同步收到震动提醒（需设备登录同一华为账号）。

9.2 测试步骤

1. 环境验证：
   • 启动DevEco Studio，确保模拟器/真机已开启网络权限。
   • 运行应用，观察控制台是否输出WebSocket connected。
2. K线图测试：
   • 修改KLineChart的@State kLineData为模拟数据（如包含10条K线），验证绘制是否正常。
   • 调用updateData方法动态添加新K线，观察是否实时刷新。
3. 提醒功能测试：
   • 手动构造StockQuote对象（如changePercent: 6.0），调用NotificationService.sendQuoteAlert，检查通知是否弹出。
   • 点击通知，验证是否跳转至K线页（需配置正确的abilityName与uri）。

10. 部署场景

10.1 开发阶段

• 模拟数据：使用本地WebSocket服务器（如Node.js搭建）推送测试数据，避免依赖第三方接口。
• 性能分析：通过DevEco Studio的Profiler工具监控Canvas绘制帧率与内存占用。

10.2 生产环境

• 多设备适配：针对不同屏幕尺寸（手机/平板/手表）调整K线图尺寸与布局。
• 灰度发布：通过鸿蒙应用市场的灰度发布功能，逐步放量验证稳定性。

11. 疑难解答

12. 未来展望与技术趋势

12.1 技术趋势

• AI驱动的指标分析：集成机器学习模型（如LSTM）预测股价走势，在K线图叠加预测曲线。
• 3D K线图：基于鸿蒙3D引擎（如OpenHarmony的Render Service）实现立体K线展示。
• 语音交互：通过鸿蒙Voice Kit支持语音查询行情（“小艺小艺，查看茅台今日K线”）。

12.2 挑战

• 低延迟与高并发：行情服务器需支持万级并发连接，客户端需优化数据处理线程。
• 合规性：金融数据需符合监管要求（如数据加密、用户隐私保护）。

13. 总结

• 实时通信：通过WebSocket长连接与断线重连机制保障数据连续性。
• 高效绘制：利用鸿蒙Canvas与ArkUI的响应式能力，实现流畅的K线渲染。
• 智能提醒：结合分布式通知与WantAgent，提供跨设备的个性化行情提醒。