HarmonyOS 鸿蒙Next中ECharts 图表数据传递

HarmonyOS 鸿蒙Next中ECharts 图表数据传递 ArkTS 如何向 WebView 中的 ECharts 传递数据？（问题来源项目案例整理:https://github.com/heqiyuan35-creator/BaitKnows.git）

3 回复

通过 runJavaScript 调用 HTML 中定义的 JS 函数：

// ArkTS 端
private initCharts(): void {
  const data = { labels: ['周一', '周二'], values: [10, 20] };
  const json = JSON.stringify(data)
    .replace(/\\/g, '\\\\')
    .replace(/'/g, "\\'");  // 转义特殊字符
  this.webController.runJavaScript(`initChart('${json}')`);
}

// HTML 端
function initChart(dataJson) {
  const data = JSON.parse(dataJson);
  const chart = echarts.init(document.getElementById('chart'));
  chart.setOption({
    xAxis: { data: data.labels },
    series: [{ type: 'bar', data: data.values }]
  });
}

更多关于HarmonyOS 鸿蒙Next中ECharts 图表数据传递的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，ECharts图表数据传递主要通过setOption方法实现。开发者需将符合ECharts格式的数据对象传入该方法以更新图表。数据格式通常为包含series等配置项的JSON对象。鸿蒙的ArkTS/ArkUI框架中，可通过状态变量管理数据，并在数据变化时调用setOption刷新图表。

在 HarmonyOS Next 的 ArkTS 中，向 WebView 中的 ECharts 传递数据，核心是通过 WebView 组件的 javaScriptProxy 方法建立双向通信。以下是具体实现方案：

1. 核心原理

使用 WebViewController 的 javaScriptProxy 方法注册一个 ArkTS 对象到 Web 侧，让 Web 页面中的 JavaScript 能够调用该对象的方法。同时，ArkTS 侧可以通过 runJavaScript 方法执行 JavaScript 代码来操作 ECharts。

2. 关键步骤

2.1 在 ArkTS 侧注册 JavaScript 代理对象

import webview from '@ohos.web.webview';

// 1. 创建 WebViewController
private webviewController: webview.WebviewController = new webview.WebviewController();

// 2. 定义一个类，其方法供 Web 侧调用
class ChartDataBridge {
  // 此方法将被 Web 侧 JavaScript 调用，用于请求数据
  getChartData(): string {
    // 返回 JSON 格式的图表数据
    const data = {
      xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      series: [120, 200, 150, 80, 70, 110, 130]
    };
    return JSON.stringify(data);
  }
}

// 3. 在 WebView 组件加载完成后注册代理
private onPageEnd(e: webview.WebResourceResponse) {
  // 注册 ChartDataBridge 实例到 Web 侧，命名为 'chartBridge'
  this.webviewController.javaScriptProxy({
    object: new ChartDataBridge(),
    name: 'chartBridge',
    methodList: ['getChartData'], // 暴露的方法列表
    controller: this.webviewController
  });
}

2.2 在 WebView 的 HTML/JavaScript 侧接收数据并渲染图表

<!DOCTYPE html>
<html>
<body>
  <div id="chart" style="width: 600px;height:400px;"></div>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script>
    // 初始化 ECharts 实例
    const chart = echarts.init(document.getElementById('chart'));

    // 调用 ArkTS 侧注册的 chartBridge.getChartData() 方法获取数据
    const jsonData = chartBridge.getChartData();
    const data = JSON.parse(jsonData);

    // 配置图表选项
    const option = {
      xAxis: {
        type: 'category',
        data: data.xAxis
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: data.series,
        type: 'line'
      }]
    };

    // 渲染图表
    chart.setOption(option);
  </script>
</body>
</html>

2.3 ArkTS 侧主动向 WebView 推送数据

如果需要 ArkTS 主动更新图表数据，可以使用 runJavaScript：

// 定义新的数据
const newData = {
  xAxis: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  series: [95, 150, 210, 180, 250, 190]
};

// 通过 runJavaScript 调用 Web 侧的 JavaScript 函数
this.webviewController.runJavaScript(
  `updateChart(${JSON.stringify(newData)})`
);

在 Web 侧需要定义对应的 updateChart 函数：

function updateChart(data) {
  chart.setOption({
    xAxis: { data: data.xAxis },
    series: [{ data: data.series }]
  });
}

3. 完整流程

  1. 初始化通信：在 onPageEnd 回调中注册 javaScriptProxy。
  2. 数据请求：Web 页面加载时，通过 chartBridge.getChartData() 主动获取初始数据。
  3. 数据更新：ArkTS 侧可通过 runJavaScript 主动触发图表更新。

4. 注意事项

  • 时机问题：确保在 Web 页面加载完成后再调用 javaScriptProxy 和 runJavaScript。
  • 数据格式：使用 JSON 作为数据交换格式，确保两端数据解析一致。
  • 错误处理：在 runJavaScript 中可考虑使用 Promise 方式获取执行结果，进行错误捕获。

此方案实现了 ArkTS 与 WebView 内 ECharts 的高效数据通信，既支持 Web 侧主动拉取，也支持 ArkTS 侧主动推送，满足动态图表更新需求。

回到顶部