交互组件

本章节统一使用数据源管理中interaction_tutorial_data1文件进行示例教学讲解，如图所示。用户可以在莫奈产品中调用该数据文件进行数据配置。

该数据csv文件文件名为interaction_tutorial_data.csv，数据文件结构如下图：

该数据展现某电商2006年第二季度至2007年第一季度的销售金额与成本情况。

注意：当数据文件为csv格式时，图表查询语句中表名应该为csv文件名；当数据文件为excel格式时，图表查询语句中表名应该为excel文件中的表名。

时间轴

时间轴交互组件是将不同时间节点显示在同一轴上，用户通过点击不同时间节点与数据进行交互。

适用场景：用户通过点击不同年份时间节点，对前年，去年以及今年的数据进行筛选。

时间轴使用示例教学视频如下：

样式设置

时间轴组件的样式设置包含节点设置、轴设置、事件设置、时间设置、动画设置、图表位置和图表尺寸。

节点设置

排列方向：横向、纵向。

节点形状：菱形、圆形；

节点大小：单位为px（像素）；

默认颜色：节点的默认颜色；

默认颜色：节点的选中颜色；

轴设置

轴粗细：单位为px（像素）；

默认颜色：轴的默认颜色；

默认颜色：轴的选中颜色，可以添加渐变色；

事件设置

• 默认样式：默认状态下的事件样式

轴间距：事件距离轴的垂直距离，单位为px（像素）；

事件文字的相关设置：包括字号、字体、字体颜色、字体粗细；

• 选中样式：选中状态下的事件样式

轴间距：事件距离轴的垂直距离，单位为px（像素）；

事件文字的相关设置：包括字号、字体、字体颜色、字体粗细；

时间设置

• 默认样式：默认状态下的时间样式

轴间距：时间距离轴的垂直距离，单位为px（像素）；

时间文字的相关设置：包括字号、字体、字体颜色、字体粗细；

• 选中样式：选中状态下的时间样式

轴间距：时间距离轴的垂直距离，单位为px（像素）；

时间文字的相关设置：包括字号、字体、字体颜色、字体粗细；

动画设置

轮播设置：循环轮播、轮播一次后停止轮播；

间隔时间：从一个节点到下一个节点的间隔时间；

停留时间：在一个节点上的停留时间；

数据设置

数据字段

时间轴的数据字段包括：timeName，event，timeValue

timeName：时间的显示内容；

event：事件的内容；

timeValue：时间的编码值；

在下方表格中可输入或复制粘贴所需要的数据。其中，每一列数据对应一个数据字段，第一行为该列数据字段名，需要在上方进行映射设置。

目前，数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后，可以点击右键进行操作，也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是，会对该列或行全部选中，点击末尾的红色按钮可对该行或列进行删除操作，也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时，会出现放大输入窗口，方便用户进行操作。窗口内操作方式相同，修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时，用户需在输入框中输入json格式的数据，数据格式如下。

 js
[
{
	"time": "2000年",
	"event": "事件1",
	"value": 2000
}, {
	"time": "2001年",
	"event": "事件2",
	"value": 2001
}, {
	"time": "2004年",
	"event": "事件3",
	"value": 2004
}
]

交互设置

节点选中响应事件

可将时间轴组件选择的时间字段绑定到变量中，那么在当前大屏中则存在此变量，即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量，通过 “：变量名称”的方式使用变量，完成数据的动态展示。

日期选择器交互组件

日期选择器交互组件是用来选择某一时间范围的交互组件，用户可以选择某两个具体日期的日期区间来对数据进行筛选，例如：用户选择2020年1月1日到2020年6月18日的销售数据来查看公司上半年的销售情况；也可以分别选择两个以当前日期为标准 T+n 的日期区间来筛选，例如：用户选择2021年1月1日到当前日期+0，即今天的最新日期来动态展示更新到最新的公司销售情况。

日期选择器交互组件使用示例教学视频如下：

样式设置

日期选择器交互组件的样式设置包含默认设置，选择器设置。

默认设置

默认设置可设置显示格式，日期格式，默认日期，文本设置，边框设置。

显示格式

包含按天显示、按月显示、按年显示；

日期格式

日期的显示格式，包括 “YYYY年MM月DD日”，“YYYY-MM-DD”，“YYYY/MM/DD”三种格式；

默认日期

当前组件在展示时的默认日期，包括固定日期和动态日期。固定日期选中后不再变化；动态日期设置后数据根据设置的时间随当前日期变化，动态变化增减日期仅可输入整数，单位随上方选中的日期格式变化；(默认日期的设置可以在样式-默认设置中设置，也可以在数据进行设置，以数据设置为准)

文本设置

可以对日期选择器中的文本的字体，字号，粗细，大小进行设置。

边框设置

可以对边框粗细，边框颜色以及背景颜色进行设置。

数据设置

数据字段包含：startDate和endDate两个数据字段。

startDate：设置的是日期选择器的起始时间。

endDate：设置的是日期选择器的终止时间。

在下方表格中可输入或复制粘贴所需要的数据。其中，每一列数据对应一个数据字段，第一行为该列数据字段名，需要在上方进行映射设置。

目前，数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后，可以点击右键进行操作，也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是，会对该列或行全部选中，点击末尾的红色按钮可对该行或列进行删除操作，也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时，会出现放大输入窗口，方便用户进行操作。窗口内操作方式相同，修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时，用户需在输入框中输入json格式的数据。

交互设置

时间范围选择响应事件

时间范围选择响应事件默认开启。

可将适建范围选择组件选择的时间范围按照绑定到变量中，那么在当前大屏中则存在此变量，即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量，通过 “：变量名称”的方式使用变量，完成数据的动态展示。

Tab组件

tab交互组件是以标签的形式为用户提供数据筛选的交互组件。用户可以自定义tab标签的个数以及名称，进而通过点击不同标签筛选相应的数据。例如：用户将标签编辑为不同类型蔬菜，来对蔬菜售出情况进行筛选。

tab组件使用示例教学视频如下：

样式设置

Tab组件目前支持默认样式、选中样式、图表位置和图标尺寸这四大类的配置项。

Tab组件的默认样式设置包含tab排列方向、文本设置、对齐方式、标签间距、边框粗细、边框颜色、背景颜色、和背景图片。

tab排列方向：包含横向和纵向；

Tab组件的选中样式包含背景颜色，边框设置，文本设置这三个配置项

文本设置

字体：支持微软雅黑、宋体、黑体、隶书、幼圆、楷体和系统默认字体；

字号：可输入字号调整；

字体粗细：字体的粗细，有正常、细体、粗体、更粗四个选项；

字体颜色：字体的颜色，鼠标悬停后出现颜色选择框，选择颜色即可，如下图：

对齐方式：文字的对齐方式，有居左、居中、居右三个选项；

标签间距：可以对tab标签之间的间距进行设置

边框设置：可设置边框的粗细及边框的颜色。

背景设置：可选择颜色背景或图片背景。

选中样式

tab标签的选中样式可以设置文本，边框及背景。

文本设置

字体：支持微软雅黑、宋体、黑体、隶书、幼圆、楷体和系统默认字体；

字号：可输入字号调整；

字体粗细：字体的粗细，有正常、细体、粗体、更粗四个选项；

字体颜色：字体的颜色，鼠标悬停后出现颜色选择框，选择颜色即可

边框设置：可设置边框的粗细及边框的颜色。

背景设置：可选择颜色背景或图片背景。

数据设置

数据字段

tab的数据字段包括：option，value

value：tab的编码值，需要将数据与图表中的字段进行映射；

option：tab的显示内容，也需要将数据与图表进行映射；

在下方表格中可输入或复制粘贴所需要的数据。其中，每一列数据对应一个数据字段，第一行为该列数据字段名，需要在上方进行映射设置。

目前，数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后，可以点击右键进行操作，也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是，会对该列或行全部选中，点击末尾的红色按钮可对该行或列进行删除操作，也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时，会出现放大输入窗口，方便用户进行操作。窗口内操作方式相同，修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时，用户需在输入框中输入json格式的数据，数据格式如下。

 js
[
    {
        "value":1,
        "option":"Tab1"
    },
    {
        "value":2,
        "option":"Tab2"
    },
    {
        "value":3,
        "option":"Tab3"
    }
]

交互设置

标签点击响应事件

标签点击响应事件默认开启。

可将tab的value绑定到变量中，那么在当前大屏中则存在此变量，即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量，通过 “：变量名称”的方式使用变量，完成数据的动态展示。

多选框

多选框组件为用户提供自定义选择所需要展示选项的功能，用户可以在多个选项中任意选择一个或多个约束条件来进行数据筛选。适用场景：用户设定多选框以对时间维度数据进行筛选，用户可任意选择前年，去年和今年中想展示出的数据。

多选框使用示例教学视频如下：

样式设置

默认样式：

默认样式中，可对多选框的排列方向，文本设置，对齐方式，图标大小，图标与文本间距进行设置。

多选框的排列方向：支持横向和纵向两个方向

文本设置：支持字体、字号、粗细和颜色进行配置

对齐方式：支持居左、居中和居右

数据设置

数据字段

多选框的数据字段包括：option，value和iconColor

option：多选框显示的内容；

value：多选框代表的值；

iconColor（选填）：可对图标颜色分别进行设置。

在下方表格中可输入或复制粘贴所需要的数据。其中，每一列数据对应一个数据字段，第一行为该列数据字段名，需要在上方进行映射设置。

目前，数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后，可以点击右键进行操作，也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是，会对该列或行全部选中，点击末尾的红色按钮可对该行或列进行删除操作，也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时，会出现放大输入窗口，方便用户进行操作。窗口内操作方式相同，修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时，用户需在输入框中输入json格式的数据，数据格式如下。

 js
[
  {
    "value":1,
    "option":"选项1"
  }, {
    "value":2,
    "option":"选项2"
  }, {
    "value":3,
    "option":"选项3"
  }
]

交互设置

节点选中响应事件

这里可以自定义一个变量名，可实现下拉框组件当前选择的值与变量绑定，在当前大屏中则存在此变量，即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量，通过 “：变量名称”的方式使用变量，完成数据的动态展示。

输入框

输入框是通过用户输入的信息来对数据进行筛选的交互组件。适用场景：用户在输入框中输入想要查找的时间范围，如第一季度第二季度等，图表可显示第一季度第二季度相应的销售数据。

输入框使用示例教学视频如下：

样式设置

样式设置中包含边框设置，背景设置，圆角设置和文本设置；

边框设置包含粗细和颜色设置；

背景设置为颜色设置；

圆角设置为输入框圆角曲度设置；

文本设置包含：

文本样式

字体：支持微软雅黑、宋体、黑体、隶书、幼圆、楷体和系统默认字体；

字号：可输入字号调整；

字体粗细：字体的粗细，有正常、细体、粗体、更粗四个选项；

字体颜色：字体的颜色，鼠标悬停后出现颜色选择框，选择颜色即可，如下图：

对齐方式：文字的对齐方式，有居左、居中、居右三个选项；

数据设置

数据字段

tab的数据字段包括：value

value：value为输入的内容

在下方表格中可输入或复制粘贴所需要的数据。其中，每一列数据对应一个数据字段，第一行为该列数据字段名，需要在上方进行映射设置。

目前，数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后，可以点击右键进行操作，也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是，会对该列或行全部选中，点击末尾的红色按钮可对该行或列进行删除操作，也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时，会出现放大输入窗口，方便用户进行操作。窗口内操作方式相同，修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时，用户需在输入框中输入json格式的数据，数据格式如下。

 js
[{"value":""}]

交互设置

标签点击响应事件

标签点击响应事件默认开启。

可将输入框的value绑定到变量中，那么在当前大屏中则存在此变量，即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量，通过 “：变量名称”的方式使用变量，完成数据的动态展示。

启动按钮

启动按钮是用来触发交互组件进行交互的，需要与其他交互组件捆绑使用。适用场景：当设置好交互组件交互配置后，不想点击交互组件后立刻对数据进行交互展示，而是需要再次点击确认后进行交互。

启动按钮使用示例教学视频如下：

样式设置

样式设置中包含文本内容，文本设置，圆角设置和边框设置；

边框设置包含粗细和颜色设置；

背景设置为颜色设置；

圆角设置为输入框圆角曲度设置；

文本内容即该按钮在预览页面展示的文字信息；

文本设置包含：

文本样式

字体：支持微软雅黑、宋体、黑体、隶书、幼圆、楷体和系统默认字体；

字号：可输入字号调整；

字体粗细：字体的粗细，有正常、细体、粗体、更粗四个选项；

字体颜色：字体的颜色，鼠标悬停后出现颜色选择框，选择颜色即可，如下图：

对齐方式：文字的对齐方式，有居左、居中、居右三个选项；

数据设置

启动按钮负责做延迟交互操作，不存在数据设置

交互设置

该组件无交互设置，它主要的功能是让其他存在交互设置的组件延迟传参(统一事件传参)

当用户在其他组件下的交互设置中勾选“开启延迟交互”，则用户在这些组件的变量值发生改变时，将不会立刻感知参数的传递，而是在点击启动按钮后，这些交互组件才会进行参数的传递，同时完成数据拾取和展示。

城市选择组件

城市选择器交互组件是用来选择任意城市从而完成交互行为的组件，他是在当数据涉及到城市信息时使用的组件。例如：用户可以在城市选择组件中选择不同城市用以来展示不同城市的人口情况。

样式设置

城市选择组件的样式设置包含默认设置和选择器设置两种。

默认设置

默认设置包含：默认城市，文本设置，边框设置。

默认城市：为城市选择组件的默认值，省、市、区县，三级联动。

文本设置

字体：支持微软雅黑、宋体、黑体、隶书、幼圆、楷体和系统默认字体；

字号：可输入字号调整；

字体粗细：字体的粗细，有正常、细体、粗体、更粗四个选项；

字体颜色：字体的颜色，鼠标悬停后出现颜色选择框，选择颜色即可

边框设置

可设置边框的粗细，边框颜色及背景颜色。

选择器设置

选择器设置中可以设置文本，边框粗细，边框颜色及背景颜色。

数据设置

该组件暂无数据设置。

交互设置

城市选择响应事件

城市选择响应事件默认开启。

可将城市选择组件选择的城市id绑定到变量中，那么在当前大屏中则存在此变量，即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量，通过 “：变量名称”的方式使用变量，完成数据的动态展示。

开关按钮

开关按钮是协助用户对某一事件在数据展示时是否执行的组件。用户可自定义这一事件并对其进行文字说明，然后通过编写sql语句来实现其逻辑动能。例如：用户可以设置开关按钮为是否显示第一季度信息来完成对第一季度数据的开关查看。

开关按钮使用示例教学视频如下：

样式设置

开关按钮样式设置中包含默认选择状态，中间背景颜色，选左北京颜色，选右背景颜色，圆角设置，边框设置；

边框设置包含粗细和颜色设置；

圆角设置为输入框圆角曲度设置；

数据设置

数据字段 开关按钮一共有两个数据字段。 leftVlue：开关按钮在左边时的值。 rightValue：开关按钮在右边时的值。

在下方表格中可输入或复制粘贴所需要的数据。其中，每一列数据对应一个数据字段，第一行为该列数据字段名，需要在上方进行映射设置。

目前，数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后，可以点击右键进行操作，也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是，会对该列或行全部选中，点击末尾的红色按钮可对该行或列进行删除操作，也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时，会出现放大输入窗口，方便用户进行操作。窗口内操作方式相同，修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时，用户需在输入框中输入json格式的数据，数据格式如下。

 js
{"onValue":1,"offValue":2}

标签点击响应事件

标签点击响应事件默认开启。

可将输入框的value绑定到变量中，那么在当前大屏中则存在此变量，即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量，通过 “：变量名称”的方式使用变量，完成数据的动态展示。

搜索输入框

样式设置

输入框样式设置中包含边框设置，背景设置，圆角设置和文本设置；

边框设置包含粗细和颜色设置；

背景设置为颜色设置；

圆角设置为输入框圆角曲度设置；

文本设置包含：

文本样式

字体：支持微软雅黑、宋体、黑体、隶书、幼圆、楷体和系统默认字体；

字号：可输入字号调整；

字体粗细：字体的粗细，有正常、细体、粗体、更粗四个选项；

字体颜色：字体的颜色，鼠标悬停后出现颜色选择框，选择颜色即可，如下图：

对齐方式：文字的对齐方式，有居左、居中、居右三个选项；

下拉框样式设置中包含最大行数设置，边框设置，背景设置，圆角设置和文本设置；

最大行数设置是搜索出的模糊查询结果的最大展示行数；

查询接口设置包含：API地址和字段名设置

其中API即为获取模糊查询结果的api地址，字段名即为在该api下拿取数据的字段名称。

数据设置

数据字段

tab的数据字段包括：value

value：value为输入的内容

在下方表格中可输入或复制粘贴所需要的数据。其中，每一列数据对应一个数据字段，第一行为该列数据字段名，需要在上方进行映射设置。

目前，数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后，可以点击右键进行操作，也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是，会对该列或行全部选中，点击末尾的红色按钮可对该行或列进行删除操作，也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时，会出现放大输入窗口，方便用户进行操作。窗口内操作方式相同，修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时，用户需在输入框中输入json格式的数据，数据格式如下。

 js
[{"value":""}]

交互设置

标签点击响应事件

标签点击响应事件默认开启。

可将输入框的value绑定到变量中，那么在当前大屏中则存在此变量，即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量，通过 “：变量名称”的方式使用变量，完成数据的动态展示。

下拉框

下拉框为接触下拉展示效果为用户提供交互及数据筛选的组件。用户点击下拉按钮，就可以在下拉展示中选择需要选择的数据维度。

下拉框使用示例教学视频如下：

样式设置

下拉框组件的样式设置包含背景颜色、边框颜色、文本设置、图表位置和图表尺寸。

背景颜色，边框颜色

可以通过后面的颜色选择器对背景和边框设置自定义的样色；

文本设置

可以对文字的字号、字体、字体颜色、字体粗细进行设置；

数据设置

数据字段

时间轴的数据字段包括：option，value

option：下拉框显示的内容；

value：下拉框代表的值；

在下方表格中可输入或复制粘贴所需要的数据。其中，每一列数据对应一个数据字段，第一行为该列数据字段名，需要在上方进行映射设置。

目前，数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后，可以点击右键进行操作，也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是，会对该列或行全部选中，点击末尾的红色按钮可对该行或列进行删除操作，也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时，会出现放大输入窗口，方便用户进行操作。窗口内操作方式相同，修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时，用户需在输入框中输入json格式的数据，数据格式如下。

 js
[
  {
    "value":1,
    "option":"选项1"
  }, {
    "value":2,
    "option":"选项2"
  }, {
    "value":3,
    "option":"选项3"
  }
]

交互设置

节点选中响应事件

这里可以自定义一个变量名，可实现下拉框组件当前选择的值与变量绑定，在当前大屏中则存在此变量，即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量，通过 “：变量名称”的方式使用变量，完成数据的动态展示。

时间控件

时间控件交互组件是用来选择某一特定时间的交互组件。用户可使用时间控件组件实现某一特定时间筛选的功能，例如：用户想查看2020年6月18日的销售情况。同时也可以通过使用两个时间控件组件来实现某一时间范围的筛选。例如：用户选择2020年1月1日到2020年6月18日的销售数据来查看公司上半年的销售情况。此时，时间控件功能与日期选择器相同，只是两者的呈现形式略有差异。

样式设置

时间控件的样式设置包含默认设置和选择器设置。默认设置，支持显示格式，日期格式，默认日期，文本设置和边框设置。

显示格式：支持按天显示，按月显示和按年显示三种。

日期格式：支持三种常用的日期格式。

默认日期：可以设置时间控件的默认显示时间。如果数据中也对该项进行设置了的话，以数据中的设置为准。

文本设置：可设置字体字号颜色粗细。

边框设置：可设置边框粗细，边框颜色和边框背景颜色。

选择器设置，可设置文本和边框。

文本设置：可设置字体字号颜色粗细。

边框设置：可设置边框粗细，边框颜色和边框背景颜色。

数据设置

时间控件只有一个数据字段：

date：时间选择器的显示日期。

在下方表格中可输入或复制粘贴所需要的数据。其中，每一列数据对应一个数据字段，第一行为该列数据字段名，需要在上方进行映射设置。

目前，数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后，可以点击右键进行操作，也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是，会对该列或行全部选中，点击末尾的红色按钮可对该行或列进行删除操作，也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时，会出现放大输入窗口，方便用户进行操作。窗口内操作方式相同，修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时，用户需在输入框中输入json格式的数据，数据格式如下。

 js
[{"date":"2020-01-01"}]

交互设置

这里可以自定义一个变量名，将时间控件上当前选择的时间与变量绑定，在当前大屏中则存在此变量，即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量，通过 ‘：变量名称’的方式使用变量，完成数据的动态展示。