二、基础组件和表格
概念
页面设置：
页面基础设置，包括大小、颜色、缩放格式等。
组件设置：
单击画布中的某一个组件，画布右侧会出现配置项面板。包括配置、数据和交互三个标签页
在配置面板中，您可以配置组件的公共配置和组件特有的配置。
在数据面板中，您可以编辑组件数据和配置组件所使用的数据源。
在交互面板中，您可以配置组件之间的交互事件
配置
配置分为两种一种是各个组件的通用样式例如图表尺寸、图表位置、旋转角度、不透明度等。另外一种是每个组件独有的属性例如列表组件的表头，标题组件的标题等等每个组件的配置是不同的。
数据
在数据面板中可以为组件配置数据源（通过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、将返回的数据通过串行数据处理再导入到组件（导入到组件的数据必须与数据源中默认字段对应）
网友评论