泰安
精通报表制作，可提供专业咨询、技术支持及解决方案。熟悉Java开发及常见数据库，了解各种J2EE web容器
11 浏览  • 
     ...

用 AI 编程生成 ECharts 图表并嵌入润乾报表的实践

 

润乾报表内置了常规图表类型，但遇到较为复杂的图表（如 K 线图、地图、桑基图、关系图等）时，仍需手写 ECharts 配置代码。如果你对 ECharts 的配置项不够熟悉，逐条查文档调试会比较耗时。
这种情况下，用 AI 编程工具生成脚本再嵌入润乾报表，是一个更高效的选择。下面就以 K 线图为例，演示具体操作过程（本文 AI 编程工具采用 Trae）。

核心过程分为三步：

1、在润乾报表中设置 ECharts 所需的参数（标题、数据等），并通过“参数数据导出”功能将参数数据复制到 AI 编程环境。
2、AI 编程工具基于参数数据生成图形 JS 脚本。
3、将生成的脚本复制回润乾报表的 ECharts 脚本定义中。

具体操作如下

1. 报表模版准备

（1）数据来自 stock 表

1png

2png

（2）定义报表并设置 ECharts 参数

数据集 SQL
select * from stock where stockCode = ?
其中股票代码为查询参数，运行时可通过输入框动态查询各只股票数据。
3png
定义报表
A1 单元格：用于配置 K 线图 (具体见下一步)
A3-G3 单元格：配置股票明细数据

4png

配置 ECharts 参数
在单元格 A1 上右键，选择“第三方图形”，打开配置窗口后参考下图设置：

5png

标注 1：配置 K 线图所需的数据参数，股票代码（stockCode）、交易日（tradeDate）、
开盘价（open）、收盘价（close）、最高价（high）、最低价（low）
标注 2：润乾报表生成 ECharts 图的固定基础代码（照抄即可），其中 //AI 编程工具生成的代码 所在位置（上图箭头所示），后续需要替换为 AI 生成的图形配置脚本。

              <!-- 为ECharts准备一个具备大小（宽高）的Dom  -->
<div id='${id}' style="width:${width}px;height:${height}px"></div>
<script type="text/javascript">
var ${id}_dom = document.getElementById('${id}');
var ${id}_myChart = ECharts.init(${id}_dom);
                     // AI编程工具生成的代码
       
if (option && typeof option === "object") {	
                             ${id}_myChart.setOption(option, true);
}
</script>

（3）准备参数模版

支持股票代码输入，查询相应股票数据。

6png

2. 导出 ECharts 参数数据

点击“生成参数数据”功能，数据会自动保存在剪贴板中，稍后可直接粘贴到 AI 编程工具里。

7png

3.Trae 生成 K 线图 JS 脚本

在 Trae 对话框中输入以下指令（可参考）：
“帮我生成一个 ECharts K 线图的 JS 代码。后面粘贴的是具体数据，包含以下参数：stockCode（股票代码）、tradeDate（交易日）、open（开盘价）、close（收盘价）、high（最高价）、low（最低价）。图表标题使用 stockCode 参数。请在图中标注最高价和最低价，并添加缩放滚动功能。”
然后，粘贴（ctrl+v）从上一步中导出的 ECharts 参数数据。

8png

发送指令，等待完整脚本生成。后续可根据需求继续输入命令优化图形效果。生成的代码可在编辑器内查看，图形效果可通过 HTML 文件在浏览器中预览。

4. 复制图形脚本到润乾报表模板

完整脚本在 Trae 编辑器内，我们只需要复制 <script> 与 </script> 标签之间的代码。注意，下图标注的几行不需要复制，因为它们已在前面模板的基础代码中定义过了。

9png

然后，将复制的内容粘贴到润乾报表模板的 ECharts 代码中（前面基础代码中 //AI 编程工具生成的代码 的位置）。

10png

注意（重点）：
参考上图 8-13 行！ 从润乾报表导出到 AI 编程工具的数据，是已经计算过的具体数值。当把 AI 编程工具生成的脚本复制回润乾报表时，需要将具体数值改回参数引用格式，即 ${参数名}。
例如：
• 改前：var tradeDate=[“2026-01-02”, “2026-01-03”,…]
• 改后：var tradeDate=${tradeDate}
这样才能保证报表每次运行时都能动态获取当前查询的数据。修改完成后保存模板。

5. 查看报表效果

启动报表服务（以润乾报表内置 Demo 服务为例），在浏览器中访问以下 URL：
http://localhost:6868/demo/reportJsp/showReport.jsp?rpx=testECharts1-sf.rpx&sCode=688256
即可看到股票代码为 688256 的 K 线图及明细数据：

11png

如需查询其他股票，只需在页面中输入其他股票代码（如 “603019”），报表将自动刷新并展示对应的 K 线图和明细数据。

12png

总结

本文的核心思路是：润乾报表负责提供数据参数，AI 编程工具负责生成 ECharts 脚本，两者通过“参数导出 → AI 生成 → 脚本回填”三个步骤完成集成。
这种方式的优势在于：无需精通 ECharts 配置语法，只需清晰描述图表需求，AI 即可自动生成可用的脚本代码。
掌握此方法后，遇到其他 ECharts 复杂图表（如地图、桑基图等），同样可以按此思路快速实现。