You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tanghe-report/doc/docs/guide/chartsLinkage.md

79 lines
4.6 KiB
Markdown

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

## 简要说明
现有系统的联动有俩种。<br>
- 表单联动 <br>
目前支持的有下拉框、时间筛选器俩种。<br>
- 图表联动:<br>
目前联动主要集中在柱状图、折线图、饼图等这种二维图表二维图表是指图表只支持2个字段的数据集当然并不是说需要3个字段的堆叠图柱状/折线)不支持联动,而是这种三维图表去联动二维图表会带来一些问题,反之二维的去联动三维的同样存在问题,因此目前源代码中只添加了部分二维图表的联动。<br>
## 表单联动
### 下拉框
- 简介-数据格式 <br>
下拉框最多两个字段数据字典对应“显示值label”、“提交值value“提交值”是必须选择的当动态数据只有一个字段的时候选择“提交值”也会将其默认展示为“显示值”。<br>
- 联动说明 <br>
被联动的组件:当前大屏中除自身以外的其他图表组件,这里获取的是图表的图层名称,每个图表都有默认的图层名称,因此有相同图表存在的话,记得修改图层名称。<br>
![img](../picture/chartsLinkage/img.png) <br>
参数配置label和value是下拉框自身字典属性。<br>
![img1](../picture/chartsLinkage/img_1.png) <br>
选择联动的图表后可以获得该图表配置的数据集并获得数据集中的查询参数然后将该查询参数进行绑定label、value。 <br>
![img2](../picture/chartsLinkage/img_2.png) <br>
下拉联动的时候就是将下拉框label/value的数据提交给联动图表的查询参数绑定label就是将下拉框label的值传递给图表的查询参数同理value只有一个查询参数的情况下肯定不能同时绑定label、value。<br>
![img3](../picture/chartsLinkage/img_3.png) <br>
- **使用注意 ** <br>
首先每个有查询参数的数据集都有对应查询参数的示例值,那么此数据集的数据则是根据此查询参数执行后的结果; <br>
下拉框在使用时,则是将下拉选择的值传递给此查询参数来获得新的数据; <br>
当使用下拉框后,已经将值传递给了某数据集的查询参数,这时候将下拉框的值清空并不会意味着传了空值给查询参数,且当数据集的刷新时间到了后也只会按下拉框传递的参数值进行查询; <br>
那么在使用下拉框查询后,想恢复原本数据集的数据只需要刷新浏览器即可。<br>
- 示例 <br>
示例中的数据集相关的sql写在 aj_report_init.sql文件中请自行查看。<br>
1、先准备两个数据集 <br>
![img5](../picture/chartsLinkage/img_5.png) <br>
![img4](../picture/chartsLinkage/img_4.png) <br>
2、给下拉框配置动态数据并设置好“提交值”、“显示值”字段 <br>
![img6](../picture/chartsLinkage/img_6.png) <br>
3、联动配置-参数配置 <br>
下拉框数据集绑定的是“提交值”也就是label这里也就是将label的值传递给柱状图数据集的查询参数city_name。<br>
当然在给下拉框绑定数据集的时候因为只绑定了“提交值”这一个字段因此这个字段的值同时作为“label、value”参数配置的时候选择value绑定city_name也是有结果。<br>
![img7](../picture/chartsLinkage/img_7.png) <br>
4、使用 <br>
注意内容看上面说明。<br>
![img8](../picture/chartsLinkage/img_8.png) <br>
### 时间筛选器
- 简介 <br>
时间筛选器组件底层定义了“startTime、endTime”字典值即开始时间、结束时间和下拉框一样使用时也是传值给绑定图表的查询参数。<br>
- 联动说明 <br>
和下拉框的操作是一样的,这里也是绑定查询参数。<br>
![img9](../picture/chartsLinkage/img_9.png) <br>
- **注意事项!!!** <br>
1、绑定的数据集的查询参数的时间格式目前必须是 "yyyy-MM-dd HH:mm:ss",其他日期格式,暂不支持。<br>
2、绑定的数据集的查询参数至少有一个是和时间有关最多两个和时间有关。<br>
3、注意sql里面时间的比较比如时间筛选器的今天是指当天的00:00:00 ~ 23:59:59 。<br>
4、如果数据集的查询参数只有开始时间/结束时间其一,那么在用时间筛选器绑定的时候注意只绑定一个。<br>
5、使用后的情况和下拉框使用后情况一致。<br>
- 数据集示例 <br>
查近7天。 <br>
startTimeDATE_FORMAT(DATE_SUB(NOW(),INTERVAL 7 DAY),'%Y-%m-%d') <br>
endTimenow() <br>
![img10](../picture/chartsLinkage/img_10.png) <br>
## 图表联动