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

润乾报表内置了常规图表类型，但遇到较为复杂的图表（如 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 参数数据。