1. 概述

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

2. 样式配置

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

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

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

操作步骤

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

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

3. 数据配置

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

组件支持三类数据源：

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

操作步骤

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

静态数据

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

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

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

JSON数据到数据表的映射关系如下：

（2）配置图表

点击“数据”tab底部的分析按钮。

系统会将满足格式要求的JSON数据解析成若干“字段”。

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

API

（1）设置API参数

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

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

完成设置后，点击“连接”以连通API接口。

你也可以预览API接口的返回数据。

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

图中的示例加工代码如下

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）配置图表

点击底部的分析按钮。

系统会将API接口返回的JSON数据解析成若干“字段”。

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

数据模型

（1）添加数据模型

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

系统会展示可供添加的数据模型。

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

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

（2）配置图表

添加完之后，将组件的数据模型切换成要使用的模型。

右侧会展示该模型的“字段”列表。

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

4. 交互配置

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

比如，通过Tab控件来控制不同组件的展示状态。

方式一.交互参数

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

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

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

（1）添加选项卡控件跟柱图、饼图

添加一个“选项卡”控件。

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

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

添加柱图、饼图控件。

（2）创建一个交互参数

设置参数的信息。

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

（3）将Tab控件跟参数绑定

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

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

（4）设置柱图、饼图的响应事件

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

设置事件响应的函数条件。

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

示例代码如下

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

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

示例代码如下

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

（5）完成设置，预览效果

如上，即完成了交互配置。点击右上角的“预览”可查看效果。

方式二.图表联动

有一类常见的图表联动场景，比如下图，饼图选中某个地区，联动柱图展示对应地区的数据。

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