OpenHarmony图表如何导出图片

在 OpenHarmony（ArkUI / eTS） 中，将图表导出为图片，通常不是“图表组件直接导出”，而是把包含图表的 UI 区域绘制成图片（PixelMap / 文件）。下面按常见场景说明。

一、核心思路（通用方案）

1. 用 componentSnapshot 截取组件
2. 得到 image.PixelMap
3. 将 PixelMap 编码为 PNG/JPEG
4. 保存到沙箱或分享

二、使用 componentSnapshot 导出（推荐）

1. 给图表组件加 id

@Component
struct ChartPage {
  build() {
    Column() {
      // 假设是图表组件
      YourChart()
        .id("chart")
    }
  }
}

2. 截图并导出

import componentSnapshot from '@ohos.arkui.componentSnapshot'
import image from '@ohos.multimedia.image'
import fileIO from '@ohos.fileio'
import common from '@ohos.app.ability.common'

async function exportChart() {
  // 1. 截图
  const pixelMap = await componentSnapshot.get("chart")

  // 2. 创建 imagePacker
  const imagePacker = image.createImagePacker()

  // 3. 编码为 PNG
  const packOpts: image.PackingOption = {
    format: "image/png",
    quality: 100
  }
  const data = await imagePacker.packToData(pixelMap, packOpts)

  // 4. 保存到沙箱
  const context = getContext(this) as common.Context
  const filePath = context.filesDir + "/chart.png"
  const file = fileIO.openSync(filePath, 0o102, 0o666)
  fileIO.writeSync(file.fd, data.buffer)
  fileIO.closeSync(file.fd)

  console.info("图表已保存：" + filePath)
}

三、如果是 ECharts / 第三方图表

ECharts for OpenHarmony

• 不能直接调用 echarts.getDataURL()
• 同样使用 componentSnapshot 截取 canvas 容器

Column() {
  EChartsView()
    .id("echart")
}

然后调用前面的 exportChart() 即可。

四、保存到相册（可选）

import photoAccessHelper from '@ohos.file.photoAccessHelper'

async function saveToGallery(srcPath: string) {
  const context = getContext(this)
  const phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context)
  await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, "png", (uri) => {
    // 拷贝文件
  })
}

⚠ 需要 ohos.permission.WRITE_IMAGEVIDEO 权限

五、常见问题

Q1：截图是空白？

• 确保组件已渲染完成（可在 onAppear 后延时）
• Canvas 图表需等待绘制完成

Q2：只导出图表不导出背景？

• 给图表容器设置透明背景
• 截图区域只包图表组件

六、总结

✅ OpenHarmony 图表导出图片 =
componentSnapshot → PixelMap → ImagePacker → 文件

如果你用的是：

• ArkUI 原生图表
• ECharts
• MPChart / 自绘 Canvas

可以告诉我具体图表库，我可以给你针对性示例。