润乾报表内置了常规图表类型但遇到较为复杂的图表如 K 线图、地图、桑基图、关系图等时仍需手写 ECharts 配置代码。如果你对 ECharts 的配置项不够熟悉逐条查文档调试会比较耗时。这种情况下用 AI 编程工具生成脚本再嵌入润乾报表是一个更高效的选择。下面就以 K 线图为例演示具体操作过程本文 AI 编程工具采用 Trae。核心过程分为三步1、在润乾报表中设置 ECharts 所需的参数标题、数据等并通过“参数数据导出”功能将参数数据复制到 AI 编程环境。2、AI 编程工具基于参数数据生成图形 JS 脚本。3、将生成的脚本复制回润乾报表的 ECharts 脚本定义中。具体操作如下1. 报表模版准备1数据来自 stock 表2定义报表并设置 ECharts 参数数据集 SQLselect * from stock where stockCode ?其中股票代码为查询参数运行时可通过输入框动态查询各只股票数据。定义报表A1 单元格用于配置 K 线图 (具体见下一步)A3-G3 单元格配置股票明细数据配置 ECharts 参数在单元格 A1 上右键选择“第三方图形”打开配置窗口后参考下图设置标注 1配置 K 线图所需的数据参数股票代码stockCode、交易日tradeDate、开盘价open、收盘价close、最高价high、最低价low标注 2润乾报表生成 ECharts 图的固定基础代码照抄即可其中 //AI 编程工具生成的代码所在位置上图箭头所示后续需要替换为 AI 生成的图形配置脚本。!-- 为ECharts准备一个具备大小宽高的Dom -- div id${id} stylewidth:${width}px;height:${height}px/div script typetext/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); } /script3准备参数模版支持股票代码输入查询相应股票数据。2. 导出 ECharts 参数数据点击“生成参数数据”功能数据会自动保存在剪贴板中稍后可直接粘贴到 AI 编程工具里。3.Trae 生成 K 线图 JS 脚本在 Trae 对话框中输入以下指令可参考“帮我生成一个 ECharts K 线图的 JS 代码。后面粘贴的是具体数据包含以下参数stockCode股票代码、tradeDate交易日、open开盘价、close收盘价、high最高价、low最低价。图表标题使用 stockCode 参数。请在图中标注最高价和最低价并添加缩放滚动功能。”然后粘贴ctrlv从上一步中导出的 ECharts 参数数据。发送指令等待完整脚本生成。后续可根据需求继续输入命令优化图形效果。生成的代码可在编辑器内查看图形效果可通过 HTML 文件在浏览器中预览。4. 复制图形脚本到润乾报表模板完整脚本在 Trae 编辑器内我们只需要复制script与/script标签之间的代码。注意下图标注的几行不需要复制因为它们已在前面模板的基础代码中定义过了。然后将复制的内容粘贴到润乾报表模板的 ECharts 代码中前面基础代码中 //AI 编程工具生成的代码的位置。注意重点参考上图 8-13 行从润乾报表导出到 AI 编程工具的数据是已经计算过的具体数值。当把 AI 编程工具生成的脚本复制回润乾报表时需要将具体数值改回参数引用格式即 ${参数名}。例如• 改前var tradeDate[“2026-01-02”, “2026-01-03”,…]• 改后var tradeDate${tradeDate}这样才能保证报表每次运行时都能动态获取当前查询的数据。修改完成后保存模板。5. 查看报表效果启动报表服务以润乾报表内置 Demo 服务为例在浏览器中访问以下 URLhttp://localhost:6868/demo/reportJsp/showReport.jsp?rpxtestECharts1-sf.rpxsCode688256即可看到股票代码为 688256 的 K 线图及明细数据如需查询其他股票只需在页面中输入其他股票代码如 “603019”报表将自动刷新并展示对应的 K 线图和明细数据。总结本文的核心思路是润乾报表负责提供数据参数AI 编程工具负责生成 ECharts 脚本两者通过“参数导出 → AI 生成 → 脚本回填”三个步骤完成集成。这种方式的优势在于无需精通 ECharts 配置语法只需清晰描述图表需求AI 即可自动生成可用的脚本代码。掌握此方法后遇到其他 ECharts 复杂图表如地图、桑基图等同样可以按此思路快速实现。
用 AI 编程生成 ECharts 图表并嵌入润乾报表的实践
发布时间：2026/6/5 3:15:30
润乾报表内置了常规图表类型但遇到较为复杂的图表如 K 线图、地图、桑基图、关系图等时仍需手写 ECharts 配置代码。如果你对 ECharts 的配置项不够熟悉逐条查文档调试会比较耗时。这种情况下用 AI 编程工具生成脚本再嵌入润乾报表是一个更高效的选择。下面就以 K 线图为例演示具体操作过程本文 AI 编程工具采用 Trae。核心过程分为三步1、在润乾报表中设置 ECharts 所需的参数标题、数据等并通过“参数数据导出”功能将参数数据复制到 AI 编程环境。2、AI 编程工具基于参数数据生成图形 JS 脚本。3、将生成的脚本复制回润乾报表的 ECharts 脚本定义中。具体操作如下1. 报表模版准备1数据来自 stock 表2定义报表并设置 ECharts 参数数据集 SQLselect * from stock where stockCode ?其中股票代码为查询参数运行时可通过输入框动态查询各只股票数据。定义报表A1 单元格用于配置 K 线图 (具体见下一步)A3-G3 单元格配置股票明细数据配置 ECharts 参数在单元格 A1 上右键选择“第三方图形”打开配置窗口后参考下图设置标注 1配置 K 线图所需的数据参数股票代码stockCode、交易日tradeDate、开盘价open、收盘价close、最高价high、最低价low标注 2润乾报表生成 ECharts 图的固定基础代码照抄即可其中 //AI 编程工具生成的代码所在位置上图箭头所示后续需要替换为 AI 生成的图形配置脚本。!-- 为ECharts准备一个具备大小宽高的Dom -- div id${id} stylewidth:${width}px;height:${height}px/div script typetext/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); } /script3准备参数模版支持股票代码输入查询相应股票数据。2. 导出 ECharts 参数数据点击“生成参数数据”功能数据会自动保存在剪贴板中稍后可直接粘贴到 AI 编程工具里。3.Trae 生成 K 线图 JS 脚本在 Trae 对话框中输入以下指令可参考“帮我生成一个 ECharts K 线图的 JS 代码。后面粘贴的是具体数据包含以下参数stockCode股票代码、tradeDate交易日、open开盘价、close收盘价、high最高价、low最低价。图表标题使用 stockCode 参数。请在图中标注最高价和最低价并添加缩放滚动功能。”然后粘贴ctrlv从上一步中导出的 ECharts 参数数据。发送指令等待完整脚本生成。后续可根据需求继续输入命令优化图形效果。生成的代码可在编辑器内查看图形效果可通过 HTML 文件在浏览器中预览。4. 复制图形脚本到润乾报表模板完整脚本在 Trae 编辑器内我们只需要复制script与/script标签之间的代码。注意下图标注的几行不需要复制因为它们已在前面模板的基础代码中定义过了。然后将复制的内容粘贴到润乾报表模板的 ECharts 代码中前面基础代码中 //AI 编程工具生成的代码的位置。注意重点参考上图 8-13 行从润乾报表导出到 AI 编程工具的数据是已经计算过的具体数值。当把 AI 编程工具生成的脚本复制回润乾报表时需要将具体数值改回参数引用格式即 ${参数名}。例如• 改前var tradeDate[“2026-01-02”, “2026-01-03”,…]• 改后var tradeDate${tradeDate}这样才能保证报表每次运行时都能动态获取当前查询的数据。修改完成后保存模板。5. 查看报表效果启动报表服务以润乾报表内置 Demo 服务为例在浏览器中访问以下 URLhttp://localhost:6868/demo/reportJsp/showReport.jsp?rpxtestECharts1-sf.rpxsCode688256即可看到股票代码为 688256 的 K 线图及明细数据如需查询其他股票只需在页面中输入其他股票代码如 “603019”报表将自动刷新并展示对应的 K 线图和明细数据。总结本文的核心思路是润乾报表负责提供数据参数AI 编程工具负责生成 ECharts 脚本两者通过“参数导出 → AI 生成 → 脚本回填”三个步骤完成集成。这种方式的优势在于无需精通 ECharts 配置语法只需清晰描述图表需求AI 即可自动生成可用的脚本代码。掌握此方法后遇到其他 ECharts 复杂图表如地图、桑基图等同样可以按此思路快速实现。
