3.2.8菜单
我们都有浏览门户网站的经验，进入网站后，会有许多标题，展现在我们面前。当看到感兴趣的标题时，我们会点击进入，就会来到更详细的介绍页面。这里的标题，我们也可以称为“菜单”。我们平台的自由仪表板模块也为用户提供了菜单功能，通过点击【菜单】上的不同标题名称标签，系统会快速加载相应的文本并在仪表板上进行展示。这样就允许我们将更多的文本同时整合在仪表板上，根据需求快速调整仪表板上的内容，而无需同时将多个文本展示给读者，让人迷失了关注点。这种菜单形式的展示按钮，实现了图表间的自由切换，让用户达到使用门户网站的极致体验。下面我们就进行详细介绍：
3.2.8.1一层菜单
从题目名称上，我们就可以推测，这是结构较为简单的菜单形式，他只具有一层引用关系，也就是当我们在菜单上点击“文本A”的名称，文本A的具体样子就被调出并展示出来了。List菜单、单选框菜单、普通菜单都是一层菜单，如图3-2-8-1所示。
图3-2-8-1 List菜单、单选框菜单、普通菜单操作入口
首先，我们用使用频率最高的普通菜单来建立一个菜单模板，需要在仪表盘中添加【菜单幻灯区】对象，同样是通过双击或拖拽的形式，对象位置如图3-2-8-2所示：
图3-2-8-2 添加菜单幻灯区
加载文本资源——在添加好的菜单幻灯区内拖入需要被菜单按钮控制切换的图表，如图3-2-8-3所示。请注意，这里只能使用拖拽的方式，而不能使用双击的方式。如果使用双击的动作，系统将默认把图表加载到自由仪表盘中，与菜单幻灯区并列放置，如图3-2-8-4所示。
图3-2-8-3向菜单幻灯区拖拽图表
图3-2-8-4通过双击方式加入资源
拖拽完毕后，虽然我们还暂时看不到图表，但是可以在菜单幻灯区右上角看到我们拖拽进来了几个图表资源，同时在仪表板的左侧资源树上几个拖入的资源，也高亮显示出来，可以很直观的看出拖拽近菜单幻灯区的几个资源。说明相关图表已经和我们的菜单控件实现了连接，资源加载成功。如图3-2-8-5所示。
图3-2-8-5向菜单幻灯区拖拽了四个图表
接下来就可以设置具体的【菜单】了，自由仪表盘平台给用户提供了多种样式不同的【菜单】，其中【普通菜单】，【List菜单】和【单选框菜单】是相对简单的，只有一层结构，我们以【普通菜单】为例进行演示。
在上方的“对象组件可选区”中，选中并拖拽【普通菜单】到需要的布局位置，我们把它放在菜单幻灯区上面。在【普通菜单】右上角的下拉菜单中，如图3-2-8-6所示，点击【设置菜单】，会弹出如图3-2-8-7所示的弹窗。
图3-2-8-6右上角下拉菜单中选择【设置菜单】
图3-2-8-7设置菜单弹窗
我们将逐一对各个图表进行设置，在这里我们可以看到，弹窗中提供的设置选项有：
- 修改菜单名称，即给每一个按钮菜单命名，这个名字将会显示在设置好的菜单上；
- 选择显示区域，即这个菜单按钮，对哪个菜单幻灯区起到作用，由于我们目前示例中只添加了一个菜单幻灯区，所以我们对每一个菜单都选择同样的一个幻灯区即可；
- 选择资源：我们刚刚添加进菜单幻灯区的图表资源，选中我们要设置引用的那个图表；
- 并为页面默认显示的内容勾选“是否默认显示”，也就是说在没有选择具体哪个图表时，仪表区显示的内容是什么。如果所有的菜单都不勾选为默认，那么系统会将默认显示空白。如果对“图表A”勾选了默认显示，则在一开始视图页面去查看仪表板时，该仪表板就默认显示“图表A”的内容；
- 增加、删除上移、下移菜单名称
，默认菜单个数为前面加入的文本资源个数，若数目冗余或不足，可进行相应的增减，也可以根据需要调整菜单名称的展示顺序； - 是否垂直显示，菜单的几个名称是否在菜单区垂直展示；
- 菜单显示方式，满屏、居左、居中、居右，四种菜单位置供选择。
根据刚拖拽进去的图表资源，把每个菜单进行设置，单击确定，如图3-2-8-8所示。
图3-2-8-8根据实际需求设置菜单弹窗
设置完成之后可以将菜单幻灯区资源和对应的菜单，设置成浮动，然后调整对应浮动框的位置和大小，使之更加美观，可读性更高。
我们对例子中的4个图表逐一完成设置后，就可以看到菜单栏起到了效果，点击每个菜单按钮，下面的幻灯区内会按照我们的设置，自动切换到与之对应的图表内容，现在菜单是默认满屏显示，也就是4个菜单名称完全占满了菜单区，如图3-2-8-9所示。
图3-2-8-9菜单功能效果
下面给大家展示一下“是否垂直显示”，和“菜单显示方式”的几种不同样式，设置窗口样式如图3-2-8-10：
图3-2-8-10设置窗口样式
1.勾选中“是否垂直显示”，菜单中的各个标签会以垂直的方式罗列，如图3-2-8-11
图3-2-8-11菜单垂直显示
2.当我们将“菜单显示方式”设置为“居左”时，菜单标签展示方式如图3-2-8-12
图3-2-8-12菜单居左显示
3.当“菜单显示方式”设置为“居中”时，菜单标签展示方式如图3-2-8-13
图3-2-8-13菜单居中显示
4.当“菜单显示方式”设置为“居右”时，菜单标签展示方式如图3-2-8-14
图3-2-8-14菜单居右显示
还可以从菜单右上角的下拉列表中，选择【设置样式】对菜单进行设置，可以设置对菜单设置，也可以对菜单选中的内容进行设置，如图3-2-8-15所示。设置后的效果，如图3-2-8-16所示。
图3-2-8-15设置菜单样式
图3-2-8-16设置菜单样式的显示效果
【对象】组件中的【普通菜单】，【list菜单】和【单选菜单】用法都和上面一致。
其中【list菜单】和【单选菜单】只是展示样式的区别，大家可以根据喜好和需要进行选择。
3.2.8.2两层菜单
下面来操作一下【下拉菜单】和【手风琴菜单】，这里出现了一个类别的概念，当我们在同样进行菜单设置的时候，可以为菜单进行一个二级的分类，举例说明，如图3-2-8-17所示，我们可以把图表类别按照月份来划分。当然，在实际工作中，我们可以按照任何需要的逻辑来为菜单分层，比如按照区域，省份，或者按照销售额，利润表，成本表等多种不同的维度。需要注意的是，设置类别名称设置的是类别的名称如一月，二月，三月等，菜单名称是具体某个图表对应的按钮名称。
图3-2-8-17二级菜单的设置
这里需要注意的是红框圈出的范围，当我们点击
的时候，系统默认我们要新增和删除的是一级菜单，如果我们想到对二级菜单进行操作，需要点击靠右一点的
“新建/删除二级”按钮。想要设置类别名称或者具体菜单名称的顺序，就需要用到
按钮了。
设置完之后点击确定，我们就可以看到如下的界面了，如图3-2-8-18所示，菜单变成了两级可以选择的目录，对应的目录下有相应类别的菜单列表。
图3-2-8-18二级菜单设置完成效果显示
【手风琴菜单】的设置方式完全一样，可参照下拉菜单设置方式设置手风琴菜单。区别于手风琴仅有第一层级就可设置菜单。下拉必须在第二层级设置菜单，手风琴菜单显示如图3-2-8-19所示。
图3-2-8-19手风琴显示页面
3.2.8.3动态配置默认菜单
所有的菜单都添加了该按钮，入口如图3-2-8-20所示
图3-2-8-20配置入口
- 参数名称：指云报表/仪表板参数配置跳转的目标名称，如图 3-2-8-21 所示；
图3-2-8-21参数名称
- 操作符：具体见下拉选项；
- 类型：包含字符，数值，日期；
【使用场景】
仪表板中普通菜单条形图，折线图，面积图。仪表板中动态配置默认菜单中配置如图 3-2-8-22 所示；
图3-2-8-22仪表板配置动态默认菜单
- 仪表板中跳转配置条件 1，条件 2，条件 3 如图 3-2-8-23，3-2-8-24，3-2-8-25所示；
图3-2-8-23条件1配置
图3-2-8-24条件2配置
图3-2-8-25条件3配置
- 展示效果
- 当点击华北时，跳转菜单条形图，如图 3-2-8-26 所示；
图3-2-8-26跳转01
- 当点击华南时，跳转菜单面积图，如图 3-2-8-27所示；
图3-2-8-27跳转02
- 当点击东北时，跳转菜单面积图，如图 3-2-8-28 所示；
图3-2-8-28跳转03
3.2.8.4菜单支持权限设置
普通菜单、List菜单、下拉菜单、单选菜单支持设置权限。配置入口需点击菜单--设置菜单的权限设置即可，如图3.-2-8-29所示。
图3-2-8-29权限设置
- 权限设置，点击用户配置；页面显示如下图3-2-8-30所示。
图3-2-8-30用户配置
使用场景如下文的操作步骤，操作效果如图3-2-8-30所示：
- 构建仪表板资源，添加普通菜单，如上图3-2-8-29所示。设置全国销售概况菜单用户权限为 lj1001，各品类市场表现菜单用户权限为lj，各子品类市场表现和产品等级销售额概况菜单不设置权限。
- 则用户为lj用户能看到各品类市场表现、各子品类市场表现和产品等级销售额概况菜单，如图3-2-8-31所示。
图3-2-8-31权限设置效果
- 权限设置点击参数配置会打开编辑条件界面，此界面用于配置跳转链接中设置的参数，以及参数 要匹配的条件如下图3-2-8-32所示。
图3-2-8-32参数配置页面
下面用一个例子来说明菜单权限中参数配置的用法。我们知道数据库 ls_limit 表中订单等级字段有低级、中级、高级和其他 4 个值，现在尝试通过菜单权限参数配置实现：点击低级跳转后目标页面只显示“低级菜单”，点击中级跳转时目标页面只显示“中级菜单”，点击高级跳转时目标页面只显示“高级菜单”，若点击其他跳转，则目标页面显示所有菜单（低级菜单、中级菜单、高级菜单）。
开始配置之前，我们需要先创建 3 个资源，再在仪表板中配置一个菜单和一个菜单幻灯区，如图3-2-8-33所示。
图3-2-8-33新建菜单和菜单幻灯区
将创建的 3 个资源拖入菜单幻灯区中，同时将展示 3 个资源的菜单分别命名为：低级菜 单、中级菜单、高级菜单，如图3-2-8-34所示。
图3-2-8-34仪表板
到这里，先把这个仪表板保存好，因此功能需要结合跳转实现，所以我们先创建好目标 资源，便于保存超链接配置。
接下来创建一个云报表，选择 ls_limit 数据表，并使用字段区域、订单等级和利润制作 一个简单的云报表。选择 B2 单元格的订单等级设置超链接，跳转传参的值来自于B2 单元 格的订单等级，这个很好理解，重要的是目标，这里需要自定义一个名称，比如我们输入的 “菜单权限”，这个目标名称在后面会用到。设置页面如图3-2-8-35所示。
图3-2-8-35云报表设置
云报表创建好后，保存云报表，重新去编辑第一步创建的仪表板。因为权限是针对每个 菜单单独设计的，故按照想要实现的效果来说，每个菜单都需要做权限配置。 先设置第一个菜单，即低级菜单的权限，打开参数配置界面。如图3-2-8-36所示。
图3-2-8-36进行权限设置01
在编辑条件界面，参数名称的位置需要手动输入云报表中跳转配置的目标名称，即“菜 单权限”，而根据需求，我们期望点击低级和其他时需要显示低级菜单，故条件配置等于“低 级”或等于“其它”。点击跳转的时候会使用参数“菜单权限”获取到的值和此处配置的条 件做匹配，匹配上，此菜单就显示，匹配不上就不显示。编辑条件如图3-2-8-37所示。
图3-2-8-37低级菜单编辑条件
和低级菜单的权限配置类似，继续配置中级菜单和高级菜单的权限，区别只是匹配的条件，中级菜单和高级菜单如图3-2-8-38和3-2-8-39所示。
图3-2-8-38中级菜单编辑条件
图3-2-8-39高级菜单编辑条件
配置完成后再次保存仪表板，菜单权限配置就生效了。 打开云报表，点击低级/中级/高级跳转时，目标页面分别仅显示低级菜单/中级菜单/高 级菜单。而点击其它，目标页面会显示完整的三个菜单（低级菜单、中级菜单、高级菜单）。效果如图3-2-8-40所示。
图3-2-8-40效果显示图
实际使用中菜单的权限配置还包括用户权限，两者之间是OR的关系，满足其中一个菜单就会显示。
3.2.8.5手风琴支持设置多个层级样式
在手风琴菜单的设置样式中添加“+”，如图3-2-8-41所示
图3-2-8-41手风琴菜单样式
操作步骤与现象如下文：
- 新建一个三级菜单，如图 3-2-8-42 所示。
图3-2-8-42手风琴三级菜单
- 菜单设置样式如图 3-2-8-43 所示。
图3-2-8-43手风琴菜单样式
- 三级菜单仍沿用二级菜单样式。如图 3-2-8-44所示。
图3-2-8-44手风琴菜单显示效果
- 在菜单样式中再添加两级菜单，查看 3-2-8-45 和图3-2-8-46所示
图3-2-8-45手风琴三级四级菜单
图3-2-8-46手风琴三级显示效果
3.2.8.6手风琴支持关闭自动伸缩配置
使用该功能，需要先配置一个菜单和菜单幻灯区，勾选关闭自动伸缩配置，如下图3-2-8-48所示。
图3-2-8-48手风琴关闭自动伸缩
视图打开此仪表板，选中菜单“0627 资源 01”，查看资源，如下图3-2-8-49所示。
图3-2-8-49选中末级菜单
再选中菜单“全国”，查看资源，页面展示如下图，菜单“0627 资源 01”没有收起，如图3-2-8-50所示。
图3-2-8-50勾选关闭自动伸缩展示效果
若不勾选关闭自动伸缩，选中菜单“全国”，菜单“0627 资源 01”会自动收起，效果如下图3-2-8-51所示。
图3-2-8-51不勾选关闭自动伸缩展示效果
3.2.8.7图标支持配置右侧显示
菜单支持图标居右显示配置，该功能适用于所有菜单，下文将拿手风琴菜单作为示例讲解该功能。入口如图3-2-8-52所示。
图3-2-8-52图标居右配置入口
步骤一：新建手风琴菜单：分别给三个类别设置默认图标，且不勾选图标位置居右
图3-2-8-53不勾选图标位置居右
查看视图界面效果，图标默认居左显示。
图3-2-8-54不勾选图标位置居右默认效果展示
返回菜单配置界面，勾选图标位置居右，点击确认。
图3-2-8-55勾选图标位置居右
查看视图界面效果。图标居右，文字仍显显示居左。
图3-2-8-56勾选图标位置居右效果展示
【注意事项】
图标文本间隔功能和图标位置居右功能联合使用时，展示效果不一样。
手风琴菜单设置三个类别图标与文本间隔分别为150px、50px和300px。取消勾选图标位置居右效果，配置页面如下图所示。
图3-2-8-57文本间隔功能与图标位置居右联合配置
查看预览页面，从下图中可清晰显示图标与文本的间隔。在图标居左时，图标文字的间隔实质是图片的右间隔。
图3-2-8-58文本间隔功能与不勾选图标位置居右联合配置效果展示
手风琴菜单设置三个类别图标与文本间隔分别为150px、50px和300px。勾选图标位置居右效果，配置页面如下图所示。
图3-2-8-59文本间隔功能与勾选图标位置居右联合配置
查看预览页面，在图标居右情况下，文字仍居左。从下图中可清晰显示云报表资源类别中图标与文本的间隔。在图标居右时，图标文字的间隔实质是图片的左间隔。
图3-2-8-60文本间隔功能与勾选图标位置居右联合配置效果展示
3.2.8.8支持设置自动轮播
普通菜单、List菜单、单选菜单支持设置自动轮播。配置入口需点击菜单--轮播设置即可，如图3-3-8-61所示。点击启用后，设置轮播间隔时间（只能输入大于等于 1 的整数），启用后，菜单按次序切换。
图3-2-8-61轮播设置入口
3.2.8.9跳转配置
菜单支持跳转配置，入口如图3-2-8-62所示。
图3-2-8-62跳转配置入口
使用该功能时，应该先建好菜单。勾选跳转配置，勾选后页面中将不显示选择显示区和参数设置，如下图3-2-8-63所示。
图3-2-8-63勾选跳转配置
点击跳转配置的配置，查看页面，如下图3-2-8-64所示。（与文中跳转页面一致，具体使用参照跳转）
图3-2-8-64点击配置按钮
设置跳转配置，如下图3-2-8-65所示。
图3-2-8-65跳转设置
点击菜单 5，效果如下图3-2-8-66所示。
图3-2-8-66效果图
点击菜单后会触发选中效果同时触发跳转，这种情况下关闭目标页面再次点击菜单，仍然可以触发跳转。
3.2.8.10参数设置（点击菜单传值给菜单幻灯区）
菜单设置处添加参数设置复选框，勾选复选框点击配置按钮，页面显示下图。
实现效果：在点击显示该菜单时同时对菜单内数据进行筛选。
图3-2-8-67参数配置
图3-2-8-68参数设置
【配置与效果】
使用范围：菜单、文本、图片都支持参数配置，配置和使用效果类似，所以下文拿文本举例说明。
（1）一个参数条件
菜单参数设置页面如下图所示。
图3-2-8-69参数设置
结果展示如下图所示。
图3-2-8-70参数设置
（2）多个参数条件
菜单参数设置页面如下图所示
图3-2-8-71参数设置
结果展示如下图所示，两个参数条件对该资源共同作用。
图3-2-8-72参数设置
【注意事项】
1.参数设置是对该资源的原始数据进行筛选，若度量字段进行汇总，则不能对汇总后数据进行过滤。