用 AI 编程生成 ECharts 图表

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

核心过程分为三步：

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

具体操作如下

1. 报表模版准备

（1）数据来自 stock 表

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

数据集 SQL select * 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}' 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）准备参数模版

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

2. 导出 ECharts 参数数据

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

3.Trae 生成 K 线图 JS 脚本

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

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

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

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

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

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

5. 查看报表效果

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

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

总结

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