蓝图添加导航

蓝图节点生成大屏后，大屏之间的相互跳转可以通过导航栏实现。为了统一修改导航栏数据，防止蓝图节点修改后各个大屏的导航数据不一致，我们可以将导航栏放入底板来实现数据的一致性。

此案例演示如何为蓝提生成的大屏添加可编辑的导航栏，实现大瓶之间的跳转。

添加步骤

首先登录河图，从首页进入数据可视化模块。

步骤一： 新建带导航底板

因为蓝图内使用的底板需要是已经发布的组件，因此我们先建立组件并完成发布。

1. 点击左侧我的组件进入组件管理界面。

2. 按照新建步骤创建一个区块。区块名称设置为蓝图导航，区块尺寸设置为宽 1920px，高 70px，设置完成后点击创建进入区块设计器。

3. 从左侧边栏选择组件-文字下的导航栏组件，将其拖拽至画布区并调整宽度为 1920px，然后在右侧边栏中属性-导航设置下，将默认的导航1显示勾掉。

   

4. 依次点击右上角的保存和发布按钮，这样一个带有空白导航栏的组件就创建完成了。点击设计器左上角的返回按钮返回到管理界面。

步骤二： 新建蓝图，使用底板

1. 点击左侧蓝图进入蓝图管理界面。

2. 点击蓝图管理界面右上角的新建按钮，进入到蓝图设计器。

3. 蓝图内添加几个不同类型的节点。

   

4. 点击 dock 栏的底板按钮，选择使用步骤一中新发布的蓝图导航为全局模版，点击保存按钮将修改保存至蓝图。

   

步骤三： 蓝图生成大屏

1. 点击导航工具生成按钮，等待生成进度条走到 100%后自动关闭，即完成了蓝图生成大屏的功能。

2. 返回到我的组件管理界面，重新查看蓝图导航组件，发现导航栏的数据被自动填充上了，导航中数据对应的就是蓝图中的各个节点数据。

   

3. 再返回到大屏管理界面，选择任意一个刚才生成的大屏，点击预览按钮，发现大屏中已经使用了蓝图导航组件，点击导航栏也可以完成大屏的切换。

   

步骤五： 修改蓝图节点

1. 再次打开步骤二新建的蓝图进行编辑。

2. 为蓝图新增几个节点，点击保存按钮将修改保存至蓝图。

   

步骤六： 重新生成大屏

1. 点击导航工具生成按钮，重新生成大屏。

2. 返回到我的组件管理界面，重新查看蓝图导航组件，发现导航栏的数据中新增了几个导航，对应步骤五中新增的蓝图节点。

   

3. 再返回到大屏管理界面，选择任意一个刚才生成的大屏，点击预览按钮，发现各个大屏中的蓝图导航组件数据已更新，新节点可正常跳转。