返回 导航

SpringBoot / Cloud

hangge.com

JeecgBoot - 免费开源AI低代码开发平台使用详解4（Online图表）

作者：hangge | 2026-06-20 08:16
    在低代码开发场景中，数据可视化是后台管理系统的核心能力之一，传统开发模式下，制作统计图表需要前端编写 ECharts 代码、后端开发接口、联调数据，耗时费力。而 JeecgBoot Online 图表作为框架内置的零代码可视化能力，无需编写前后端代码，仅通过在线配置 SQL、JSON 或 API，即可快速生成柱状图、折线图、饼图、组合图表等主流可视化图表，下面我将通过样例进行演示。

四、Online 图表使用

1，新建图表

（1）进入 online 图表配置页面，点击“新增”按钮开始新增一个图表。

（2）在打开的弹窗中输入图表信息，这里我以展示最近一个月的登录次数统计信息为例。其中，必填项有：
  • 图表名称
  • 编码（编码是唯一的）
  • X 轴字段（数据源中被当做 X 轴的字段）
  • Y 轴字段（数据源中被当做 Y 轴的字段）
  • 查询 SQL/数据 JSON
提示：当"数据类型”字段选为 JSON 后，查询 SQL 字段会被替换成 数据 JSON 字段，该字段会验证你的 JSON 字符串格式是否正确，反之则不变；当切换到 API 后，查询 SQL 字段会被替换成 API 接口字段;

（3）这里我们将“数据类型”设置为“SQL”，查询 SQL 内容如下：
SELECT
	count(*) num,
	DATE_FORMAT(create_time, '%Y-%m-%d') AS `day`
FROM
	sys_log
WHERE
	log_type = 1
AND create_time > DATE_SUB(NOW(), INTERVAL 1 MONTH)
GROUP BY
	DATE_FORMAT(create_time, '%Y-%m-%d')

（4）接着点击“SQL 解析”按钮后，列表字段表格会自动出现相关的字段信息，我们可以根据需求进行配置修改：
  • 列表字段前两项是配置 数据表格 的 列（columns）
    • 字段名 是必填的，对应 column.dataIndex
    • 字段文本 是对字段名的描述，对应 column.title，不填则不显示
  • 是否显示 默认勾选，如果去掉勾选则不显示此列
  • 计算总计 默认不勾选，如果勾选上则会对当前列所有的数据进行求和，如果存在非数字的内容，则拒绝计算并提示"包含非数字内容"
  • 是否查询 默认不勾选，如果勾选上则会在图表最上方显示一个表单，用于筛选表格的数据
  • 字段类型 默认为空，可选择查询条件表单的类型，可选值有：数值类型、日期类型、字符类型、长整型
  • 查询模式 默认为空，可选择查询条件的筛选方式，如果选择了范围查询，则会显示两个表单，一个是开始值，一个是结束值，共同完成筛选

（5）保存后我们可以测试一下功能，点击刚创建的图表条目右侧的“更多”->“功能测试”按钮。 

（6）由于我们前面配置时，“图表类型”选择了三种类型的图表以及数据列表，在打开的测试页面中可以看到这些已经成功加载显示出来，并且查询条件也能正常使用。

（7）点击“打印”按钮，图表可以正常被打印。

（8）点击“导出”按钮，数据也可以正常导出，说明在线图表已经创建成功。

2，将图表挂接在到菜单上

（1）要让用户可以看到刚刚创建的图表，就需要将其添加到菜单上。首先进入 online 图表配置页面，点击刚创建的图表条目右侧的“更多”->“配置地址”按钮。

（2）在弹出的对话框中点击“复制 URL”按钮复制出访问链接。

（3）然后我们打开“菜单管理”模块，新增一个菜单进行关联：
  • 将前面复制路径粘贴到“访问路径”中。
  • “是否是路由菜单”改为“否”。
  • “前端组件”随便填。

（4）接着进入“角色管理”模块，为相应的角色授予该菜单的访问权限。

（5）使用对应的角色用户登录，点击左侧刚添加的菜单，右侧就会显示出我们之前创建的图表了。

附一：不同的展示模板效果演示

前面样例可知，当我们配置图表时，有三种展示模板供我们选择。下面分别展示各种模板的实际效果。

1，Tab 风格

使用该模板，如果有多个图表类型时，会通过 tab 标签进行切换。

2，单排布局

使用该模式，如果有多个图表类型时会同时显示，但是每一行只显示一个图表。

3，双排布局

使用该模式，如果有多个图表类型时会同时显示，但是每一行会显示两个图表。

附二：高级用法

关于 Online 报表更高级的用法，可以参考 JeecgBoot 的在线开发文档（点击访问）
评论

全部评论（0）

回到顶部