1. 概述

本文将为您介绍大屏组件的样式、数据和交互配置。

2. 样式配置

选中组件后,右侧的设置面板,第一个Tab就是“样式”设置,可以在这里修改组件的样式。
组件的配置 - 图1

组件的样式设置通常分为三类:

  • 图形:最核心图形元素的设置,比如柱形图的柱子颜色、柱子宽度
  • 辅助信息:一些辅助表意的信息设置,比如图例、数据标签、提示信息
  • 卡片设置:一些跟图形无关的设置,比如卡片的标题、背景、边框、圆角
    组件的样式配置.png

操作步骤


以“柱形图”为例。选中组件,右侧的样式配置中,按照上述三个分类,分为“图形”、“辅助信息”、“卡片设置”三个Tab。
组件的配置 - 图3

根据需要,在特定Tab下找到对应的样式设置项,调整组件的样式。比如,为组件设置一个外阴影。
组件的配置 - 图4

3. 数据配置

选中组件后,右侧的设置面板,第二个Tab就是“数据”设置,可以在这里设置组件要接入的数据源。
组件的配置 - 图5

组件支持三类数据源:

  • 静态数据:添加组件后,系统会自动为组件设置一段静态的JSON数据,用户可修改JSON数据,直观看到组件的变化。适用于大屏搭建阶段。可以敏捷地使用假数据调试,更快地看到大屏效果。同时避免搭建阶段就产生大量数据请求,减少搭建阶段的编辑器性能消耗。
  • API:配置API接口参数后,组件可以定时向指定API接口查询最新数据,更新图表。
  • 数据模型:可以复用BI的数据模型,借助数据模型,可以接入文件型数据(Excel、CSV)、关系型数据库(Mysql、Oracel等)、大数据平台等。
    组件的配置 - 图6

3.1 操作步骤


如下将详细介绍每类数据源的使用步骤。

静态数据

(1)设置静态数据 选中组件后,在组件的“数据”面板,将数据源类型切换为“静态数据”后,可以直接编辑JSON数据。也可以在弹窗中更方便地修改。修改后将实时对组件生效。
组件的配置 - 图7

JSON数据需要满足如下格式:

[
    {
        "字段名a":"值a1"
        "字段名b":"值b1"
        "字段名c":"值c1"
    },
    {
        "字段名a":"值a2"
        "字段名b":"值b2"
        "字段名c":"值c2"
    }
]

JSON数据到数据表的映射关系如下:
json数据说明.png

(2)配置图表

点击“数据”tab底部的分析按钮。
组件的配置 - 图9

系统会将满足格式要求的JSON数据解析成若干“字段”。
组件的配置 - 图10

用户可根据需要,将字段拖入图表的配置区域以完成图表绘制。系统有时候会根据字段名称,自动拖入对应的配置区域,你也可以根据需要进行调整。
组件的配置 - 图11

API

(1)设置API参数

设置API的“URL地址”跟“请求方式”,有需要的话也可以设置请求头、请求参数。

图中使用了一个公开的API接口,URL地址:https://c.m.163.com/ug/api/wuhan/app/data/list-total

组件的配置 - 图12

完成设置后,点击“连接”以连通API接口。
组件的配置 - 图13

你也可以预览API接口的返回数据。
组件的配置 - 图14

如果API返回的数据不符合系统要求的格式(API接口需返回跟上方“静态数据”章节格式要求一致的JSON数据),你还可以使用“自定义数据处理”功能对API接口的返回数据进行二次加工数据。
组件的配置 - 图15

图中的示例加工代码如下

function _innerHandle (data) { 
    const cache = data.data || data


    return cache.chinaDayList.map((node)=>{
        return {
            date: node.date,
            confirm: node.today.confirm,
            input: node.today.input
        }

    })
}

(2)配置图表

点击底部的分析按钮。
组件的配置 - 图16

系统会将API接口返回的JSON数据解析成若干“字段”。
组件的配置 - 图17

用户可根据需要,将字段拖入图表的配置区域以完成图表绘制。
组件的配置 - 图18

数据模型

(1)添加数据模型

如下图所示,在模型的下拉选择中,可以添加组件需要使用的数据模型。
组件的配置 - 图19

系统会展示可供添加的数据模型。
组件的配置 - 图20

如果你创建了数据模型,但是在这里没找到。可以检查下该数据模型的应用范围设置,是否勾选了允许“大屏pro”使用。

关于“数据模型”的更多使用说明,可阅读“数据源->数据模型”章节

组件的配置 - 图21

(2)配置图表

添加完之后,将组件的数据模型切换成要使用的模型。
组件的配置 - 图22

右侧会展示该模型的“字段”列表。
组件的配置 - 图23

用户可根据需要,将字段拖入图表的配置区域以完成图表绘制。
组件的配置 - 图24

3.2 数据筛选


当组件的数据源为“数据模型”时,则可对数据进行筛选操作。支持拖入字段配置数据筛选条件,可拖入多个字段。 组件的配置 - 图25

  • 维度字段(字符串、整数、小数类型)的支持列表筛选、文本筛选、条件筛选和高级筛选(TopN)
    组件的配置 - 图26

  • 度量字段支持范围筛选(有范围、至少、至多3种筛选方式)
    组件的配置 - 图27

  • 维度字段(日期类型)支持日期筛选
    组件的配置 - 图28

3.3 地理字段的坐标映射


针对维度字段,可设置地理角色。支持设置成4个粒度的地理角色:“国家/地区”、“省/市/自治区”、“城市”、“区县”
组件的配置 - 图29

  • 进入配置界面后,系统会先根据字符串进行模糊匹配,未匹配到的数据项,会展示“无法识别”,支持手动选择对应项,手动选择时支持搜索过滤。成功匹配的数据项,也支持手动调整。
    组件的配置 - 图30

  • 绘制地图类图表,拖入地理角色字段时,会根据地理角色匹配到的精准定位来绘制数据项,无法识别的数据项会忽略不绘制

4. 交互配置

选中组件后,右侧的设置面板,第三个Tab就是“交互”设置,可以在这里设置组件要实现的交互效果。
组件的配置 - 图31

比如,通过Tab控件来控制不同组件的展示状态。
组件的配置 - 图32

4.1 交互参数


上方举的例子,Tab控件控制柱图/饼图的展示切换。是借助“交互参数”功能实现的。大致的逻辑关系如下图所示

  • Tab控件是控制端,柱图、饼图是影响端,交互参数则是控制端向影响端传递信息的媒介
  • 控制端的Tab控件发生切换时,会触发交互参数的值发生变化
  • 影响端的柱图、饼图,依据交互参数值的变化去执行响应的动作(比如显示、隐藏)
    组件的配置 - 图33

详细的操作步骤如下(以“Tab控件控制柱图/饼图的展示切换”举例)

(1)添加选项卡控件跟柱图、饼图

添加一个“选项卡”控件。
组件的配置 - 图34

将“选项卡”的数据设置为柱图、饼图。

[
  {
    "tabName": "柱图"
  },
  {
    "tabName": "饼图"
  }
]

组件的配置 - 图35

添加柱图、饼图控件。
组件的配置 - 图36

(2)创建一个交互参数

组件的配置 - 图37

设置参数的信息。

  • 参数名称:SwitchTab
  • 类型:字符串
  • 默认值:柱图

组件的配置 - 图38

(3)将Tab控件跟参数绑定

在Tab控件的交互面板,添加一个绑定参数。使得Tab的切换触发参数值的同步变化。

  • 交互操作:切换选项
  • 字段值:tabName
  • 指定参数:SwitchTab(上一步创建的交互参数)

组件的配置 - 图39 组件的配置 - 图40

(4)设置柱图、饼图的响应事件

选中柱图组件,在交互面板中,开启响应事件。设置显示动画、消失动画。
组件的配置 - 图41

设置事件响应的函数条件。
组件的配置 - 图42

条件设置成参数“SwitchTab”为“柱图”时展示。(当前,响应条件的设置方式需要编写简单的JS代码,如下方示意。后续版本会支持更易用的零代码设置方式)

示例代码如下

function _innerHandle (params) {
  return params.SwitchTab == "柱图"
}

组件的配置 - 图43

同理,选中饼图,在交互面板中,开启响应事件。设置显示动画、消失动画。设置事件响应的函数条件,设置参数“SwitchTab”为“饼图”时展示。

示例代码如下

function _innerHandle (params) {
  return params.SwitchTab == "饼图"
}

组件的配置 - 图44

(5)完成设置,预览效果

如上,即完成了交互配置。点击右上角的“预览”可查看效果。
组件的配置 - 图45

4.2 图表联动

有一类常见的图表联动场景,比如下图,饼图选中某个地区,联动柱图展示对应地区的数据。
组件的配置 - 图46

针对此类场景,后续会提供相比“交互参数”更简单的“图表联动”配置方式,用户只需点选即可完成多个组件之间的数据联动。敬请期待。

4.3 多屏交互能力


支持跨大屏绑定交互参数,实现主屏控制其他展示屏的场景(如使用PC或手机,控制大屏幕上展示大屏的切换)。
组件的配置 - 图47

  • 如下图所示,组件的“交互”模块里增加了“绑定跨屏参数”设置,可选择将字段值传递至其他大屏的交互参数;
    组件的配置 - 图48

  • 选择其他大屏时,您只能选择同一项目中有编辑权限的其他大屏。
    组件的配置 - 图49