一、基础操作
拖动组件进入画板区,可在右方设置区进行文本样式设置
![v2-7c23396efa99fbadb50620329c38c135_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/89d4362fdf750032245022d0ca8ed6ca.jpeg)
可双击画板中的组件,直接对文字进行修改
![v2-2907d39bfc63433a5568c459c0fda7c3_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/5cc941e8b27e627119c2d886b53f44b4.jpeg)
二、动态文字数据绑定
1、先在右方设置区,上方的标签按钮切换至“数据”
![v2-aa265aa05d6646a8886df6486f52e585_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/a824c48b07dc552fe0efd7996636e80d.jpeg)
2、选择数据源类型下拉框,可以看到支持4种数据类型,分别是 静态数据、EXCEL/CSV、数据API及数据库
![v2-c6e938d1dec87a4eb039d349d675069d_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/15edf949ebe3b24693db86631630d23e.jpeg)
3、先介绍“数据API”类型文本绑定,切换至数据API
数据API动态绑定
要点:只要api接口访问的JSON数据和静态类型的数据一致即可,这里需要返回的JSON内容是:
[{“value”:”今天天气不错还风和日丽的”,”url”:””}]
操作:数据源类型选择API,URL里填入上述API地址,如下图如示:
![v2-5dc73239babf949bd3e112a8a828283e_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/cc4af6d395270133c725489b0645b3bf.jpeg)
完成后,可以设置按一定时间频率从API重新请求数据刷新
![v2-d881d1c9e45cdc5682d6d2ddcbcbfc58_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/dfb0444a6150158a39690ba8b23881aa.jpeg)
与查询条件联动,根据查询条件动态刷新文本
1、拖入查询条件,并设置查询条件唯一ID
注:查询条件自身也可绑定为动态数据
假设绑定的查询条件唯一标识为:text_filter
![v2-fd7ac7ac514ba6e04c3228143fecd28d_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/20af3695ab0a781e2646a264fe9c9256.png)
2、选择需要联动的组件,这里是文本组件,在设置区选择“数据”并进行设置
![v2-824990f5a3b56a0b7f9ea583c71942dd_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/c4b4aaf04191f899bf28bb1dbb60a4de.jpeg)
注意红色方框的字,是与查询条件联动加上去的
&text_filter=|text_filger|
加完后整体API的URL变成
设置完成后,整体联动逻辑就是:根据用户选择的查询条件值,会将查询条件数据中的”id”列作为参数,传入API的参数中,API中根据具体的参数进行动态显示
如下图,如查询条件控件中的数据绑定后,选择第一个值:
![v2-1943626c67e59350478e5747dead5c07_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/bc92a057581690da0d092c652973b2ba.jpeg)
后台会自动将’10020’这个id值,传入到API请求中,转化后的API请求为:
API中的逻辑根据此参数进行动态过滤即可。
数据库动态数据绑定
要点:只需绑定对应组件的数据源,组件会自动显示文本
假设从数据库查询并返回一条需要显示的文本数据
![v2-c8f1db199e39068a12ac891183e36f0b_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/4243eee8659ea337bebfccf84fceb0f5.png)
选中需要显示的文本组件,数据源选择“数据库”(没有需先维护数据库链接)
写入对应的sql语句
![v2-0ea525a045bf3ffb45ce0c33f2e7b419_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/3b7cae0b3b4a6745a910a75158f4e6cf.jpeg)
与查询条件联动,根据查询条件动态刷新文本
1、拖入查询条件,并设置查询条件唯一ID
注:查询条件自身也可绑定为动态数据
假设绑定的查询条件唯一标识为:text_filter
![v2-fd7ac7ac514ba6e04c3228143fecd28d_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/20af3695ab0a781e2646a264fe9c9256.png)
2、选择需要联动的组件,这里是文本组件,在设置区选择“数据”并进行设置
写入sql语句:
增加:where filter_text=|filter_text|
完整的sql语句为:
select DISTINCT catalog_name from business_search_words where filter_text=|filter_text|
设置完成后,整体联动逻辑就是:根据用户选择的查询条件值,会将查询条件数据中的”id”列作为参数,传入sql语句的参数中,sql中根据具体的参数进行动态查询显示
如下图,如查询条件控件中的数据绑定后,选择第一个值:
![v2-1943626c67e59350478e5747dead5c07_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/bc92a057581690da0d092c652973b2ba.jpeg)
后台会自动将’10020’这个id值,传入到sql请求中,转化后的sql请求为:
select DISTINCT catalog_name from business_search_words where filter_text=10020
其他的sql语句拼接都类似。
文中使用的免费BI软件入口:
mybi免费大数据分析