本文为您介绍通过控制台使用逻辑编辑器的案例。
操作步骤
1. 登录 腾讯云图数据可视化控制台,选择对应大屏,向画布中添加 Tab 列表和基础柱状图。 n![](https://qcloudimg.tencent-cloud.cn/image/document/84199bc2a1e04b7abedc7a6c95742093.gif)
![](https://qcloudimg.tencent-cloud.cn/image/document/84199bc2a1e04b7abedc7a6c95742093.gif)
2. 修改 Tab 列表,使得列表项变为显示、隐藏,并设置为默认显示。n![](https://qcloudimg.tencent-cloud.cn/image/document/fde7361037f7811a28d365ceb5c9aad4.gif)
![](https://qcloudimg.tencent-cloud.cn/image/document/fde7361037f7811a28d365ceb5c9aad4.gif)
3. 分别右键单击 Tab 列表和通用标题组件,单击导出到逻辑编辑器。n![img](https://qcloudimg.tencent-cloud.cn/image/document/ef93491db4f993288c25681ed3e75aca.png)
n也可以使用快捷方式导出到逻辑编辑器。
![img](https://qcloudimg.tencent-cloud.cn/image/document/ef93491db4f993288c25681ed3e75aca.png)
4. 单击左上角的逻辑编辑器。n![img](https://qcloudimg.tencent-cloud.cn/image/document/a6cae11bd51dbbd27f52718b732cb18c.png)
![img](https://qcloudimg.tencent-cloud.cn/image/document/a6cae11bd51dbbd27f52718b732cb18c.png)
5. 在逻辑编辑器中将已导入组件拖动至画布。n![](https://qcloudimg.tencent-cloud.cn/image/document/c438a930ca0bcba21b30ddaa76c533c8.gif)
![](https://qcloudimg.tencent-cloud.cn/image/document/c438a930ca0bcba21b30ddaa76c533c8.gif)
6. 将分支判断节点拖动到画布中,并创建连线。n![](https://qcloudimg.tencent-cloud.cn/image/document/60a998f402d6d2855acd4671405ee20a.gif)
![](https://qcloudimg.tencent-cloud.cn/image/document/60a998f402d6d2855acd4671405ee20a.gif)
7. 实现分支判断的逻辑,先查看 Tab 列表 当 Tab 选中变更时 事件传递的数据。这里查看后可以看到该事件传递的数据是选中的数据项,这里我们根据之前第2步设置的变量,将判断函数做修改,当
data.value === 'show'
成立时,分支判断的满足事件将被调用。![](https://qcloudimg.tencent-cloud.cn/image/document/ef11695f1e8e04836f84ecfd61850d89.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ef11695f1e8e04836f84ecfd61850d89.png)
8. 最后预览查看逻辑编辑器的运行效果。n![](https://qcloudimg.tencent-cloud.cn/image/document/947818eac1ca31c69f5c0bd0f456729e.gif)
![](https://qcloudimg.tencent-cloud.cn/image/document/947818eac1ca31c69f5c0bd0f456729e.gif)