鸿蒙 Electron 实战：跨端数据可视化与鸿蒙图表能力融合方案

在鸿蒙与 Electron 的融合开发中，跨端数据可视化是企业级应用的重要场景 —— 比如鸿蒙设备采集的工业数据、物联网传感器数据，需要在 Electron 桌面端以图表形式直观展示；同时 Electron 端的统计数据也能同步到鸿蒙平板端进行大屏展示。鸿蒙提供了丰富的原生图表组件，而 Electron 可借助 ECharts 等前端可视化库实现灵活渲染，本文将实现两者的融合，打造 “鸿蒙采集数据、Electron 可视化展示 + 双向数据同步渲染” 的完整方案，附带可直接运行的代码案例和工程化配置。

一、核心价值与应用场景

1. 核心价值

• 数据同源，多端渲染：鸿蒙与 Electron 共享同一数据源，各自采用原生 / 前端技术实现图表渲染，兼顾跨端一致性与原生体验。
• 轻量化集成：通过 WebSocket 实现数据实时同步，无需复杂的中间件，开发成本低。
• 能力互补：Electron 借助 ECharts 实现复杂的交互式图表，鸿蒙利用原生图表组件保障低设备的性能表现。

2. 典型应用场景

• 工业监控：鸿蒙工业网关采集设备运行数据，Electron 端以折线图、仪表盘展示实时参数，鸿蒙平板端展示汇总柱状图。
• 物联网监控：鸿蒙传感器采集温湿度数据，Electron 端展示实时趋势图，鸿蒙手机端展示告警饼图。
• 办公统计：Electron 端生成的销售数据报表，同步到鸿蒙平板端进行大屏展示。

二、环境搭建与前置准备

1. 基础环境要求

• Electron：Node.js（v18+）、Electron（v28+）、echarts（数据可视化）、ws（WebSocket 数据同步）、axios（数据请求）
• 鸿蒙：DevEco Studio（最新版）、鸿蒙 SDK（API 10+）、鸿蒙设备 / 模拟器（开启开发者模式）
• 数据模拟：本文使用随机数模拟鸿蒙设备采集的传感器数据，实际项目可替换为真实硬件数据采集逻辑

2. 工程化初始化

2.1 创建 Electron 工程

bash

运行

# 初始化项目 mkdir harmony-electron-chart && cd harmony-electron-chart npm init -y # 安装核心依赖 npm install electron electron-builder echarts ws --save npm install nodemon --save-dev

2.2 配置 package.json

json

{ "name": "harmony-electron-chart", "version": "1.0.0", "main": "main/index.js", "scripts": { "start": "electron .", "dev": "nodemon --exec electron .", "build": "electron-builder" }, "build": { "appId": "com.example.harmonychart", "productName": "HarmonyElectronChart", "directories": { "output": "dist" }, "win": { "target": "nsis" }, "mac": { "target": "dmg" }, "linux": { "target": "deb" } } }

2.3 鸿蒙工程配置（网络与权限）

在鸿蒙工程的entry/src/main/module.json5中添加网络权限：

json5

{ "module": { "name": "entry", "type": "entry", "requestPermissions": [ { "name": "ohos.permission.INTERNET" }, { "name": "ohos.permission.DISTRIBUTED_DATASYNC" } ], "distributedConfiguration": { "deviceCommunication": true, "dataSync": true } } }

三、核心代码案例：跨端数据同步与可视化渲染

整体流程说明

1. 鸿蒙端：模拟传感器数据采集（温湿度、设备负载），通过 WebSocket 将实时数据发送到 Electron 端；同时接收 Electron 端的统计数据，使用鸿蒙原生图表组件渲染。
2. Electron 端：启动 WebSocket 服务，接收鸿蒙端的实时数据，通过 ECharts 渲染交互式图表；同时生成统计数据并发送到鸿蒙端。

步骤 1：Electron 端实现 WebSocket 服务与 ECharts 可视化

1.1 Electron 主进程（WebSocket 服务 + 窗口管理）

javascript

运行

// main/index.js const { app, BrowserWindow, ipcMain } = require('electron'); const path = require('path'); const WebSocket = require('ws'); // 全局变量 let mainWindow; let wss; // WebSocket服务实例 // 存储鸿蒙客户端连接 let harmonyWs = null; // 创建Electron窗口 function createWindow() { mainWindow = new BrowserWindow({ width: 1200, height: 800, webPreferences: { preload: path.join(__dirname, '../preload/index.js'), contextIsolation: true, sandbox: false } }); mainWindow.loadFile(path.join(__dirname, '../renderer/index.html')); mainWindow.webContents.openDevTools(); } // 启动WebSocket服务（端口：8080） function startWebSocketServer() { wss = new WebSocket.Server({ port: 8080 }); console.log('Electron WebSocket服务已启动，端口：8080'); wss.on('connection', (ws) => { console.log('鸿蒙设备已连接'); harmonyWs = ws; // 接收鸿蒙端数据，转发到渲染进程 ws.on('message', (data) => { const dataStr = data.toString(); console.log('收到鸿蒙端数据：', dataStr); mainWindow.webContents.send('harmony-data', JSON.parse(dataStr)); }); // 监听连接关闭 ws.on('close', () => { console.log('鸿蒙设备连接关闭'); harmonyWs = null; }); ws.on('error', (err) => { console.error('WebSocket错误：', err); harmonyWs = null; }); }); } // 暴露发送数据到鸿蒙的接口 ipcMain.handle('send-data-to-harmony', (event, data) => { if (harmonyWs && harmonyWs.readyState === WebSocket.OPEN) { harmonyWs.send(JSON.stringify(data)); return { success: true }; } else { return { success: false, message: '鸿蒙设备未连接' }; } }); // 暴露获取本机IP的接口 ipcMain.handle('get-local-ip', () => { const os = require('os'); const interfaces = os.networkInterfaces(); for (const dev in interfaces) { const iface = interfaces[dev]; for (const alias of iface) { if (alias.family === 'IPv4' && !alias.internal) { return alias.address; } } } return '127.0.0.1'; }); // 应用就绪后初始化 app.whenReady().then(() => { createWindow(); startWebSocketServer(); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); }); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { if (wss) wss.close(); app.quit(); } });

1.2 Electron 预加载脚本（暴露 API）

javascript

运行

// preload/index.js const { contextBridge, ipcRenderer } = require('electron'); contextBridge.exposeInMainWorld('electronApi', { // 获取本机IP getLocalIp: () => ipcRenderer.invoke('get-local-ip'), // 发送数据到鸿蒙 sendDataToHarmony: (data) => ipcRenderer.invoke('send-data-to-harmony', data), // 监听鸿蒙数据 onHarmonyData: (callback) => ipcRenderer.on('harmony-data', (event, data) => callback(data)), // 移除监听 removeHarmonyDataListener: () => ipcRenderer.removeAllListeners('harmony-data') });

1.3 Electron 渲染进程（ECharts 可视化渲染）

html

预览

<!-- renderer/index.html --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>鸿蒙Electron数据可视化</title> <style> body { font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5; margin: 0; } .chart-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1200px; margin: 0 auto; } .chart-item { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); height: 350px; } #temperatureChart, #humidityChart, #loadChart, #alarmChart { width: 100%; height: 100%; } .status { max-width: 1200px; margin: 20px auto; padding: 10px; border-radius: 4px; background-color: #e9ecef; } button { padding: 10px 20px; margin: 10px 0; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } </style> </head> <body> <div class="status" id="status">就绪，等待鸿蒙数据连接...</div> <button onclick="sendStatData()">发送统计数据到鸿蒙</button> <div class="chart-container"> <div class="chart-item"> <h3>实时温度（℃）</h3> <div id="temperatureChart"></div> </div> <div class="chart-item"> <h3>实时湿度（%）</h3> <div id="humidityChart"></div> </div> <div class="chart-item"> <h3>设备负载（%）</h3> <div id="loadChart"></div> </div> <div class="chart-item"> <h3>告警类型分布</h3> <div id="alarmChart"></div> </div> </div> <script src="../node_modules/echarts/dist/echarts.min.js"></script> <script> // 初始化ECharts实例 const temperatureChart = echarts.init(document.getElementById('temperatureChart')); const humidityChart = echarts.init(document.getElementById('humidityChart')); const loadChart = echarts.init(document.getElementById('loadChart')); const alarmChart = echarts.init(document.getElementById('alarmChart')); // 初始化数据 let timeData = []; let temperatureData = []; let humidityData = []; let loadData = []; // 告警数据 const alarmData = [ { name: '温度异常', value: 0 }, { name: '湿度异常', value: 0 }, { name: '负载过高', value: 0 }, { name: '网络异常', value: 0 } ]; // 配置图表选项 const lineOption = { title: { left: 'center' }, tooltip: { trigger: 'axis' }, legend: { top: 0 }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: timeData, boundaryGap: false }, yAxis: { type: 'value' }, series: [{ type: 'line', data: [] }] }; const pieOption = { title: { left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 10 }, series: [{ name: '告警数量', type: 'pie', radius: ['40%', '70%'], data: alarmData, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; // 初始化图表 temperatureChart.setOption({ ...lineOption, series: [{ name: '温度', data: temperatureData }] }); humidityChart.setOption({ ...lineOption, series: [{ name: '湿度', data: humidityData }] }); loadChart.setOption({ ...lineOption, series: [{ name: '负载', data: loadData }] }); alarmChart.setOption(pieOption); // 状态更新函数 function updateStatus(message, isError = false) { const now = new Date().toLocaleString(); const statusDiv = document.getElementById('status'); statusDiv.innerHTML = `[${now}] ${message}`; statusDiv.style.color = isError ? 'red' : 'black'; } // 处理鸿蒙数据 function handleHarmonyData(data) { updateStatus(`收到数据：温度${data.temperature}℃，湿度${data.humidity}%，负载${data.load}%`); // 限制数据长度（最多显示20个点） const maxLen = 20; const now = new Date().toLocaleTimeString(); timeData.push(now); temperatureData.push(data.temperature); humidityData.push(data.humidity); loadData.push(data.load); if (timeData.length > maxLen) { timeData.shift(); temperatureData.shift(); humidityData.shift(); loadData.shift(); } // 更新告警数据（模拟） if (data.temperature > 35) alarmData[0].value++; if (data.humidity > 70) alarmData[1].value++; if (data.load > 80) alarmData[2].value++; // 更新图表 temperatureChart.setOption({ xAxis: { data: timeData }, series: [{ data: temperatureData }] }); humidityChart.setOption({ xAxis: { data: timeData }, series: [{ data: humidityData }] }); loadChart.setOption({ xAxis: { data: timeData }, series: [{ data: loadData }] }); alarmChart.setOption({ series: [{ data: alarmData }] }); } // 发送统计数据到鸿蒙 async function sendStatData() { const statData = { type: 'stat', totalAlarm: alarmData.reduce((sum, item) => sum + item.value, 0), avgTemperature: (temperatureData.reduce((sum, val) => sum + val, 0) / temperatureData.length).toFixed(1), alarmRatio: (alarmData[0].value / (alarmData.reduce((sum, item) => sum + item.value, 0) || 1) * 100).toFixed(1) }; const response = await window.electronApi.sendDataToHarmony(statData); if (response.success) { updateStatus(`已发送统计数据：${JSON.stringify(statData)}`); } else { updateStatus(`发送失败：${response.message}`, true); } } // 初始化监听鸿蒙数据 window.electronApi.onHarmonyData(handleHarmonyData); updateStatus(`本机IP：${await window.electronApi.getLocalIp()}，等待鸿蒙设备连接`); // 页面关闭时移除监听 window.onbeforeunload = () => { window.electronApi.removeHarmonyDataListener(); }; </script> </body> </html>

步骤 2：鸿蒙端实现数据采集与 WebSocket 客户端

2.1 鸿蒙端数据采集工具类（模拟传感器数据）

typescript

运行

// entry/src/main/ets/utils/DataCollectUtil.ets // 模拟传感器数据结构 export interface SensorData { type: 'real-time'; temperature: number; // 温度（℃） humidity: number; // 湿度（%） load: number; // 设备负载（%） timestamp: number; } // 生成模拟传感器数据 export function generateSensorData(): SensorData { // 模拟温度：25~40℃随机波动 const temperature = (25 + Math.random() * 15).toFixed(1); // 模拟湿度：40~80%随机波动 const humidity = (40 + Math.random() * 40).toFixed(1); // 模拟负载：30~90%随机波动 const load = (30 + Math.random() * 60).toFixed(1); return { type: 'real-time', temperature: Number(temperature), humidity: Number(humidity), load: Number(load), timestamp: Date.now() }; }

2.2 鸿蒙端 WebSocket 客户端（数据发送与接收）

typescript

运行

// entry/src/main/ets/utils/WebSocketClient.ets import webSocket from '@ohos.net.webSocket'; import { BusinessError } from '@ohos.base'; import { SensorData } from './DataCollectUtil'; // WebSocket实例 let ws: webSocket.WebSocket | null = null; // 数据发送定时器 let dataTimer: number | null = null; // 连接Electron的WebSocket服务 export async function connectElectronWs(serverIp: string, port: number) { try { ws = webSocket.createWebSocket(); // 监听连接成功 ws.on('open', () => { console.log('已连接到Electron WebSocket服务'); // 启动定时发送数据（每1秒发送一次） startSendDataTimer(); }); // 监听接收Electron数据 ws.on('message', (message: string | ArrayBuffer) => { const data = JSON.parse(message.toString()); console.log('收到Electron统计数据：', data); // 触发UI更新（可通过回调传递到页面） if (data.type === 'stat') { onStatDataReceived(data); } }); // 监听连接关闭 ws.on('close', (code: number, reason: string) => { console.log(`WebSocket连接关闭：${code} - ${reason}`); stopSendDataTimer(); // 自动重连（5秒后） setTimeout(() => { connectElectronWs(serverIp, port); }, 5000); }); // 监听错误 ws.on('error', (error: BusinessError) => { console.error('WebSocket错误：', error); stopSendDataTimer(); }); // 连接服务 await ws.connect(`ws://${serverIp}:${port}`); } catch (error) { console.error('连接WebSocket失败：', error); setTimeout(() => { connectElectronWs(serverIp, port); }, 5000); } } // 启动定时发送数据 function startSendDataTimer() { if (dataTimer) { clearInterval(dataTimer); } // 每1秒发送一次模拟数据 dataTimer = setInterval(() => { sendSensorData(); }, 1000) as unknown as number; } // 停止定时发送数据 export function stopSendDataTimer() { if (dataTimer) { clearInterval(dataTimer); dataTimer = null; } } // 发送传感器数据 function sendSensorData() { if (ws && ws.readyState === webSocket.ReadyState.OPEN) { const data = generateSensorData(); ws.send(JSON.stringify(data)); } } // 统计数据接收回调（需在页面中实现） let onStatDataReceived: (data: any) => void = () => {}; // 设置统计数据回调 export function setStatDataCallback(callback: (data: any) => void) { onStatDataReceived = callback; } // 关闭WebSocket连接 export function closeWs() { stopSendDataTimer(); if (ws) { ws.close(); ws = null; } }

2.3 鸿蒙端页面（原生图表渲染 + 数据展示）

typescript

运行

// entry/src/main/ets/pages/Index.ets import { connectElectronWs, setStatDataCallback, closeWs, stopSendDataTimer } from '../utils/WebSocketClient'; import { Chart, ChartData, LineChartSeries, BarChartSeries } from '@ohos/components-chart'; // 鸿蒙原生图表组件 import common from '@ohos.app.ability.common'; @Entry @Component struct Index { @State message: string = '连接Electron中...'; @State statData: any = { totalAlarm: 0, avgTemperature: 0, alarmRatio: 0 }; // 折线图数据（接收Electron统计数据的历史） @State lineData: ChartData = { categories: [], series: [{ name: '总告警数', data: [] } as LineChartSeries] }; // 柱状图数据 @State barData: ChartData = { categories: ['平均温度', '告警占比(%)'], series: [{ name: '数据', data: [0, 0] } as BarChartSeries] }; private context = getContext(this) as common.UIAbilityContext; private maxDataLen = 10; // 折线图最多显示10个点 aboutToAppear() { // 连接Electron的WebSocket服务（替换为实际Electron设备IP） connectElectronWs('192.168.1.101', 8080); // 设置统计数据回调 setStatDataCallback((data) => { this.handleStatData(data); }); } aboutToDisappear() { // 清理资源 closeWs(); stopSendDataTimer(); } // 处理Electron统计数据 handleStatData(data: any) { this.statData = data; // 更新柱状图 this.barData.series[0].data = [Number(data.avgTemperature), Number(data.alarmRatio)]; // 更新折线图 const now = new Date().toLocaleTimeString(); this.lineData.categories.push(now); this.lineData.series[0].data.push(data.totalAlarm); // 限制数据长度 if (this.lineData.categories.length > this.maxDataLen) { this.lineData.categories.shift(); this.lineData.series[0].data.shift(); } this.message = `收到统计数据：总告警${data.totalAlarm}条，平均温度${data.avgTemperature}℃`; } build() { Column() { Text(this.message) .fontSize(20) .fontWeight(FontWeight.Bold) .margin({ top: 20, bottom: 20 }) .textAlign(TextAlign.Center); // 原生折线图：总告警数趋势 Chart({ type: Chart.Type.LINE, data: this.lineData, options: { title: { text: '总告警数趋势' }, legend: { position: Chart.LegendPosition.BOTTOM }, xAxis: { label: { rotate: 30 } }, yAxis: { min: 0 } } }) .width('90%') .height(300) .margin({ bottom: 20 }); // 原生柱状图：平均温度与告警占比 Chart({ type: Chart.Type.BAR, data: this.barData, options: { title: { text: '统计数据' }, legend: { position: Chart.LegendPosition.BOTTOM } } }) .width('90%') .height(300); } .width('100%') .height('100%') .backgroundColor(Color.White); } }

四、运行与测试流程

1. 鸿蒙侧运行

1. 在 DevEco Studio 中，修改鸿蒙代码中的 Electron 设备 IP 地址（确保两者处于同一局域网）。
2. 将鸿蒙工程运行到真机或模拟器，应用将自动连接 Electron 的 WebSocket 服务并发送模拟数据。

2. Electron 侧运行

1. 执行命令启动 Electron 应用：

   bash

   运行

   npm run start

2. 查看 Electron 界面，将实时显示鸿蒙端发送的温湿度、负载数据，并渲染为折线图和饼图。
3. 点击 “发送统计数据到鸿蒙” 按钮，鸿蒙端将接收统计数据并通过原生图表渲染。

3. 测试验证点

• Electron 端是否实时接收鸿蒙数据并更新图表。
• 鸿蒙端是否接收 Electron 统计数据并渲染原生图表。
• 数据超过最大长度时，图表是否自动截断旧数据。
• 连接断开后，鸿蒙端是否自动重连。

五、工程化优化与避坑指南

1. 优化建议

• 数据压缩：若传输大量数据，可使用 gzip 压缩数据后再通过 WebSocket 发送，减少网络开销。
• 数据持久化：将重要的传感器数据存储到鸿蒙分布式数据库和 Electron 本地数据库，便于历史数据查询。
• 异常处理：添加数据合法性校验，过滤异常数据（如温度为负数、负载超过 100%）。
• 图表交互增强：Electron 端添加图表的缩放、导出图片功能，鸿蒙端添加图表的点击事件响应。

2. 常见坑点与解决方案

• WebSocket 连接失败：确保 Electron 与鸿蒙设备处于同一局域网，关闭防火墙，检查端口是否被占用。
• 鸿蒙图表组件渲染失败：确保鸿蒙工程已正确引入图表组件依赖，DevEco Studio 的 SDK 版本与组件版本兼容。
• Electron 图表数据更新卡顿：限制数据长度（如最多显示 20 个点），避免渲染过多数据导致性能下降。
• 数据同步延迟：减少 WebSocket 发送数据的频率（如从 1 秒一次改为 2 秒一次），或使用批量发送策略。

六、扩展场景：真实硬件数据采集

本文使用随机数模拟传感器数据，实际项目中可替换为真实硬件数据采集逻辑：

1. 鸿蒙端：通过鸿蒙的硬件访问 API（如 GPIO、串口）读取传感器数据，或通过 MQTT 接收物联网设备数据。
2. Electron 端：通过串口、USB 或网络协议读取本地硬件数据，同步到鸿蒙端进行渲染。

七、总结

本文通过 WebSocket 实现了鸿蒙与 Electron 的实时数据同步，结合 ECharts 和鸿蒙原生图表组件，完成了跨端数据可视化的完整方案。这种方案充分利用了 Electron 前端可视化的灵活性和鸿蒙原生组件的性能优势，解决了跨端数据展示的核心问题。

开发者可基于本文的思路，拓展更多功能，如添加数据告警阈值设置、历史数据回放、多设备数据聚合展示等，进一步完善跨端数据可视化体系。随着鸿蒙生态的不断完善，Electron 与鸿蒙的融合将为数据可视化类跨端应用带来更多创新可能。

欢迎大家加入[开源鸿蒙跨平台开发者社区](https://openharmonycrossplatform.csdn.net)，一起共建开源鸿蒙跨平台生态。