OpenHarmony图表如何动态更新

在 OpenHarmony（ArkUI，eTS/ArkTS） 中，图表的“动态更新”本质上是 数据状态变化 → UI 自动刷新。常见做法有以下几种，按使用场景由简到复杂说明。

一、使用官方 / 三方图表组件（推荐）

1️⃣ 使用 @ohos/mpchart（常用三方图表库）

核心思路

• 用 @State 管理数据
• 数据变化时，重新赋值
• 图表组件监听数据并刷新

示例（折线图动态更新）

import { LineChart, LineData, LineDataSet } from '@ohos/mpchart'

@Entry
@Component
struct ChartPage {
  @State dataPoints: number[] = [1, 3, 2, 5, 4]

  build() {
    Column() {
      LineChart({ data: this.getLineData() })

      Button('更新数据')
        .onClick(() => {
          // 动态修改数据
          this.dataPoints = this.dataPoints.map(v => v + Math.random() * 2)
        })
    }
  }

  getLineData(): LineData {
    const dataSet = new LineDataSet(this.dataPoints, '示例')
    return new LineData([dataSet])
  }
}

✅ 特点

• 数据变化 → UI 自动刷新
• 适合大多数业务图表

二、使用 Canvas 自绘图表（灵活但复杂）

如果你用的是 Canvas 自己画图表：

关键机制

• @State 数据变化
• Canvas 在 onDraw 中重绘

示例

@Entry
@Component
struct CanvasChart {
  @State values: number[] = [10, 20, 30]

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(200)
        .onReady(() => this.draw())

      Button('刷新')
        .onClick(() => {
          this.values = this.values.map(v => v + 5)
        })
    }
  }

  @State context: CanvasRenderingContext2D = new CanvasRenderingContext2D()

  draw() {
    this.context.clearRect(0, 0, 400, 200)
    this.values.forEach((v, i) => {
      this.context.fillRect(i * 50, 200 - v, 30, v)
    })
  }

  // 数据变化后重绘
  aboutToUpdate() {
    this.draw()
  }
}

三、实时数据更新（定时器 / 流式数据）

使用 setInterval

aboutToAppear() {
  setInterval(() => {
    this.dataPoints = [...this.dataPoints.slice(1), Math.random() * 10]
  }, 1000)
}

⚠️ 注意：

• 页面销毁时要 clearInterval
• 高频更新建议节流（如 500ms+）

四、动态更新常见坑

❌ 直接修改数组元素不生效

this.dataPoints[0] = 10 // ❌ 不会触发刷新

✅ 正确方式

this.dataPoints = [...this.dataPoints]

五、选型建议

如果你能说明：

• 使用的图表库（官方 / mpchart / 自绘）
• 图表类型（折线 / 柱状 / 饼图）
• 更新频率（点击 / 实时）

我可以直接给你 可运行的完整示例。