跳到主要内容

Old - Online图表配置手册

一、配置单个数据源的图表​

  • 配置地址: /online/graphreport

具体步骤​

  1. 在页面中点击 新增 按钮
  2. 在打开的弹窗中输入你的图表信息。其中，必填项有：
    • 图表名称
    • 编码（编码是唯一的）
    • X轴字段（数据源中被当做 X 轴的字段）
    • Y轴字段（数据源中被当做 Y 轴的字段）
    • 查询SQL/数据JSON
  3. 其中有几个动态的内容区域，分别是：
    • 当 数据类型 字段选为 JSON 后，查询SQL 字段会被替换成 数据JSON 字段，该字段会验证你的JSON字符串格式是否正确，反之则不变；当切换到API后,查询SQL 字段会被替换成 API接口 字段;
  4. 配置列表字段
    • 列表字段前两项是配置 数据表格 的 列（columns）
      • 字段名 是必填的，对应 column.dataIndex
      • 字段文本 是对字段名的描述，对应 column.title，不填则不显示
    • 是否显示 默认勾选，如果去掉勾选则不显示此列
    • 计算总计 默认不勾选，如果勾选上则会对当前列所有的数据进行求和，如果存在非数字的内容，则拒绝计算并提示"包含非数字内容"
    • 是否查询 默认不勾选，如果勾选上则会在图表最上方显示一个表单，用于筛选表格的数据
    • 字段类型 默认为空，可选择查询条件表单的类型，可选值有：数值类型、日期类型、字符类型、长整型
    • 查询模式 默认为空，可选择查询条件的筛选方式，如果选择了范围查询，则会显示两个表单，一个是开始值，一个是结束值，共同完成筛选
  5. 点击右下角的确定按钮完成添加操作

使用方法​

  • 在 操作 列中，选中 更多，点击 功能测试 可以查看你配置的效果。
  • 效果会根据不同的 展示模板 显示不同的布局

配置示例：JSON数据格式​

假如我有一段JSON，我要将它配置成和下图一样图表，那么需要怎么做呢？

第一步：准备好你需要的JSON​

[
    {"day": "星期一", "step": 1234, "assess": "良"},
    {"day": "星期二", "step": 1884, "assess": "优"},
    {"day": "星期三", "step": 1671, "assess": "良+"},
    {"day": "星期四", "step": 2197, "assess": "优+"},
    {"day": "星期五", "step": 1342, "assess": "中"},
    {"day": "星期六", "step": 545, "assess": "差"},
    {"day": "星期日", "step": 244, "assess": "极差"}
]

第二步：填写JSON​

点击“新增”按钮，填写一些基本信息，然后将 数据类型 改为 JSON，然后将JSON填入数据JSON字段中，如下图

第三步：配置数据字段​

数据字段即X轴字段、Y轴字段和Y轴文字。

X轴字段 顾名思义，就是需要在X轴显示的字段，根据上图示例图表中我们可以发现，X轴方向显示的是星期一到星期日，而在准备的json中，day字段是存储星期信息的，所以我们要将 X轴字段处填写成day。

Y轴字段 也是如此，即对应需要在Y轴上显示的字段，这里我们填写上 step

Y轴文字 是对Y轴数据的一个解释。这里我们填上步数，那么就会在鼠标悬浮在图表上时直观的显示出来，如下图所示。

第四步：配置数据表格的列​

在列表字段下面的表格中配置，配置示例如下

这里的配置是配置数据表格的列信息，只有配置上去的字段才会被显示出来。

数据表格可以计算列的总数，当计算总计被勾选上之后，会在数据表格最下面显示一行“总计”，当所有的计算总计都没被勾选的话，那么就不会显示这一行，如果要计算总计的列中某一行包含非数字的值，那么将会计算失败，并显示错误信息（包含非数字内容）

第五步：提交并测试功能​

点击右下角的确定按钮并成功保存之后，我们可以在新增加的数据行右侧点击更多 --> 功能测试

最终显示效果如下：

我们发现只有一个柱状图，而刚刚配置的数据表格并没有显示出来，这是因为图表类型只配置了一个柱状图。我们回到列表页面，点击编辑按钮，在图表类型处勾选数据列表，如下图所示

点击确定保存，再点击功能测试，最终显示效果如下：

至此，配置JSON数据格式的图表就已经完成了

配置SQL数据格式​

配置SQL数据格式的图表与JSON的步骤类似，只是需要将数据类型 改为 SQL即可，在查询SQL处填写上你的SQL语句，填写好X轴字段、Y轴字段和Y轴文字点击确定保存即可

配置API数据格式​

配置API数据格式的图表与JSON的步骤类似，只是需要将数据类型 改为 API即可，在API接口处填写上你的api路径，填写好X轴字段、Y轴字段和Y轴文字点击确定保存即可。

api接口例子： http://api.jeecg.com/mock/31/graphreport/apitest

接口返回的数据结构：

{"data":[
      {"sex":0,"cnt":10},
      {"sex":1,"cnt":1},
      {"sex":2,"cnt":4}
]}

注：数据最外层用data包裹

二、配置多数据源的图表​

多数据源图表可以将你配置过的单数据源图表整合到一个页面中，并且可以进行分组、排序

  • 配置地址: /online/graphreport/templet（暂定）

具体步骤​

  1. 点击页面中的 新增 按钮
  2. 在打开的弹窗中输入你的图表信息。其中，必填项有：
    • 报表名称
    • 报表编码（编码是唯一的）
    • 报表风格（Tab风格、单排布局、双排布局、组合布局）
  3. 图表配置
    • 图表 （必填项，选择的是你配置过的单数据源图表）
    • 图表类型（如果选择不配置，那么则应用选择的单数据源图表中配置的图表类型，如果配置了则优先显示此处配置的图表类型）
    • 组合编码（必填项，只能为数字，数字越小越往前排）
  4. 点击右下角的确定按钮完成添加操作

注意事项​

  1. 如果报表风格配置成了组合布局，那么就会将配置的图表显示在一张图表内，并且图表类型只能配置成柱状图或曲线图，即使配置成了其他的类型，实际运行中也一样不会生效

使用方法​

  • 在 操作 列中，选中 更多，点击 功能测试 可以查看你配置的效果。
  • 效果会根据不同的 报表风格和组合展示风格 显示不同的布局

配置示例​

第一步：配置图表名称、编码、风格、多图表组合等​

示例配置图如下

第二步：查看效果​

在新增加的数据行右侧点击更多 --> 功能测试

最终显示效果如下：

三、配置图表参数​

自定义参数​

以SQL数据类型为例，在SQL后面拼接where条件即可。

注意${}内的文本就是参数名，要和配置的参数名保持一致，如果是文本类型，要记得加引号。

使用时可以直接在地址栏上将参数替换成实际的值，也可在配置菜单时直接设置

如果在使用时没有填写具体参数，那么就会应用默认值

系统变量​

注意系统变量是#{}，不要和自定义参数搞混了

可以使用的如下表所示：

编码描述
sys_user_code当前登录用户登录账号
sys_user_name当前登录用户真实名称
sys_date当前系统日期
sys_time当前系统时间
sys_org_code当前登录用户部门编号
tenant_id当前登录用户租户ID 要求：3.4.5版本+
sys_base_path当前JAVA服务的basePath（v2.4.4+支持）（仅API模式支持）