★ FEATURED ARTICLE 简介本资源是一套面向Java桌面应用开发者的SWT与JavaFX混合GUI工程实践案例聚焦于在原生级界面中嵌入高性能网页渲染能力解决Java传统桌面程序调用ECharts动态图表、实现Web数据可视化及大文件分片上传的集成难题。项目完整实现了SWT主窗口与JavaFX WebView的深度整合利用JxBrowser增强跨平台浏览器兼容性并通过自定义JavaScript桥接机制实现实时图表刷新与数据交互。资源共72个文件含12个核心Java源码涵盖SWT主窗体、JFXPanel嵌入逻辑、ECharts初始化与数据推送、44个编译后class文件、6个关键jar包含jxbrowser-win32/64-6.21/6.22及jfxswt、4个HTML模板页含ECharts配置与Ajax上传接口整体压缩包达129.56MB结构清晰模块分离明确。目前已有327人学习下载开发者可直接运行调试获取可复用的混合GUI架构模板、ECharts动态绑定方案、分片上传客户端逻辑及典型排错配置如JVM参数适配、WebView线程调度、JS上下文注入时机等。1. 一个 Java 桌面应用的“网页可视化中枢”用 SWT JavaFX 双引擎驱动内嵌浏览器渲染 ECharts 图表你有没有遇到过这种场景客户拍着桌子说“报表页面必须用我们 Web 端那套 ECharts但整个系统是 Java Swing/SWT 写的桌面客户端不能切 Web 架构也不能让运维多部署一套服务”——这不是需求刁难而是真实产线里高频出现的跨技术栈可视化落地困境。这个项目就是为它而生的它不造轮子不改 ECharts也不动后端 API而是用 Java 原生能力在桌面端直接加载 HTML JS 页面把echarts.min.js当作“本地资源”跑起来同时让 Java 代码能双向通信——JS 调 Java 方法传数据Java 主动触发 JS 渲染图表、更新图例、导出 PNG。核心不是“怎么显示网页”而是“怎么让网页和 Java 进程真正活在同一个上下文里”。它适合两类人一是维护老 SWT/Swing 桌面系统的开发者想低成本接入现代 Web 可视化二是做工业监控、金融终端、实验室仪器控制软件的团队需要离线可用、无依赖、低延迟的图表嵌入方案。项目已实测通过 JDK 11–17、Windows/macOS/Linux 三端ECharts v5.4.3 全功能可用含地图、3D 散点、动态时间轴且内存占用比全量 WebView2 或 Electron 小 60% 以上。2. 技术选型与架构设计为什么是 SWT JavaFX 而不是 Swing 或纯 WebView2这个项目没走“单引擎”路线而是明确采用SWT 作为主窗口容器 JavaFX WebView 作为渲染内核的混合架构。这不是炫技而是对桌面 Java 生态多年踩坑后的理性收敛。下面拆解三层设计逻辑2.1 为什么弃用 Swing——血泪经验换来的决策Swing 的JEditorPane和JWebPane已废弃根本无法执行现代 JSJxBrowser商业授权贵且体积大DJNativeSwing早已停止维护连 JDK 11 都跑不起来。某高校实验室曾用 Swing JxBrowser 做设备监控面板结果发现每次图表缩放都触发 GC30 分钟后 JVM heap 占满 95%强制重启成日常操作。而 SWT 的Browser控件在 Windows 上底层调用 IE/Edge Legacy在 macOS 上调用 WebKit在 Linux 上可桥接 GTK WebKit2 —— 但它对 ES6 支持弱ECharts 的import语法直接报错。所以单纯靠 SWT Browser 行不通。2.2 为什么选 JavaFX WebView——轻量、可控、可调试JavaFX 的WebView是基于 WebKit 的独立渲染引擎JDK 11 已模块化为javafx.web它不依赖系统浏览器自带 JS 引擎JavaScriptCore支持完整的 DOM API、Canvas、WebGL需开启-Dprism.orderes2,sw最关键的是它提供WebEngine.executeScript()和WebEngine.getLoadWorker().stateProperty()等细粒度控制接口。项目中所有 ECharts 初始化、数据注入、事件绑定都通过executeScript()同步调用完成避免了异步回调时序混乱问题。更关键的是JavaFX WebView 支持setUserAgent()自定义 UA可绕过某些网站的“非浏览器环境”检测支持setOnAlert()捕获 JSalert()方便调试还支持getDocument().getElementById()直接操作 DOM 节点——这些是 SWT Browser 根本不具备的能力。2.3 为什么 SWT JavaFX 混合——取长补短的工程妥协SWT 的优势在于原生控件质感、高 DPI 适配成熟、与操作系统菜单栏/托盘图标无缝集成、内存占用极低。JavaFX 的短板是窗口管理弱无原生菜单栏、托盘图标需额外 JNI、高 DPI 在旧版 JDK 上有模糊问题、打包后体积大约 40MB。因此项目采用“SWT 做壳JavaFX 做芯”策略主窗口、菜单栏、状态栏、文件对话框全部用 SWT 实现中间可视化区域用Composite容器嵌入 JavaFXWebView通过SWT_AWT桥接或FXCanvas。这样既保留了 SWT 的稳定性和轻量性又获得了 JavaFX WebView 的现代 Web 能力。实际打包后总大小仅 68MB含 JRE 17远低于 Electron 方案的 200MB。2.4 通信机制设计Java ↔ JS 的双向信道如何建立通信不是靠window.open()或iframe而是通过 JavaFX 的WebEngine注入 JS 对象桥接层。核心代码在EChartBridge.java中public class EChartBridge { private final WebView webView; private final MapString, ConsumerString jsCallbacks new ConcurrentHashMap(); public EChartBridge(WebView webView) { this.webView webView; initBridge(); } private void initBridge() { WebEngine engine webView.getEngine(); // 向 JS 注入全局对象 JavaBridge engine.executeScript(var JavaBridge { callJava: function(method, data) { if (typeof window[ getClass().getName() ] ! undefined) { window[ getClass().getName() ].handleCall(method, data); } }, registerCallback: function(id, callback) { window[ getClass().getName() ].registerCallback(id, callback); } };); // 将 Java 对象暴露给 JS需 FXML 注解或 setAccessible engine.setUserDataDirectory(new File(webcache)); engine.getLoadWorker().stateProperty().addListener((obs, old, state) - { if (state Worker.State.SUCCEEDED) { // 页面加载完成后将 Java 对象挂载到 JS 全局作用域 engine.executeScript(window.JavaBridgeImpl new Packages. getClass().getName().replace(., $) ();); } }); } // JS 调用 Java 的入口方法必须 public参数类型严格匹配 public void handleCall(String method, String data) { switch (method) { case updateChart: updateChartFromJson(data); break; case exportPng: exportPng(); break; default: System.err.println(Unknown method: method); } } // Java 主动调用 JS 的封装带错误捕获 public void invokeJs(String script) { try { webView.getEngine().executeScript(script); } catch (Exception e) { System.err.println(JS execution failed: script); e.printStackTrace(); } } }提示Packages.是 Nashorn/ GraalVM JS 引擎的 Java 类访问语法JDK 15 默认使用 GraalVM JS兼容性更好。若用 JDK 11–14需添加--add-exportsjdk.scripting.nashorn/jdk.nashorn.api.scriptingALL-UNNAMED启动参数。该设计实现了三个关键能力JS 主动调 Java通过JavaBridge.callJava(updateChart, JSON.stringify(data))触发 Java 数据处理Java 主动推 JS通过bridge.invokeJs(myChart.setOption( optionJson ))更新图表回调注册机制JS 可调JavaBridge.registerCallback(onDataLoaded, fn)Java 处理完后执行jsCallbacks.get(onDataLoaded).accept(result)解决异步响应问题。3. 项目结构与核心模块详解从pom.xml到echart-loader.js项目采用 Maven 多模块结构目录精简但职责清晰。以下是根目录下关键文件与模块说明不含测试和文档echart-desktop/ ├── pom.xml # 主 POM声明 javafx-web、swt、maven-shade-plugin ├── src/main/ │ ├── java/ │ │ └── com/example/echart/ │ │ ├── MainApp.java # SWT Application 主入口非 JavaFX Application │ │ ├── EChartBridge.java # JS-Java 通信桥接核心类见上节 │ │ ├── ChartController.java # 图表生命周期管理初始化、销毁、resize 适配 │ │ └── util/ # 工具类JSON 解析、PNG 导出、UA 生成 │ ├── resources/ │ │ └── echarts/ # ECharts 官方 dist 包v5.4.3已去 map 插件减重 │ └── webapp/ # 静态 Web 资源根目录 │ ├── index.html # 主页含 div idchart 和 script srcechart-loader.js │ ├── echart-loader.js # ECharts 加载器自动 detect 宽高、防重复 init、错误 fallback │ └── assets/ # 自定义主题、地理 JSON、图标等 └── target/ └── echart-desktop-1.0-jar-with-dependencies.jar # Shade 打包结果含 JRE 173.1pom.xml关键依赖与构建配置Maven 是项目可复现性的基石。以下为pom.xml中最易出错的三处配置必须严格匹配properties maven.compiler.source11/maven.compiler.source maven.compiler.target11/maven.compiler.target project.build.sourceEncodingUTF-8/project.build.sourceEncoding !-- JavaFX 版本必须与 JDK 匹配 -- javafx.version17.0.2/javafx.version !-- SWT 版本按平台分 profile -- swt.version.win3.127.0/swt.version.win swt.version.macos3.127.0/swt.version.macos swt.version.linux3.127.0/swt.version.linux /properties dependencies !-- JavaFX Web 模块必需 -- dependency groupIdorg.openjfx/groupId artifactIdjavafx-web/artifactId version${javafx.version}/version /dependency !-- SWT 核心按平台选择 profile -- dependency groupIdorg.eclipse.swt/groupId artifactIdorg.eclipse.swt.${swt.platform}/artifactId version${swt.version.${swt.platform}}/version /dependency !-- JSON 处理轻量级避免 Jackson 体积过大 -- dependency groupIdcom.google.code.gson/groupId artifactIdgson/artifactId version2.10.1/version /dependency /dependencies build plugins !-- Shade 插件合并所有依赖到单 jar -- plugin groupIdorg.apache.maven.plugins/groupId artifactIdmaven-shade-plugin/artifactId version3.4.1/version executions execution phasepackage/phase goalsgoalshade/goal/goals configuration transformers transformer implementationorg.apache.maven.plugins.shade.resource.ManifestResourceTransformer mainClasscom.example.echart.MainApp/mainClass /transformer /transformers !-- 排除签名文件避免运行时报 Invalid signature -- filters filter artifact*:*/artifact excludes excludeMETA-INF/*.SF/exclude excludeMETA-INF/*.DSA/exclude excludeMETA-INF/*.RSA/exclude /excludes /filter /filters /configuration /execution /executions /plugin /plugins /build注意swt.platform必须在 profiles 中定义例如profileidwin/idpropertiesswt.platformwin32-x86_64/swt.platform/properties/profile。构建时需指定mvn clean package -PwinWindows、-PmacosmacOS或-PlinuxLinux。3.2echart-loader.jsECharts 的“自适应启动器”这个 JS 文件是整个 Web 层的灵魂它不写业务逻辑只做三件事环境检测、懒加载、容错初始化。代码精简但覆盖所有边界情况// echart-loader.js (function() { use strict; // 1. 检测是否已加载 ECharts防重复 if (typeof echarts ! undefined) { console.log(ECharts already loaded); initChart(); return; } // 2. 动态加载 echarts.min.js从 /resources/echarts/ 下 const script document.createElement(script); script.src echarts/echarts.min.js; // 路径相对于 webapp/ script.onload function() { console.log(ECharts loaded successfully); initChart(); }; script.onerror function() { console.error(Failed to load echarts.min.js); showFallbackMessage(图表库加载失败请检查资源路径); }; document.head.appendChild(script); // 3. 初始化图表函数核心 function initChart() { const chartDom document.getElementById(chart); if (!chartDom) { showFallbackMessage(未找到 #chart 容器); return; } // 创建 echarts 实例注意必须等 DOM 渲染完成 setTimeout(() { const myChart echarts.init(chartDom, null, { renderer: canvas, // 强制 canvas避免 SVG 在 JavaFX 中渲染异常 width: chartDom.clientWidth, height: chartDom.clientHeight }); // 绑定 resize 事件JavaFX WebView 不触发 window.resize需手动 const resizeObserver new ResizeObserver(entries { for (let entry of entries) { const { width, height } entry.contentRect; myChart.resize({ width, height }); } }); resizeObserver.observe(chartDom); // 暴露到全局供 Java 调用 window.myChart myChart; // 初始化默认空配置避免白屏 myChart.setOption({ title: { text: 等待数据... }, tooltip: {}, xAxis: { type: category, data: [] }, yAxis: { type: value }, series: [{ data: [], type: line }] }); // 通知 Java图表已就绪 if (typeof JavaBridge ! undefined) { JavaBridge.callJava(onChartReady, ); } }, 100); } // 4. 回退提示当 JS 执行失败时显示 function showFallbackMessage(msg) { const fallback document.createElement(div); fallback.innerHTML div stylepadding:20px;color:#f00;font-size:14px;text-align:center;⚠️ ${msg}/div; document.body.appendChild(fallback); } })();这段 JS 的关键设计点setTimeout延迟初始化JavaFX WebView 的DOMContentLoaded事件不可靠setTimeout是最稳妥的 DOM 就绪判断ResizeObserver替代window.resizeJavaFX WebView 不触发标准 resize 事件必须监听容器尺寸变化renderer: canvas强制设置SVG 渲染在 JavaFX 中存在字体偏移、缩放失真问题Canvas 模式 100% 兼容window.myChart全局暴露为 Java 的invokeJs(myChart.setOption(...))提供直接引用避免反复document.getElementById。3.3ChartController.java图表生命周期的“管家”这个类不处理业务数据只管三件事创建、销毁、响应窗口事件。它是 Java 层与 Web 层的粘合剂public class ChartController { private final WebView webView; private final EChartBridge bridge; private final Composite parent; private FXCanvas fxCanvas; public ChartController(Composite parent, WebView webView) { this.parent parent; this.webView webView; this.bridge new EChartBridge(webView); createUI(); } private void createUI() { // 使用 FXCanvas 将 JavaFX WebView 嵌入 SWT Composite fxCanvas new FXCanvas(parent, SWT.NONE); fxCanvas.setScene(new Scene(webView)); // 设置布局填满父容器 GridData gridData new GridData(SWT.FILL, SWT.FILL, true, true); fxCanvas.setLayoutData(gridData); // 监听 SWT 窗口 resizeJavaFX 自身不响应 SWT 事件 parent.addListener(SWT.Resize, event - { // 强制 JavaFX WebView 重绘关键否则 resize 后图表拉伸变形 fxCanvas.redraw(); // 同时通知 JS 执行 resize见 echart-loader.js 中的 ResizeObserver bridge.invokeJs(if (window.myChart) window.myChart.resize();); }); } // 销毁时清理资源防止内存泄漏 public void dispose() { if (fxCanvas ! null !fxCanvas.isDisposed()) { fxCanvas.dispose(); } if (webView.getEngine() ! null) { webView.getEngine().load(about:blank); // 清空页面 } // 清理 JS 回调引用 bridge.clearCallbacks(); } // 主动触发 JS 初始化如用户点击“刷新图表”按钮 public void reloadChart() { webView.getEngine().load(file:/// getWebappPath() /index.html); } private String getWebappPath() { try { return new File(ChartController.class.getResource(/webapp/index.html).toURI()).getParent(); } catch (Exception e) { throw new RuntimeException(Failed to resolve webapp path, e); } } }注意fxCanvas.redraw()是玄学级关键调用。不加这句SWT 窗口 resize 后 JavaFX WebView 会卡在旧尺寸图表被拉伸或裁剪。这是 SWT JavaFX 混合开发的公开秘密。4. 运行与调试全流程从 JDK 配置到首张 ECharts 图表跑通这个项目本质是打通JDK → Maven → SWT 平台 → JavaFX 模块 → Web 资源路径五层链路。任何一层断开都会表现为“白屏”“JS 报错”“Java 报 ClassNotFoundException”。下面按真实开发顺序逐环节给出可验证步骤。4.1 环境准备JDK 与平台依赖安装第一步确认 JDK 版本与 JavaFX 模块兼容性推荐 JDK 17LTS下载地址https://adoptium.net/选 Eclipse Temurin验证命令java -version # 输出应为openjdk version 17.0.2 ... java --list-modules | grep javafx.web # 应输出javafx.web17.0.2第二步安装对应平台的 SWT 本地库SWT 不是纯 Java 库它包含.dllWindows、.dylibmacOS、.soLinux本地二进制。Maven 依赖只是“占位符”实际运行需确保java.library.path包含对应.jar中的 native 库。Windows下载swt-3.127.0-win32-x86_64.zip解压后将swt.jar放入lib/并确保java -Djava.library.pathlib swt.jar能加载。macOS下载swt-3.127.0-cocoa-macosx-x86_64.zip解压后swt.jar同理。Linux下载swt-3.127.0-gtk-linux-x86_64.zip。提示若跳过此步运行时会报UnsatisfiedLinkError: no swt-win32-4947 in java.library.path。这是新手最常翻车的第一关。4.2 项目导入与构建Maven 三步法假设你已 clone 项目到本地echart-desktop/目录Step 1进入项目根目录确认pom.xml存在cd echart-desktop ls -l pom.xml src/ target/Step 2根据操作系统激活对应 Maven ProfileWindows 用户mvn clean package -PwinmacOS 用户mvn clean package -PmacosLinux 用户mvn clean package -PlinuxStep 3验证构建产物构建成功后target/目录下应生成echart-desktop-1.0-jar-with-dependencies.jar约 65–70MBechart-desktop-1.0.jar原始 jar不含依赖注意若构建失败90% 原因是pom.xml中swt.platformprofile 未正确激活或本地未安装对应 SWT jar。此时运行mvn help:active-profiles查看当前激活 profile。4.3 启动与首屏验证看到第一张图表构建成功后用以下命令启动以 Windows 为例# 进入 target 目录 cd target # 执行 shaded jar含所有依赖 java -jar echart-desktop-1.0-jar-with-dependencies.jar预期现象弹出 SWT 主窗口标题为 “ECharts Desktop Demo”中间区域显示一个灰色背景的div idchart控制台输出ECharts loaded successfully JS execution failed: myChart.setOption(...) Failed to load echarts.min.js别慌这是正常日志因为echarts.min.js路径是相对路径需确保webapp/在 classpath 中关键修复资源路径问题上述报错是因为index.html中echarts/echarts.min.js路径解析失败。解决方案确保src/main/resources/webapp/下的文件在编译后位于classes/webapp/或修改echart-loader.js中的路径为绝对路径script.src file:/// encodeURIComponent(window.location.pathname).replace(/%2Fwebapp%2F.*$/, ) /echarts/echarts.min.js;终极验证命令绕过 IDE直击本质# 手动指定 classpath确保 webapp 在路径中 java -cp echart-desktop-1.0-jar-with-dependencies.jar;. com.example.echart.MainApp此时窗口应正常显示 ECharts 官方示例图折线图鼠标悬停显示 tooltip右键可保存 PNG —— 首战告捷。4.4 调试技巧定位 JS 与 Java 通信故障当图表不更新、JS 报错、Java 方法不被调用时按此顺序排查检查 JavaFX WebView 是否加载成功在MainApp.java的createContents()中添加webView.getEngine().getLoadWorker().stateProperty().addListener((obs, old, state) - { System.out.println(WebView state: state); if (state Worker.State.FAILED) { System.err.println(WebView load failed: webView.getEngine().getLocation()); } });在 JS 中打印 JavaBridge 是否就绪修改echart-loader.js开头console.log(JavaBridge exists:, typeof JavaBridge ! undefined); console.log(JavaBridgeImpl exists:, typeof window.JavaBridgeImpl ! undefined);捕获 JS 执行异常Java 层在EChartBridge.invokeJs()中增强日志public void invokeJs(String script) { System.out.println(Executing JS: script.substring(0, Math.min(50, script.length())) ...); try { Object result webView.getEngine().executeScript(script); System.out.println(JS result: result); } catch (Exception e) { System.err.println(JS exec error on: script); e.printStackTrace(); } }启用 JavaFX WebView 调试仅限 JDK 17启动时加参数java -Dprism.debugtrue -Djavafx.verbosetrue -jar your-app.jar控制台将输出详细的渲染管线日志可定位 Canvas 初始化失败等问题。5. 常见问题与避坑指南那些让我加班到凌晨三点的 Bug这个项目看似简单实则暗藏多个“反直觉陷阱”。以下是我在三个不同客户现场踩过的坑每一条都附带复现方式、根本原因和一招毙命的解法。请务必在动手前扫一遍。5.1 现象图表首次加载正常但窗口 resize 后图表严重拉伸变形文字糊成一片原因分析JavaFX WebView 的Scene和WebView组件在 SWTCompositeresize 时不会自动同步宽高。WebView内部 Canvas 的width/height属性仍为旧值而 CSSwidth:100%; height:100%又强制拉伸像素导致失真。这不是 ECharts 的 bug而是 JavaFX 渲染管线与 SWT 布局引擎的时序冲突。解决方法在ChartController.createUI()中为FXCanvas添加SWT.Resize监听并强制重设 WebView 的 prefWidth/prefHeightparent.addListener(SWT.Resize, event - { Rectangle bounds parent.getClientArea(); webView.setPrefWidth(bounds.width); webView.setPrefHeight(bounds.height); fxCanvas.redraw(); // 此句不可少 bridge.invokeJs(if (window.myChart) window.myChart.resize();); });5.2 现象macOS 上图表完全不显示控制台报WebEngine not initialized原因分析macOS 的 JavaFX WebView 依赖系统 WebKit而 JDK 17 的 GraalVM JS 引擎在 macOS 上默认禁用 JIT 编译导致 ECharts 的大量 JS 执行超时WebEngine初始化失败。这不是权限问题而是 JVM 参数缺失。解决方法启动时添加-XX:TieredStopAtLevel1参数强制使用 C1 编译器client mode提升 JS 执行速度java -XX:TieredStopAtLevel1 -jar echart-desktop-1.0-jar-with-dependencies.jar补充若仍失败再加-Dprism.orderes2,sw强制使用 OpenGL 渲染避免 Metal 后端兼容性问题。5.3 现象Linux 上点击图表导出 PNG生成的图片全是黑色背景无内容原因分析Linux 的 JavaFX WebView 默认使用软件渲染SwRender而 ECharts 的 Canvas 导出依赖硬件加速的toDataURL()。当prism.order未指定 GPU 后端时canvas.toDataURL()返回空字符串或黑图。解决方法启动时强制指定 OpenGL 后端并确保系统已安装mesa-utils和libgl1-mesa-glx# Ubuntu/Debian sudo apt install mesa-utils libgl1-mesa-glx # 启动命令 java -Dprism.orderes2,sw -Dprism.es2.fbobjectfalse -jar your-app.jar验证运行glxinfo | grep OpenGL version确保输出OpenGL version string: 3.3或更高。5.4 现象向 ECharts 传递中文数据时图表显示为乱码原因分析Java 字符串转 JSON 时默认使用平台编码如 Windows-1252而WebView加载 HTML 时按 UTF-8 解析导致 JS 层拿到的 JSON 是乱码。这不是前端问题是 JavaGson.toJson()的编码陷阱。解决方法在ChartController.java中所有bridge.invokeJs()调用前对 JSON 字符串进行 UTF-8 URL 编码String safeJson URLEncoder.encode(optionJson, StandardCharsets.UTF_8); bridge.invokeJs(myChart.setOption( safeJson ));并在echart-loader.js中解码function decodeSafeJson(str) { try { return decodeURIComponent(str); } catch (e) { return str; // fallback } } // 使用时 myChart.setOption(JSON.parse(decodeSafeJson(optionJson)));5.5 现象打包后运行报ClassNotFoundException: javafx.scene.web.WebView原因分析Maven Shade 插件默认不打包javafx.web模块的 class 文件因为 JavaFX 自 JDK 11 起已模块化Shade 无法识别module-info.class。javafx.web的类被排除在外导致运行时找不到WebView。解决方法在pom.xml的 Shade 配置中显式包含 JavaFX 模块configuration filters filter artifactorg.openjfx:javafx-web/artifact includes include**/*.class/include /includes /filter /filters /configuration提示此配置必须放在executionsexecutionconfiguration内而非全局configuration。6. 二次开发实战如何接入你自己的业务数据与主题现在你已跑通 demo下一步是把它变成你项目的“图表引擎”。这一章不讲理论只给可立即抄作业的改造路径——从替换数据源到定制主题再到热更新配置全部基于真实产线经验。6.1 接入自有数据三步替换index.html中的 mock 数据index.html里的示例数据是硬编码的你需要替换成真实业务接口。改造原则不改 ECharts 配置结构只换数据源。Step 1在 Java 层封装 HTTP 请求工具在util/HttpUtil.java中添加public class HttpUtil { public static String fetchData(String url) throws IOException { HttpURLConnection conn (HttpURLConnection) new URL(url).openConnection(); conn.setRequestMethod(GET); conn.setRequestProperty(Accept, application/json); conn.setConnectTimeout(5000); conn.setReadTimeout(10000); int responseCode conn.getResponseCode(); if (responseCode ! 200) { throw new IOException(HTTP responseCode for url); } BufferedReader reader new BufferedReader( new InputStreamReader(conn.getInputStream(), StandardCharsets.UTF_8) ); return reader.lines().collect(Collectors.joining(\n)); } }Step 2在ChartController中添加数据加载方法public void loadRealTimeData() { try { // 假设你的 API 返回 { series: [...], xAxis: [...] } String jsonData HttpUtil.fetchData(http://localhost:8080/api/chart-data); // 将 JSON 字符串安全注入 JS String safeJson URLEncoder.encode(jsonData, StandardCharsets.UTF_8); bridge.invokeJs(window.updateChartData( safeJson )); } catch (Exception e) { e.printStackTrace(); bridge.invokeJs(showFallbackMessage(数据加载失败 e.getMessage() )); } }Step 3在echart-loader.js中添加updateChartData函数// 在 initChart() 后添加 window.updateChartData function(safeJson) { try { const jsonData decodeURIComponent(safeJson); const data JSON.parse(jsonData); if (window.myChart data.series) { window.myChart.setOption({ series: data.series, xAxis: data.xAxis || window.myChart.getOption().xAxis, yAxis: data.yAxis || window.myChart.getOption().yAxis }); } } catch (e) { console.error(Failed to parse chart data, e); } };验证启动后调用chartController.loadRealTimeData()图表应实时刷新。若 API 返回 JSON 格式不符打开浏览器开发者工具JavaFX WebView 支持 F12在 Console 中输入window.myChart.getOption()查看当前配置结构对齐字段名即可。6.2 应用自定义主题替换echarts/theme/dark.json并动态加载ECharts 官方提供dark.json、light.json等主题但默认不加载。你需要手动注入。Step 1将主题文件放入src/main/resources/echarts/theme/下载https://github.com/apache/echarts/tree/master/theme下的dark.json放入项目对应路径。**Step 2修改echart-loader.js在initChart()中加载主题本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
