数据可视化在 Web 端已经非常成熟，ECharts、D3.js、AntV、Chart.js 等库让开发者能轻松构建出复杂图表。但当业务需要一个在离线环境下运行、直接读取本地数据文件、并且能全屏展示在拼接大屏上的可视化应用时，纯 Web 方案就会遇到瓶颈。Electron 恰好能补齐这部分能力，让数据可视化应用从“只能在浏览器里看”升级为“可以独立部署的桌面产品”。
27.4.1 为什么把数据可视化搬到桌面
有几种非常实际的场景，纯 Web 方案很难满足，而 Electron 天然契合：
- 离线数据安全
很多企业客户不允许将敏感数据上传到公网，分析工作必须完全在本地完成。Electron 应用可以直接读取本地的 CSV、Excel、JSON 甚至 SQLite 数据库文件，所有计算和渲染都在用户机器上完成，数据不出电脑。
- 大屏展示与全屏控制
在展厅、监控中心或生产车间，通常会使用多块拼接大屏来展示实时数据。Electron 可以创建无边框、自动全屏的窗口，隐藏鼠标，定时切换页面，甚至通过串口或 WebSocket 与硬件联动（例如感应器触发时切换图表）。
- 本地数据处理能力
浏览器受限于沙箱，无法高效地处理 GB 级别的日志文件。而 Electron 可以利用 Node.js 的流式读取、Worker 线程以及原生模块（如 sharp 进行图像处理、duckdb 进行 OLAP 查询）来进行大数据量的本地清洗和聚合，再将结果传给渲染进程进行可视化渲染。
- 打印与导出
报表最终需要落地为 PDF 或打印出来。Electron 可以直接调用系统打印机，或使用 BrowserWindow.webContents.printToPDF 生成高质量 PDF，比浏览器“另存为 PDF”要可控和稳定得多。
一个典型的例子是某工厂的 MES 系统看板：生产数据通过本地网络写入 SQLite，Electron 负责读取数据库、做统计汇总，再以 ECharts 渲染成产能曲线和良品率仪表盘，最终全屏显示在一块 4K 电视上。整个过程不需要任何服务器，工厂断网也能正常运行。
27.4.2 技术选型与架构设计
把数据可视化做成 Electron 桌面应用，通常采用 “前端渲染引擎 + Node.js 数据处理层 + 本地存储” 的三层架构：
前端展示层（渲染进程）
直接使用你熟悉的可视化库。推荐组合：
- ECharts：最适合快速构建常规图表（折线图、柱状图、饼图、地图等），配置项丰富，对大数据量有增量渲染和采样优化。如果需要 GL 特效，可以用
echarts-gl扩展。 - AntV（G2/S2）：适合更复杂、交互性强的图形语法类图表，或表格型的多维数据分析。
- D3.js：需要高度自定义、特殊视觉效果时的不二选择，配合 Canvas 或 SVG 可绘制任何图形。
- Three.js/Babylon.js：3D 数据可视化场景，比如数字孪生、工厂设备模型、地理空间热力图。
数据处理层（主进程或 Worker）
在渲染进程中直接读取几万行数据还好，但当数据量达到百万行级时，DOM 和 JavaScript 主线程会明显卡顿。解决方案是将数据处理逻辑放在主进程或 Web Worker 中：
- 主进程用 Node.js 的
fs.createReadStream结合csv-parser或xlsx库，流式解析大文件并做预聚合，只把必要的数据量转发给渲染进程。 - 更高效的做法是使用专门的本地分析引擎，比如 DuckDB-WASM（支持 SQL 查询，可直接在渲染进程运行）或 SQLite3（通过
better-sqlite3在主进程调用），让数据库替你完成排序、过滤和分组。 - 对于时间序列数据，可以考虑在主进程用
ffi-napi调用 C 编写的计算库，或使用WebAssembly加速，再通过 IPC 将聚合后的数组传给渲染进程。
本地存储与数据源
数据来源通常有以下几种：
- 本地文件：CSV、Excel、JSON、Parquet —— 使用 Node.js 文件 API 直接读取。
- 数据库：SQLite（最轻量）、PostgreSQL（通过
pg模块连接本地服务）、甚至可以直接连接局域网内的数据库服务器。 - 实时流：通过主进程创建 WebSocket 或 MQTT 客户端，接收实时数据推送到渲染进程，适合监控类应用。
27.4.3 关键实现细节与实践经验
1. 大屏多窗口管理
Electron 很容易实现多屏异显：你可以创建多个 BrowserWindow，每个窗口指定不同的屏幕位置和大小。例如监控室的拼接大屏由 4 块 1920×1080 屏幕组成 2×2 矩阵，你只需要创建 4 个窗口，分别赋予 x: 0, y: 0、x: 1920, y: 0 等坐标。利用 screen 模块可以枚举所有显示器的信息。
// 主进程：将窗口定位到第二块屏并全屏显示
const { screen } = require('electron');
const displays = screen.getAllDisplays();
const externalDisplay = displays.find(d => d.bounds.x !== 0 || d.bounds.y !== 0);
if (externalDisplay) {
const win = new BrowserWindow({
x: externalDisplay.bounds.x,
y: externalDisplay.bounds.y,
fullscreen: true,
frame: false,
});
win.loadFile('big-screen.html');
}2. 性能优化——大数据量渲染
当数据量达到几万条时，渲染进程可能出现卡顿。有效策略包括：
- 数据降采样：在数据处理层按时间窗聚合，只显示每个窗口的平均值或最大值，ECharts 的
dataZoom缩放时再按需请求精细数据。 - WebWorker 计算：将密集的计算逻辑放入 Worker，避免阻塞 UI 线程。
- 虚拟滚动表格：如果报表部分包含表格，不要用原生
<table>渲染数万行，使用vxe-table、ag-grid等支持虚拟滚动的组件。 - 离屏 Canvas：对于自己绘图的场景，使用
OffscreenCanvas在 Worker 中渲染，再传输位图到主线程合成。
3. 本地数据分析——让 SQL 做重活
对于需要交互式筛选、多维度聚合的报表应用，最简单的方式是在本地起一个 SQLite 数据库，将原始数据导入，之后所有查询都用 SQL 完成。这在代码复杂度上远低于手写聚合逻辑。示例：
// 主进程数据处理模块
const Database = require('better-sqlite3');
const db = new Database('/path/to/data.db');
// 监听渲染进程发来的查询请求
ipcMain.handle('query-data', (event, { startDate, endDate }) => {
const rows = db.prepare(`
SELECT date, SUM(amount) as total
FROM orders
WHERE date BETWEEN ? AND ?
GROUP BY date
ORDER BY date
`).all(startDate, endDate);
return rows;
});渲染进程拿到聚合好的数据后直接绑定到 ECharts 的 dataset 上，图表就能流畅渲染。
4. 导出报表为 PDF 或 Excel
报表导出是刚需。生成 PDF 可以调用 webContents.printToPDF()，它能完美保留 CSS 样式和图表，但图表必须是静态的 SVG 或 Canvas 快照。更简单的做法是使用 html-pdf-node 或 puppeteer（Electron 内自带 Chromium），加载一个包含图表的特殊页面，然后直接导出。
导出 Excel 可以使用 exceljs 或 xlsx-populate 库，将数据写入带有格式和公式的工作簿，并通过 dialog.showSaveDialog 让用户选择保存路径，整个过程都在本地完成，响应速度极快。
5. 暗色模式与外观定制
数据可视化大屏通常有强烈的视觉设计需求，暗色背景、霓虹光效、无边框窗口是标配。Electron 可以很方便地设置 frame: false 实现无边框窗口，配合 CSS 的 background: #0a0e27 和发光滤镜，效果非常接近原生大屏软件。而且可以通过 nativeTheme 模块跟随系统深色模式，自动切换图表配色。
27.4.4 真实案例参考
- Grafana 桌面版：虽然 Grafana 本身是 Web 服务，但社区有将其打包为 Electron 应用的方案，用于离线展示仪表盘，读取本地 Prometheus 数据或 CSV。
- Metabase 桌面版：类似将整个 BI 工具打包成本地应用，支持 SQL 查询和可视化。
- Apache Superset 的本地部署：可以通过 Electron 包装，将本地数据集导入并生成图表。
但对于大多数自研需求，你完全可以用自己熟悉的 ECharts + Electron 快速搭建一个私有化部署的看板软件，无需引入庞大的 BI 引擎。
总而言之，数据可视化桌面端是 Electron 天然的优势领域。你将前端强大的图表能力与 Node.js 的本地文件、数据库处理能力结合在一起，就能交付出一款既美观又能离线运行、既安全又高度可控的专业数据产品。这种模式在今天的工业、医疗、金融等领域的落地案例已经比比皆是，是中小企业构建数字化看板的最高效路径之一。