OpenHarmony图表怎样接入数据

在 OpenHarmony 中接入图表数据，通常分三步：准备数据源 → 绑定到图表组件 → 动态更新。下面以常见场景说明，涵盖 ArkUI（eTS/ArkTS） 和主流图表方案。

一、常见图表方案选择

OpenHarmony 中常用方式：

1. 系统组件（LineChart / BarChart 等）
   • OpenHarmony 3.2+ 提供基础图表组件
2. 第三方图表库
   • @ohos/mpchart（类似 MPAndroidChart）
   • ECharts（通过 Web 组件加载）
3. Canvas 自绘图表（灵活但成本高）

二、使用系统图表组件接入数据（推荐新手）

1. 引入图表组件

import { LineChart, LineData, LineDataSet } from '@ohos/charts';

2. 准备数据

// 示例数据
let values: number[] = [10, 20, 15, 30, 25];

3. 构造图表数据

let dataSet = new LineDataSet(values, '示例数据');
let lineData = new LineData([dataSet]);

4. 在 UI 中绑定

LineChart({ data: lineData })
  .width('100%')
  .height(300)

✅ 数据直接通过 LineData 传入即可。

三、动态接入数据（网络 / 数据库）

示例：从网络获取数据

import http from '@ohos.net.http';

async function loadData() {
  let request = http.createHttp();
  let res = await request.request(
    'https://example.com/api/chart',
    { method: http.RequestMethod.GET }
  );

  let json = JSON.parse(res.result.toString());
  let dataList: number[] = json.data;
  return dataList;
}

在页面中使用

@State chartData: number[] = [];

aboutToAppear() {
  loadData().then(data => {
    this.chartData = data;
  });
}

四、使用 ECharts（Web 方式）

1. 加载本地 HTML

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

2. HTML 中定义图表

<div id="chart" style="width:100%;height:400px"></div>
<script src="echarts.min.js"></script>
<script>
  let chart = echarts.init(document.getElementById('chart'));
  chart.setOption({
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'line', data: [] }]
  });
</script>

3. 通过 postMessage 传数据

this.webController.postMessage({
  type: 'update',
  data: [1, 2, 3, 4]
});

五、数据库数据接入（本地）

使用 @ohos/data.relationalStore

let result = await rdbStore.querySql(
  'SELECT value FROM chart_data'
);

再转换为图表所需数组即可。

六、常见问题

✅ 数据不显示

• 检查数据是否为空
• 检查组件宽高是否生效

✅ 动态更新无效

• 使用 @State 或 AppStorage
• 确保重新 setData

七、总结流程

数据源（网络/DB/本地）
   ↓
转换为数组/对象
   ↓
构造图表数据模型
   ↓
绑定到图表组件
   ↓
状态更新 → 自动刷新

如果你用的是 具体版本（如 OpenHarmony 3.2 / 4.0） 或 具体图表库（MPChart / ECharts），我可以给你更精准的示例代码。