数据大屏交互设计案例详解 | 基于smardaten实现智慧交通监测大屏

一、需求背景

随着城市规模扩大和交通系统日益复杂，静态的数据展示已无法满足实时监控、应急指挥和精准调度的需求。传统交通监控的局限在于其被动响应模式——管理人员需要在多个系统间手动切换，耗时耗力且容易遗漏关键信息。而现代智慧交通大屏，利用可视化的方式整合多源数据，一屏即可实现全域感知和综合监测，又利用各类交互设计，提升数据大屏的联动能力，加快决策过程。

二、交互介绍

1. 页面导航：通过顶部导航栏实现交通数据、运营指标等不同核心页面的快速切换，降低操作成本，提升交通管理的整体效率与用户体验。
2. 点击跳转：大屏中各组件支持点击事件，例如针对指标卡可以实现点击跳转的功能，实现从宏观指标到微观详情的快速穿透。
3. GIS地图弹窗：点击 GIS 地图上的事故点位，可弹出包含事故图片、类型、等级、地点等信息的详情弹窗，实现空间位置与业务数据的无缝连接。
4. 图表联动：通过点击当前图表数据，可联动同一页面内其他图表自动展示相关数据，无需人工比对多份图表、手动筛选关联信息，减少数据交叉分析的时间成本。
5. 图表切换：通过开关按钮切换统计维度（如“按天/按月”查看在途车辆峰值），满足不同粒度的分析需求。
6. 精准查询：通过输入车牌号查询特定车辆的详细记录，实现从宏观统计到个体追踪的精准定位。
7. 筛选与下钻：通过下拉框按车辆类型筛选交通违法数据，并通过图表下钻功能从宏观数据深入至微观细节。

这些交互功能共同构成了一个多层次、立体化的数据分析体系，满足了从宏观监控到微观决策的不同层次需求。

三、配置过程

进入平台后，选择交通监测系统，进入数据大屏的配置页。在数据大屏中支持多种交互动作，其中交互组件作为与用户直接交互的核心元素，包含按钮、导航、输入框等多种类型。

3.1. 交通数据页面

3.1.1 页面导航

我们先从页面导航开始，这里包含了交通数据和运营指标两个大屏页面。

如果我们需要为两个大屏添加导航实现快速切换，很简单！首先在母版管理中新增页面母版，插入页面顶部导航作为两个页面的共有部分。

其次，在顶部交互一栏中，使用页面导航组件，插入页面中。更改组件的背景图片，作为交通数据的导航。优化组件样式，将文字和背景色设为透明，最后将导航绑定交通数据页面。

接着我们复制组件，右侧的运营指标导航也是同样的方法。

完成后预览查看效果，点击导航按钮，页面就能实现无缝切换。

3.1.2 点击跳转

下面我们聚焦到中间的指标卡，对于累计事故的指标卡，如果我们希望能够快速了解累计事故的详情，进行深度分析，可以为指标卡添加一个点击事件。

在逻辑控制中添加跳转页面节点，右侧需要输入跳转页面的地址，这里我们已经提前搭建好了事故管理列表，预览后获取地址填入即可。

完成后，预览测试一下。点击累计事故指标卡，弹出事故管理列表页。

3.1.3 图表联动

接下来在左侧，我们看到，上方图表展示了各站点的今日流量，下方则是本月整体流量的日期趋势。现在，若需单独查看“东站”在本月的详细流量变化情况，应该怎么做呢？

上方点击组件联动，触发组件选择今日流量对应的分组柱状图，联动组件选择本月流量对应的折柱混合图，由于两张图表使用相同数据源，不必再进行数据映射。完成后，点击今日流量的数据，本月流量图表就能自动联动展示相关的数据。

现在我们来测试一下效果。点击“东站”，可以看到下方图表会对应进行筛选，显示该站本月的流量变化趋势。

3.1.4 数据滚动

图表联动让关联更清晰，对于下方表格类数据，我们还能通过动画交互提升展示效果。在重点路段客流峰值表格中，我们开启动画，进行持续滚动播放。

3.1.5 地图弹窗

我们来到中间的GIS地图，它展示了某市近三小时内未解决的交通事故发生的地点，如果我们希望点击地点后能够展示事故的详情，我们可以给点位设置点击弹窗。

选中地图后，在数据点位中，显示点位弹窗。然后进入弹窗配置页面。通过插入组件并优化样式，完整设计地图弹窗。

3.2. 运营指标页面

3.2.1 图表切换

现在，交通数据页的交互已配置完成，切换到运营指标页。这里包含了许多重要的运营指标。

首先是在途车辆峰值统计图表。具体来看：按日峰值统计图表展示近 7 天在途峰值变化，适配日常运营调度需求；按月统计图表呈现今年的峰值曲线变化情况。

如果我们希望支持两个图表的点击切换，需要用到开关按钮。在顶部交互一栏中，插入开关按钮，修改开启和关闭时的文字，接着优化样式。

在交互当中，按钮开启状态分别绑定按天统计的图表和按月统计图表。

最后在左侧图层管理模块新增“开关按钮组”，将两个开关按钮拖入组内，右侧开启 “按钮互斥” 功能 —— 这样就能实现一个按钮开启时另一个自动关闭，让图表切换更流畅。

完成后我们来预览看一下效果，点击按钮即可实现图表的切换。

3.2.2 搜索查询

下面是重点车辆统计模块，这里统计了大型公里客车和营转非客车的数据。如果我们需要一个便捷的查询入口，通过输入车牌号直接进入重点管理车辆记录表查询相关信息，可以借助“输入框” 与 “跳转按钮” 两个核心组件来实现。

针对输入框，需绑定“车牌号” 变量，确保输入的查询信息能精准关联到目标数据。

针对跳转按钮，先自定义修改按钮显示文字，再设置跳转方式为“抽屉打开”，然后我们需要获取跳转地址。

跳转的列表页已提前搭建完成，在基础设置中，我们需要接收车牌号的变量，然后在数据权限中根据变量对数据进行过滤，完成后列表就会根据车牌号变量过滤数据，现在我们预览获取该列表的地址。

回到数据大屏的配置页，将地址填入并绑定“车牌号” 作为跳转参数，确保查询结果与输入的车牌号精准匹配。

完成后，我们预览测试一下。例如，输入目标车牌号“苏C56789”，并点击跳转按钮，可以看到对应车牌号的相关信息已经成功展示了。

3.2.3 下拉筛选

刚刚我们通过输入框和跳转按钮实现了数据的查询，接着我们来到交通违法行为统计模块，图表中清晰呈现了重点违法行为的总数量，若我们需要拆分不同车辆类型的违法数据，而非仅查看宏观总量，可以借助下拉框组件实现。

右侧编辑下拉数据，输入车辆的类型，然后在配置信息中新增关联车辆类型的变量。

接下来选中图表，在数据资产中，对车辆类型字段进行过滤，即车辆类型需要与变量进行匹配，这样我们就成功实现了下拉框的数据筛选功能。

预览测试一下，选择车辆类型进行筛选。可以看到图表已经过滤成功了。

3.2.4 图表下钻

除了下拉框的基础筛选，平台的多种统计图表还支持下钻分析，这一功能可以帮助我们从宏观数据逐层深入到更细分的维度。例如针对交通违法行为管理统计的图表，在右侧开启下钻，选择需要下钻的“处罚状态”字段。

完成后直接预览，选择车辆类型进行下钻分析，这样我们能够清晰看到该违法行为中不同处罚状态的占比情况。

四、交互体验

1. 配置门槛低，业务人能自主做：插入组件、优化样式、绑定变量全靠可视化拖拽点选，“所见即所得”，无需依赖开发，业务人员可快速落地交互逻辑。
2. 交互能力多，支撑多维度分析：覆盖页面导航、图表联动、下钻分析、过滤筛选等能力，使大屏从静态展示升级为“宏观到微观” 的数据探索工具，助力用户深入洞察，提升决策质量与效率。
3. 贴合业务场景，响应决策需求：提供图表切换、精准查询等配置，灵活匹配交通调度与车辆管控等业务场景，即配即用，快速支持交通监控与决策执行。

作者：中杯可乐多加冰 链接：https://juejin.cn/spost/7566267953470128168 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。