OpenHarmony图表如何做响应式

在 OpenHarmony（ArkUI / eTS） 中，做“响应式图表”通常包含两层含义：

1. 布局响应式：图表随屏幕尺寸、横竖屏变化自适应
2. 数据响应式：数据变化后图表自动刷新

下面按常见场景说明。

一、布局响应式（图表自适应容器）

1. 使用 @StorageLink / @State + 容器尺寸

OpenHarmony 没有 DOM，但可以通过 容器尺寸监听 实现。

示例：使用 onAreaChange

@Component
struct ChartPage {
  @State chartWidth: number = 300
  @State chartHeight: number = 200

  build() {
    Column() {
      Stack()
        .width('100%')
        .height(300)
        .onAreaChange((oldValue, newValue) => {
          this.chartWidth = newValue.width
          this.chartHeight = newValue.height
        })
    }
  }
}

然后将 chartWidth / chartHeight 传给图表组件。

2. 图表组件根据 size 重绘

如果你用的是 Canvas 自绘图表：

Canvas(this.context)
  .width(this.chartWidth)
  .height(this.chartHeight)
  .onReady(() => {
    this.drawChart()
  })

在 drawChart() 中：

• 使用 this.chartWidth 计算坐标
• 不写死像素值

✅ 效果：屏幕变化 → 尺寸变化 → Canvas 重绘

二、使用官方/三方图表库（推荐）

1. OpenHarmony 官方图表（ArkUI Charts）

OpenHarmony 提供了 @ohos/charts 或系统图表组件（取决于版本）。

import { LineChart } from '@ohos/charts'

LineChart({
  width: '100%',
  height: '100%',
  data: this.chartData
})

✅ 特点：

• 自动适配父容器
• 支持响应式布局

2. 使用 ECharts（OpenHarmony 适配版）

如果你用的是 ECharts OpenHarmony 版：

ECharts({
  option: this.option,
  width: '100%',
  height: '100%'
})

窗口变化：

this.echarts.resize()

三、数据响应式（图表自动更新）

1. 使用 @State

@State data: number[] = [10, 20, 30]

// 修改数据
this.data = [15, 25, 35]

图表组件监听 @State 自动刷新。

2. 使用 @Observed / @ObjectLink

适合复杂图表数据：

@Observed
class ChartModel {
  series: number[] = []
}

@Component
struct Chart {
  @ObjectLink model: ChartModel

  build() {
    // 图表随 model 变化
  }
}

四、横竖屏 / 多设备响应式

1. 媒体查询

import mediaquery from '@ohos.mediaquery'

let listener = mediaquery.matchMediaSync('(orientation: landscape)')
listener.on('change', (e) => {
  // 重新设置图表尺寸
})

2. 使用 Grid / Flex

Flex({ direction: BreakpointUtils.isPhone() ? Column : Row }) {
  Chart()
}

五、推荐实践方案

✅ 最佳实践组合

• 图表容器：width('100%') + onAreaChange
• 图表库：官方 Charts 或 ECharts
• 数据：@State / @Observed
• 重绘：尺寸变化 → resize / redraw

如果你能告诉我：

• 用的是 ArkTS / JS / eTS
• 是否用 Canvas / ECharts / 官方图表
• 目标设备（手机 / 平板 / 智慧屏）

我可以直接给你一套可复制的完整示例代码。