OpenHarmony图表怎么使用

在 OpenHarmony 中“使用图表”，通常有三种常见方式，取决于你使用的开发框架（ArkTS / ArkUI）以及图表复杂度。下面按最常用、最推荐的方式给你讲清楚。

一、最推荐方式：使用 ECharts（OpenHarmony 适配版）

✅ 适用场景

• 折线图、柱状图、饼图、散点图
• 复杂交互、动画
• 商用项目最常见

1️⃣ 安装 ECharts

使用 ohpm（OpenHarmony 包管理器）：

ohpm install @ohos/echarts

如果使用旧版本 DevEco Studio，可能是：

npm install @ohos/echarts

2️⃣ 在页面中使用 ECharts

ArkTS 示例（ArkUI）

// index.ets
import { ECharts } from '@ohos/echarts'

@Entry
@Component
struct ChartPage {
  private chart: ECharts | null = null

  build() {
    Column() {
      // 图表容器
      Stack() {
        // ECharts 组件
        ECharts({
          option: this.getOption(),
          onInit: (chart) => {
            this.chart = chart
          }
        })
          .width('100%')
          .height(300)
      }
    }
  }

  getOption() {
    return {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70],
        type: 'bar'
      }]
    }
  }
}

3️⃣ 动态更新数据

this.chart?.setOption({
  series: [{
    data: [90, 120, 130, 160, 200]
  }]
})

二、轻量方式：Canvas 自定义绘制（无第三方库）

✅ 适用场景

• 简单图表
• 对包体积敏感
• 学习原理

示例：简单柱状图

Canvas(this.context)
  .width('100%')
  .height(200)
  .onReady(() => {
    const ctx = this.context
    ctx.fillStyle = '#409EFF'
    ctx.fillRect(20, 150, 30, 50)
    ctx.fillRect(70, 100, 30, 100)
  })

三、官方 UI 组件（有限）

OpenHarmony 目前没有官方图表组件，主要依赖：

• Canvas
• XComponent（底层绘制）
• 第三方库（ECharts / mpchart）

四、常见问题

❓ ECharts 不显示？

检查：

• 容器是否有 明确宽高
• 是否在 onInit 之后调用 setOption
• API 版本是否匹配

❓ 支持鸿蒙 NEXT 吗？

✅ ECharts OpenHarmony 版支持：

• OpenHarmony 3.2+
• HarmonyOS NEXT（ArkTS）

五、推荐学习路径

1. Canvas 基础
2. ECharts 基础 option
3. 数据动态绑定
4. 自定义 tooltip / 动画

如果你愿意，可以告诉我：

• 使用的 OpenHarmony 版本
• 图表类型（折线 / 饼图 / 实时数据）
• 是否 HarmonyOS NEXT

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