2022-07-04 低代码可视化工具DataV实战教程之基础组件

二、基础组件和表格

概念

页面设置:

页面基础设置,包括大小、颜色、缩放格式等。

组件设置:

单击画布中的某一个组件,画布右侧会出现配置项面板。包括配置数据交互三个标签页

配置面板中,您可以配置组件的公共配置和组件特有的配置。

数据面板中,您可以编辑组件数据和配置组件所使用的数据源。

交互面板中,您可以配置组件之间的交互事件

配置

配置分为两种一种是各个组件的通用样式例如图表尺寸图表位置旋转角度不透明度等。另外一种是每个组件独有的属性例如列表组件的表头,标题组件的标题等等每个组件的配置是不同的。

数据

在数据面板中可以为组件配置数据源(通过api、数据库等形式)和添加数据过滤器(过滤出满足组件的数据)。

数据源目前支持以下图片中的方式,成功返回的数据源结果可以从数据响应结果中查看。

数据过滤器可以对返回的数据进行过滤,可以对数据格式进行修改,字段key值修改,可以添加多个过滤器,最后的数据响应结果以最后一个数据过滤处理后的数据为准。


数据过滤器配置流程:

1、在数据配置面板中点击添加数据过滤器跳转到配置面板,同时开启数据过滤器。

2、新建一个过滤器,过滤器默认是一段js函数代码,其中data参数表示当前数据源返回的数据,默认返回的是当前数据源的数据,

3、通过修改数过滤器,获得修改后的数据

不开启数据过滤器时返回的数据结果

开启数据过滤器后返回的数据结果

4、配置多个数据过滤器,每个数据过滤器中data参数为上次返回的数据结果,因此每个数据过滤器会执行层层过滤返回最终的数据结果

交互(回调ID)

回调id:

回调id是指某个组件在响应用户操作或者自动触发更新时向别的组件传递的参数,这个参数可以在别的组件中用于数据查询时的动态变量。

设置回调id的默认值

我们可以通过在url中设置请求参数的形式来设置回调id的默认值,如:

http://datav.aliyun.com/screen/000000?mtk=123

通过这个url访问时,在页面打开的时候,回调mtk的值已经设置为123了。

多个回调id之间使用&符号连接。

示例

配置数字翻牌器

1.  在组件资产中找到数字翻牌器组件并添加到画布中

2.  在全局配置中配置文本样式、排列方式、间距等

3.  在标题配置中配置标题的内容和颜色、字体等,如果没有不配置

4.  配置翻牌器内容,完整翻牌器主要分为标题、前缀、后缀、数字四个部位。每个部位可以进行单独配置包括颜色、字体、大小等

5.  数据源配置,四个字段分别对应翻牌器的四个部位

通用标题配置

1.  在组件资产中找到通用标题组件并添加到画布中

2.  确认标题数据是动态数据还是静态数据,静态数据可以直接在组件配置中的标题名称中配置,如果是动态数据可以在数据接口中通过数据结果获取

3.  通过接口配置标题数据,接口返回的value字段对应标题名称,如果标题是超链接,url字段对应链接地址,也可以直接在配置面板中写死链接地址

4.  配置标题常用样式包括字体、大小、颜色、对齐、加粗等基本样式

配置3D环形图

1. 在组件资产中找到3D环形图组件并添加到画布中

2. 在数据面板中配置环形图所用的数据,name字段对应饼图类型如(阴性、阳性、未上报)value字段对应各自类型的值在饼图中占比

3. 配置图形角度,水平和垂直方向、颜色等

颜色设置

在颜色中设置饼图类型的总数量,在颜色模板中对各个数量的类型进行单独的颜色配置。

轮播列表配置

1. 在组件资产中找到轮播列表组件并添加到画布中

2. 在全局配置中配置表格显示的行数、是否轮播等

3. 在表头配置中对表头开关、表头高度、表头背景颜色、表头内文本样式等进行配置

4. 在组件的数据配置列表配置列表中需要的数据,数据的key值对应自定义列中的字段名称,这样列字段展示的数据就对应每条数据key值对应的数据

配置列名称,列显示名等于实际显示的名称,同时可以对每列的样式进行单独配置,包括每列的宽度、内容类型、换行、对齐等

重点提醒

通过隐藏组件实现接口鉴权:

1、在画布中添加tab组件并隐藏(避免样式问题)

2、通过配置数据源调用登录接口并且传递参数

3、添加数据过滤器过滤出mtk(只需要mtk)然后得到数据响应结果

4、交互配置中启用tab的点击事件,因为tab列表的默认选中事件会触发登录接口的调用所以不需要增加额外的处理,添加自定义字段数据源中的mtk字段并绑定到token变量中

5、在其他组件中进行数据配置时使用变量token作为mtk传递到接口

单一接口数据串行到多个组件

1、将组件导出到蓝图编辑器

2、添加隐藏tab组件调用接口(如接口需要鉴权需要先登录),

3、将返回的数据通过串行数据处理再导入到组件(导入到组件的数据必须与数据源中默认字段对应)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容