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

AI Agent 对话式制作润乾报表实践 - ECharts 股票 K 线图

 

本文记录如何用 AI Agent 以对话方式制作润乾报表，生成 ECharts 股票 K 线图（带明细数据）的完整过程。

fig01png

一、环境准备

  • 润乾报表设计器（20260914 版本）
  • 润乾内置的智能体技能 rpx-agent-toolkit

二、在 Agent 中导入技能（以 Trae 为例）

在 Agent 中添加技能时，路径指向设计器安装目录下的该目录（也可直接选择其下的 SKILL.md 文件）：

[设计器安装目录]\report\rpx-agent-toolkit.agent\skills\raqsoft-report-codegen

fig02png

三、在 Agent 下配置数据源链接

本文以本地 MySQL 数据库 testtx 为例。

直接在 Agent 描述需求执行即可：

数据库环境：数据库类型为 mysql，本地数据库，端口 3306，用户名 root，密码 ****。数据库为 testtx，表名为 stock 表。 同时把报表环境的数据源也配置好，数据源名 testtx1。

fig03png

打开 【安装根目录】\report\web\webapps\demo\WEB-INF\raqsoftConfig.xml，在 <DB> 节点列表中查看添加的 MySQL 数据源：

<DB name="testtx1">
    <property name="url" value="jdbc:mysql://127.0.0.1:3306/testtx?useUnicode=true&characterEncoding=utf-8"/>
    <property name="driver" value="com.mysql.cj.jdbc.Driver"/>
    <property name="type" value="10"/>
    <property name="user" value="root"/>
    <property name="password" value="root"/>
    <property name="batchSize" value="1000"/>
    <property name="autoConnect" value="false"/>
    <property name="useSchema" value="false"/>
</DB>

四、对话式制作报表模板过程

描述需求

  1. 使用数据源 testtx1 中的 stock 表，生成一张带 ECharts 股票 K 线图的报表；
  2. 数据集执行 SQL：select * from stock where stockCode = ?，股票代码作为查询参数，运行时通过输入框动态查询各只股票的数据；
  3. 报表中放置 ECharts K 线图：X 轴为交易日，Y 轴为价格（开盘、收盘、最高、最低）；
  4. 图表主标题展示 "股票 K 线分析"；
  5. 副标题为当前股票代码；
  6. 在图中标注最高价和最低价；
  7. 添加缩放滚动（dataZoom）功能；
  8. 报表中同时展示该股票的明细数据（交易日、开高低收等）；
  9. 报表保存名称为：ECharts-K1.rpx。

fig04png

Agent 执行流程与产物

fig05png

IDE 端看到的模板（ECharts-K1.rpx）：

fig06png

后续想调整样式（K 线颜色、均线、缩放范围等），直接在对话里继续提需求让 Agent 改脚本即可，不必逐条查 ECharts 文档。

其他外观样式上，也可以通过 IDE 的 Copilot 功能进行调整，比如调整字号：

把第 3 行表头字号改为“小四”，选中第 3 行，命令“字号 小四”

fig07png

较之前做法对比

原始的做法（仅用 IDE）：在润乾报表里嵌 ECharts 图需要开发人员手工完成——先规划图表单元格，再把数据集字段逐个拼进 ECharts 的 option 脚本（或写死一组数据），然后在网页端反复调试渲染效果。其中最费劲的就是“报表数据与 ECharts 脚本的关联”这一步：参数引用名拼错、引号没转义，图就是一片空白，只能逐段排查脚本。

AI 编程工具的做法：乾学院文章《用 AI 编程生成 ECharts 图表并嵌入润乾报表的实践》给出了一个折中方案——先在报表模板里手工建好 ECharts 参数和基础代码，通过“参数数据导出”把参数数据复制给 AI 编程工具（如 Trae），由 AI 生成图形 JS 脚本后复制回报表模板，最后还要把脚本里已经算好的具体数值逐个改回参数引用格式（例如 var tradeDate=[...] 改回 var tradeDate=${{tradeDate}}），否则报表每次运行都是同一份死数据。这条路省去了“写脚本”，但导出数据、回填脚本、改参数引用这几步仍要人工来做，相比下面完全交给 Agent 的方式，还是麻烦。

现在的做法：本文的方法更进一步——连报表模板本身也由 Agent 生成。只需一段自然语言描述需求（数据源、数据表、图型、标注、缩放等），Agent 自动读取表结构、生成完整 rpx，图表数据通过参数引用与数据集自动关联，一次对话即可出图；后续调整样式也只需继续对话，无需再手工改脚本。三者对比，“数据进脚本”从人工拼接、半自动回填，变成了完全自动生成。

五、预览报表

启动报表服务（以润乾报表内置 Demo 服务为例，端口 6868），浏览器访问：

http://localhost:6868/demo/reportJsp/showReport.jsp?rpx=ECharts-K1.rpx&sCode=688256

fig08png

即可看到股票代码为 688256 的 K 线图及明细数据。

  • K 线按国内惯例红涨绿跌渲染，叠加 MA5 / MA10 / MA20 三条均线；
  • 最高价、最低价以 pin 标注直接标在图上（图中最高 1658、最低 997）；
  • 图表下方带 dataZoom 缩放滑块，可框选任意区间放大查看；
  • 图表区下方为明细数据表，与图联动展示同一参数查询出的全部数据。

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

fig09png

以上，已完整实现润乾报表内的 ECharts 股票 K 线图。掌握此方法后，遇到其他 ECharts 复杂图表（如地图、桑基图等），同样可按此思路快速实现。