想要使下拉菜单呈现出树状图的形式，需要使用JSON数据。如果下拉菜单想要联动其它组件，那么需要为其他组件绑定相同字段名称的数据。
下面是简单的图文教程，也可以点击链接查看详细的视频教程：使用山海鲸下拉菜单组件实现树状图效果，并联动其他组件数据。
在山海鲸可视化中创建并打开一个空白项目，在组件库中查找并添加一个下拉菜单组件。
点击左上角的“数据-添加数据”来导入我们的JSON数据，示例中使用Excel文件来储存。
在示例中将使用下拉菜单来联动数据表格组件数据，它们的相同字段名为“json数据”。
下拉菜单组件所绑定的数据如表格所示：
| json数据 |
|---|
| [{"label":"one1","value":"one1","children":[{"label":"two1-1","value":"two1-1","children":[{"label":"three1-1-1","value":"three1-1-1"},{"label":"three1-1-2","value":"three1-1-2"},{"label":"three1-1-3","value":"three1-1-3"},{"label":"three1-1-4","value":"three1-1-4"}]}]},{"label":"one2","value":"one2","children":[{"label":"two2-1","value":"two2-1","children":[{"label":"three2-1-1","value":"three2-1-1"}]},{"label":"two2-2","value":"two2-2","children":[{"label":"three2-2-1","value":"three2-2-1"},{"label":"three2-2-2","value":"three2-2-2"},{"label":"three2-2-3","value":"three2-2-3"}]}]},{"label":"one3","value":"one3","children":[{"label":"two3-1","value":"two3-1","children":[{"label":"three3-1-1","value":"three3-1-1"},{"label":"three3-1-2","value":"three3-1-2"},{"label":"three3-1-3","value":"three3-1-3"}]},{"label":"two3-2","value":"two3-2","children":[{"label":"three3-2-1","value":"three3-2-1"},{"label":"three3-2-2","value":"three3-2-2"},{"label":"three3-2-3","value":"three3-2-3"}]}]}] |
数据表格组件所绑定的数据如表格所示：
| json数据 |
|---|
| three1-1-1 |
| three1-1-2 |
| three1-1-3 |
| three1-1-4 |
| three2-1-1 |
| three2-2-1 |
| three2-2-2 |
| three2-2-3 |
| three3-1-1 |
| three3-1-2 |
| three3-1-3 |
| three3-2-1 |
| three3-2-2 |
| three3-2-3 |
在看板图层选中基础下拉菜单组件，然后在右侧点击切换到数据栏目，将看板公共数据表1的json数据绑定到选项字段中，然后开启JSON格式设置项，此时下拉菜单组件就会呈现树状图效果。
并且打开数据联动中“联动其他组件”设置项。
接下来添加一个基础数据表格组件，删除组件自带的数据，然后将表2的json数据绑定到表格组件的数据字段上。
最后打开表格组件的“受其他组件联动”设置项。
这样我们就能通过下拉菜单组件来联动数据表格组件了，效果如下图所示：
更多数字孪生可视化干货内容等你发现
了解更多内容
独角鲸 
咨询热线0571-88650917
评论0