OpenHarmony图表如何集成

在 OpenHarmony 中集成图表，常见做法有三类：官方图表组件、第三方图表库、自绘 Canvas。下面按「最常用 → 进阶」的方式说明。

一、使用官方 / ArkUI 提供的图表组件（推荐）

OpenHarmony（API 9+）在 ArkUI 中已提供基础图表组件，适合常见业务场景。

1. 支持的图表类型

• 折线图（LineChart）
• 柱状图（BarChart）
• 饼图（PieChart）
• 散点图（ScatterChart）

2. 基本使用示例（ArkTS）

import { LineChart, LineChartModel } from '@ohos/charts'

@Entry
@Component
struct ChartPage {
  build() {
    Column() {
      LineChart({
        model: new LineChartModel()
          .setXAxisData(['Mon', 'Tue', 'Wed', 'Thu', 'Fri'])
          .setYAxisData([10, 20, 15, 25, 30])
      })
        .width('100%')
        .height(300)
    }
  }
}

⚠️ 具体 API 名称可能随版本变化，建议查看对应 API 版本的 @ohos/charts 文档。

二、使用第三方图表库（功能更强）

1. ECharts（通过 Web 组件）

OpenHarmony 支持 Web 组件，可加载 ECharts。

步骤

1. 下载 echarts.min.js
2. 放入 resources/rawfile/
3. 使用 Web 组件加载

Web({
  src: $rawfile('chart.html')
})
.width('100%')
.height(400)

chart.html 示例：

<div id="main" style="width:100%;height:100%"></div>
<script src="echarts.min.js"></script>
<script>
  var chart = echarts.init(document.getElementById('main'));
  chart.setOption({
    xAxis: { type: 'category', data: ['A','B','C'] },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: [1,2,3] }]
  });
</script>

✅ 优点：功能最全
❌ 缺点：体积大、性能略低

2. 其他开源库

• MPChart（移植版）（社区项目，不稳定）
• DawnChart / OpenChart（部分社区维护）

三、使用 Canvas 自绘（高性能 / 定制）

适合：

• 嵌入式设备
• 高性能实时图表
• 完全自定义样式

Canvas(this.context)
  .width('100%')
  .height(300)
  .onReady(() => {
    const ctx = this.context
    ctx.beginPath()
    ctx.moveTo(0, 100)
    ctx.lineTo(100, 50)
    ctx.lineTo(200, 80)
    ctx.stroke()
  })

四、集成建议（选型指南）

五、常见坑点

1. API 版本差异大（API 9 / 10 / 11 图表接口不同）
2. Web 组件需开启网络/本地权限
3. 真机性能明显优于模拟器

如果你能告诉我：

• OpenHarmony API 版本
• 使用 ArkTS / JS
• 图表类型（折线 / 饼 / 实时）

我可以直接给你 可运行示例 + 目录结构。