---
url: /v6.2/button.md
---
# 按钮控件

仪表盘在展示时，除了展示业务相关的图表数据外，还需要很多与仪表盘交互的操作，如刷新仪表盘、显示仪表盘指定图表、切换到全屏展示、打印仪表盘数据、导出仪表盘图表等。在 PC 端这些功能都可以通过鼠标移动和点击实现，如点击浏览器刷新按钮进行仪表盘刷新，滚动鼠标在屏幕内寻找需要展示的具体图表，寻找全屏按钮实现全屏展示，查找浏览器的打印功能进行仪表盘打印等等。但是在展示过程中，这些复杂的操作让仪表盘展示过程显得杂乱无章，有时候可能会中断展示。

按钮控件很好的解决了上述问题。仅需在仪表盘中增加一个按钮，就可以将复杂的操作一键完成，让展示过程更顺畅，提升用户的体验。

下面介绍如何添加按钮，以及按钮控件实现的具体功能。

## 添加按钮

1. 点击新建按钮控件，添加一个新的按钮。
   ![](/images/button-001.png)

2. 修改按钮样式，按钮的名称、按钮样式、内边距。
   ![](/images/button-002.png)

3. 进入三点菜单中的控件设置，设置控件样式。
   ![](/images/button-003.png)

4. 在控件交互中，添加相应的点击事件，实现按钮功能。
   ![](/images/button-004.png)

## 按钮支持的事件类型

按钮支持以下事件：

* 跳转：支持三种跳转类型。
  * 返回上一页。
  * 跳转到应用内仪表盘。跳转时支持设置带入过滤条件值，详细操作请参考[控件设置->跳转](control-setting.md#跳转)章节。
  * 跳转到指定的 URL 地址，可以实现仪表盘自己跳自己。 PC 端支持在当前窗口打开 URL 地址，也支持在新窗口和弹窗中打开 URL 地址。
* 滚动到：点击按钮时滚动到当前仪表盘内的控件，在下拉框中选择相应控件。
* 控制容器：控制容器页面的切换，点击按钮时切换到指定的容器页面。
* 全屏：点击按钮后进行全屏预览。移动端暂时不支持该事件。
* 导出：点击按钮后进行导出操作。支持仪表盘 PNG、仪表盘 PDF、仪表盘数据、应用 PPT、应用数据、应用 PDF、图表数据、图表 PNG、图表 PDF。移动端暂时不支持该事件。
* 刷新：点击按钮执行页面刷新操作。
* 打印：点击按钮时执行浏览器打印。移动端暂时不支持该事件。
* 执行 JS 代码：点击按钮时执行编写的 JS 代码。

## 事件流

一个按钮可以触发多个点击事件，形成事件流。 在添加多个事件时，支持以下操作。

* 添加多个点击事件时支持重复添加相同类型的事件。
* 支持调整事件顺序。
* 支持删除事件。
* 支持设置事件的执行间隔。 设置执行间隔后，下一个点击事件会在间隔时间后执行，若未设置执行间隔，则下一个事件会在本事件后立即执行。

![](/images/button-005.png)

## 演示示例

示例中展示了按钮在实现跳转到应用内指定仪表盘、滚动到仪表盘内指定控件、全屏、打印等相关功能时的效果。
![](/images/button-006.gif)