OpenHarmony图表如何配置

在 OpenHarmony 中，“图表”通常不是系统原生控件，而是通过 ArkUI（eTS / ArkTS） 自行绘制或使用第三方库来实现。下面按常见方案给你一个清晰配置说明。

一、OpenHarmony 图表常见实现方式

方式 1：使用 ArkUI Canvas 自绘（官方推荐、可控性最高）

适合：折线图、柱状图、饼图等基础图表

核心能力

• Canvas
• CanvasRenderingContext2D
• Courses（绘制路径）

方式 2：使用第三方图表库（开发效率高）

常见库：

• ECharts（通过 Web 组件）
• MPChart 移植版（社区）
• OpenHarmony SIG 图表组件

二、Canvas 自绘图表（示例：折线图）

1️⃣ 页面结构（ArkTS）

@Entry
@Component
struct ChartPage {
  private context: CanvasRenderingContext2D | null = null

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(300)
        .onReady(() => {
          this.drawLineChart()
        })
    }
  }
}

2️⃣ 绘制折线图

drawLineChart() {
  const ctx = this.context
  if (!ctx) return

  const width = 360
  const height = 300
  const padding = 40

  const data = [20, 50, 30, 80, 60, 90]

  ctx.clearRect(0, 0, width, height)

  // 坐标轴
  ctx.beginPath()
  ctx.moveTo(padding, padding)
  ctx.lineTo(padding, height - padding)
  ctx.lineTo(width - padding, height - padding)
  ctx.stroke()

  // 折线
  ctx.beginPath()
  data.forEach((value, index) => {
    const x = padding + index * 50
    const y = height - padding - value * 2
    if (index === 0) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
  })
  ctx.strokeStyle = '#007DFF'
  ctx.stroke()
}

✅ 特点：

• 完全可控
• 无依赖
• 适合定制 UI

三、使用 ECharts（Web 组件方案）

1️⃣ 使用 Web 组件

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct EChartsPage {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: $rawfile('echarts.html'), controller: this.controller })
        .width('100%')
        .height('100%')
    }
  }
}

2️⃣ echarts.html 示例

<div id="main" style="width:100%;height:300px"></div>
<script src="echarts.min.js"></script>
<script>
  const chart = echarts.init(document.getElementById('main'))
  chart.setOption({
    xAxis: { type: 'category', data: ['Mon','Tue','Wed'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150], type: 'bar' }]
  })
</script>

✅ 适合：

• 复杂图表
• 交互图表
• 快速开发

四、OpenHarmony 图表配置关键点

五、选择建议

• ✅ 简单图表 → Canvas 自绘
• ✅ 复杂 / 动态图表 → ECharts
• ✅ 鸿蒙原生风格 → 自绘 + 设计规范

如果你告诉我：

• OpenHarmony 版本（3.x / 4.x）
• 图表类型（折线 / 柱状 / 饼图）
• 是否必须“纯原生”

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