💎【行业认证·权威头衔】
✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家
✔ 开发者社区全满贯：CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主
✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】
🎖 连续三年蝉联"华为云十佳博主"（2022-2024）
🎖 双冠加冕CSDN"年度博客之星TOP2"（2022&2023）
🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】
覆盖全栈技术矩阵：
◾ 编程语言：.NET/Java/Python/Go/Node…
◾ 移动生态：HarmonyOS/iOS/Android/小程序
◾ 前沿领域：物联网/网络安全/大数据/AI/元宇宙
◾ 游戏开发：Unity3D引擎深度解析

🚀前言

仪表板设计是将多个图表整合成一个整体，关注用户体验，通过添加筛选、钻取、联动、跳转等功能，增强用户与数据的交互性。良好的交互设计能使用户更便捷地探索和分析数据。排版布局需合理且能迅速传达关键信息，遵循视觉层次原则，将关键数据置于显著位置，同时保持整体布局的清晰和美观。此外，配色方案的选择也至关重要，它既要满足数据展示的需求，又要符合用户的视觉习惯，以提供舒适的视觉体验。本章将从仪表板配置、交互、排版布局和配色技巧等多个方面入手，讲解如何设计并制作出实用又美观的仪表板。

🚀一、仪表板交互

DataEase平台提供的仪表板交互功能十分丰富且强大，旨在为用户带来卓越的、主动的数据探索体验。这些功能不仅提升了用户定位和查阅数据的便利性，更让他们能够深入洞察数据的内在逻辑与关联，从而驱动更明智的业务决策。核心交互功能包括：

• 筛选：通过过滤组件，用户可以迅速从海量数据中定位关键信息，聚焦分析目标，极大提高分析效率。
• 钻取：允许用户沿着预设的数据层级（如从“年”到“月”，从“商品大类”到“商品小类”）深入挖掘，揭示汇总数据背后的详细故事和潜在的业务价值。
• 联动：当用户在某个图表上进行操作（如点击）时，仪表板上的其他相关图表会动态响应并展示关联数据，从而形成连贯、交互式的数据分析路径，揭示跨维度的关联性。
• 跳转：支持用户在不同的仪表板或外部页面之间轻松切换，构建起一个互联互通的数据分析门户，使数据浏览与探索的体验无缝且高效。

综合运用这些交互功能，能够将静态的仪表板转变为动态的、可探索的分析环境，实现更加高效、直观且富有深度的数据分析。

🔎1.钻取

钻取功能允许用户在同一图表中，从较高的数据汇总层级（如上钻）或从较低的数据明细层级（如下钻）进行探索。它特别适用于具有自然层级结构的数据（如时间维度的“年-季度-月”，地理维度的“国家-省份-城市”，产品维度的“大类-小类-单品”）。

本节目标：基于前面制作的基础柱状图（商品大类销售额排行情况），通过设置钻取，使用户可以点击任一商品大类的柱子，下钻查看该大类下各商品小类的销售额明细。

🦋配置步骤详解

1. 打开钻取配置面板：

   • 在仪表板编辑页面，选中需要配置钻取功能的柱状图组件。
   • 单击右侧配置面板顶部的 【图表】 或确保处于数据配置状态，找到 【钻取/维度】 区域（见图9-16）。

2. 设置钻取层级：

   • 在 【钻取/维度】 区域内，按照从上到下、由高到低的层级顺序，依次拖入具有层级关系的字段。本例中，将 商品大类 和 商品小类 字段依次拖入。
   • 核心要求：
     • 必须拖入至少两个具有上下级关系的字段。
     • 字段顺序至关重要，第一个字段为顶级层级，后续字段依次为下级层级。
   • 配置完成后，单击 【更新图表数据】 按钮刷新图表。

   图9-16 在数据配置面板的“钻取/维度”区域设置层级字段
   

3. 使用钻取功能：

   • 钻取前：图表初始状态展示顶级层级（商品大类）的汇总数据，如图9-17所示。
   • 执行下钻：点击图表中代表“坚果炒货”的柱子，图表会立即刷新，只展示“坚果炒货”大类下各个“商品小类”的销售额明细，如图9-18所示。此时，图表标题或顶部通常会显示当前所在的层级路径。
   • 返回上钻：在图表的上方或钻取路径提示处，找到并单击 【全部】 或上级层级名称（如“商品大类”），即可返回上一级或最顶级的汇总视图，如图9-19所示。

   图9-17 钻取前的图表效果（显示各商品大类销售额）
   

   图9-18 下钻查看“坚果炒货”大类下各小类的销售额
   

   图9-19 点击“全部”返回上级（商品大类）汇总视图
   

🔎2.联动

联动功能建立了仪表板内不同图表之间的动态关联。当用户与一个“触发”图表交互（如点击柱状图的某个柱子、饼图的某个扇区）时，其他被设置为“接收”的图表将自动过滤数据，只显示与触发点相关联的部分。

本节目标：创建一个新仪表板，复用已有的关键图表，并设置当用户点击基础柱状图（商品大类销售额排行榜） 中的某个类别时，指标卡（零食总销售额） 和仪表盘（销售目标完成率） 能够联动显示该特定类别的相应数据。

🦋配置步骤详解

1. 准备仪表板与图表：

   • 使用 9.1.1 节的复用功能，新建一个仪表板，并将 8.2 节的指标卡、仪表盘以及 8.5 节的基础柱状图复用进来。
   • 调整各图表在仪表板中的布局和大小，并将该仪表板保存为“联动跳转设置”。

2. 开启并配置联动：

   • 在“联动跳转设置”仪表板中，选中作为触发图表的基础柱状图。
   • 在右侧配置面板中，切换到 【高级】 或 【样式】 设置栏，找到并开启 【联动设置】 开关（见图9-20）。
   • 点击联动设置旁的编辑（通常为“e”或齿轮）按钮，弹出联动设置详细页面（见图9-21）。

3. 选择联动图表与关联字段：

   • 在联动设置页面中：
     • 选择图表：在图表列表中，勾选需要接收联动信号的图表，即“指标卡”和“仪表盘”。
     • 配置字段关联：为每个被联动的图表设置关联字段。由于这些图表都包含“商品大类”维度，因此将联动字段统一设置为 “商品大类”。这意味着当柱状图的某个“商品大类”被点击时，系统会将这个值传递给指标卡和仪表盘，使其数据过滤为该大类。
   • 单击 【确认】 保存设置。

   图9-20 在图表的高级样式设置栏中开启“联动设置”
   

   图9-21 联动设置页面（选择联动图表并配置字段关联关系）
   

4. 体验联动效果：

   • 联动前：所有图表展示全局数据（见图9-22）。指标卡显示所有商品的总销售额，仪表盘显示整体目标完成率，柱状图显示各品类排行。
   • 联动后：点击柱状图中“肉食卤味”的柱子（见图9-23）。此时，指标卡将刷新为“肉食卤味”这一个品类的总销售额，仪表盘将刷新为该品类的销售目标完成率。这种交互直观地展示了局部与整体的关系。

   图9-22 联动前的仪表板效果（展示全局数据）
   

   图9-23 点击“肉食卤味”柱子后的联动效果（其他图表同步过滤）
   

🔎3.跳转

跳转功能允许用户通过点击图表中的元素（如柱子、扇区、数据点），导航到另一个仪表板或外部链接。这用于构建分析故事线，将宏观概览与微观细节、或不同主题的分析页面连接起来。

本节目标：在“联动跳转设置”仪表板的基础上，为基础柱状图设置跳转，使用户点击任一商品大类时，能在一个新页面中打开另一个仪表板（甚至是自身），并传递当前点击的品类参数，实现深度分析。

🦋配置步骤详解

1. 开启并配置跳转：

   • 在“联动跳转设置”仪表板中，选中基础柱状图。
   • 在右侧配置面板中，切换到 【高级】 设置栏，找到并开启 【跳转设置】 开关（见图9-24）。
   • 点击跳转设置旁的编辑按钮（如“<”或链接图标），弹出跳转设置页面（见图9-25）。

2. 设置跳转详情：

   • 在跳转设置页面中，进行如下配置：
     • 选择字段：选择作为跳转触发依据的字段，通常与联动字段一致，如“商品大类”。
     • 跳转类型：选择 【仪表板】（若跳转到其他网页则选【外部链接】）。
     • 打开方式：选择 【新开页面】，这样不会离开当前仪表板。
     • 目标仪表板：从列表中选择要跳转到的目标仪表板（本例中选择自身“联动跳转设置”进行演示）。
     • 联动字段映射：设置源字段（当前图表的“商品大类”）与目标仪表板中联动图表的字段（目标仪表板中相关图表对应的“商品大类”字段）的关联关系。这确保了参数能正确传递并过滤目标仪表板的数据。
     • 如有需要，可点击 【追加跳转联动依赖字段】 添加更多关联字段。
   • 单击 【确认】 保存设置。

   图9-24 在图表的高级设置栏中开启“跳转设置”
   

   图9-25 跳转设置页面（配置跳转目标、方式和字段关联）
   

3. 体验跳转效果：

   • 跳转前：仪表板处于初始状态（见图9-26）。
   • 跳转后：点击柱状图中“肉食卤味”的柱子（见图9-27）。系统将在新的浏览器标签页中打开“联动跳转设置”仪表板，并且该仪表板内的图表（如果配置了联动接收）会自动过滤，仅显示“肉食卤味”相关的数据，仿佛执行了一次带参数的深度访问。

   图9-26 跳转前的仪表板效果
   

   图9-27 点击“肉食卤味”柱子后在新页面打开并过滤的仪表板效果
   

🔎4.过滤组件

过滤组件（又称查询组件）是仪表板上供用户主动输入筛选条件的交互元素，是筛选功能的核心载体。DataEase支持多种展示类型以适应不同字段，包括文本下拉、数字下拉、时间和时间范围。

本节目标：复制“联动跳转设置”仪表板，在其上添加并配置过滤组件，实现用户可通过下拉框等方式动态筛选仪表板中的所有图表数据。

🦋配置步骤详解

1. 复制仪表板并添加过滤组件：

   • 复制“联动跳转设置”仪表板，保存为新仪表板“过滤组件”（见图9-28）。
   • 在编辑“过滤组件”仪表板时，单击组件库或工具栏中的 【查询组件】，在弹出的类型中选择基础的 【查询组件】，将其添加到画布中（见图9-29）。
   • 将查询组件拖放至仪表板顶部合适位置。

   图9-28 复制并创建“过滤组件”仪表板
   

   图9-29 将查询组件添加到仪表板画布中
   

2. 添加查询条件（两种方法）：

   方法一：直接拖拽数据集字段

   • 在右侧数据集面板中，直接将“商品大类”字段拖拽到画布上的查询组件区域内（见图9-30）。
   • 系统会自动识别并使用相同数据集的所有图表，并尝试建立字段关联。弹出的配置项会根据字段类型自动生成（见图9-31）。确认后点击 【确认】 即可快速完成设置。

   图9-30 将“商品大类”字段从数据集面板拖拽到查询组件区域
   

   图9-31 自动生成的查询条件配置（自动模式）
   

   方法二：通过按钮添加

   • 点击查询组件上的 【添加查询条件】 或组件右上角的 + 按钮（见图9-32），进入查询条件设置页面（整体流程见图9-33）。
   • 在设置页面，可以点击 + 添加多个条件，并可重命名条件标题（见图9-34）。
   • 在页面中间区域，手动选择需要受此过滤条件影响的图表及对应的字段（见图9-35）。

   图9-32 通过点击按钮添加查询条件
   

   图9-33 查询条件设置整体流程示意图
   

   图9-34 添加查询条件并重命名
   

   图9-35 手动选择关联的图表和字段
   

3. 配置查询条件细节：
   在查询条件设置页面的右侧配置栏，可以详细定义过滤组件的行为（见图9-36至图9-44）：

   • 1. 设置【必填项】：勾选后，用户必须选择一个值才能查询；否则可为空（见图9-36）。

     图9-36 设置查询条件是否为“必填项”
     

   • 2. 设置展示类型：系统根据字段类型提供默认类型，用户可在允许范围内切换。

     • （1）文本下拉：适用于文本字段（如“商品大类”），可设置选项值来源（自动/选择数据集/手动输入）和选项类型（单选/多选）（见图9-37至图9-39）。

       图9-37 文本字段的默认展示类型为“文本下拉”
       

       图9-38 设置文本下拉的“选项值来源”
       

       图9-39 设置文本下拉的“选项类型”（单选/多选）
       

     • （2）数字下拉：适用于数值字段，配置项与文本下拉类似（见图9-40）。

       图9-40 数值字段的默认展示类型为“数字下拉”
       

     • （3）时间和时间范围：适用于日期时间字段，可设置时间粒度（如年、年月、年月日等）（见图9-41, 图9-42）。

       图9-41 时间字段的展示类型可设置为“时间”或“时间范围”
       

       图9-42 设置时间/时间范围的“时间粒度”
       

   • 3. 设置绑定参数：用于与SQL动态参数结合（详见9.2.5节）。

   • 4. 设置默认值：勾选后，可为过滤组件预设一个初始选中值（见图9-43）。

     图9-43 为查询条件设置默认值
     

   • 完成所有配置后，点击 【确认】 保存（见图9-44）。

     图9-44 完成查询条件配置并确认保存
     

4. 最终效果：

   • 配置完成后，仪表板上方将显示美观的过滤组件（见图9-45）。用户通过下拉选择不同的商品大类，下方所有关联的图表将实时联动刷新，展示对应筛选条件下的数据。

   图9-45 过滤组件在仪表板上的最终实现效果
   

🔎5.SQL动态参数

SQL动态参数是一种高级过滤技术，它允许将过滤组件的值作为变量直接嵌入到SQL查询语句中。这种方式相较于平台自动生成的过滤SQL，在查询效率和灵活性上更具优势，可以处理更复杂的筛选逻辑。

本节目标：修改一个已有的自定义SQL数据集，在其中定义参数，并在仪表板的过滤组件中绑定该参数，实现通过前端界面控制后端SQL查询条件。

🦋配置步骤详解

1. 在SQL数据集中定义参数：

   • 打开7.2节中创建的 “SQL-零食销售明细” 数据集，进入编辑页面（见图9-46）。
   • 单击SQL编辑器，在WHERE子句中加入变量。变量格式为 ${参数名}。例如，添加条件：where province= '${province}'（见图9-47）。
   • 单击右上角的 【参数设置】，进入参数配置页面（见图9-48）。系统会自动识别SQL中的${province}变量。
     • 设置参数类型（如文本）。
     • 设置生效模式：仅编辑时生效（仅在数据集编辑界面测试有效）或 数据集预览时全局生效（在数据集预览和仪表板中均有效，通常选此项）。
     • 可设置默认值（非必填）。
   • 依次点击SQL编辑器的 【保存】 和数据集页面的 【保存】。

   图9-46 进入“SQL-零食销售明细”数据集的编辑页面
   

   图9-47 在SQL语句中添加变量格式的筛选条件
   

   图9-48 参数设置页面（配置参数类型、生效模式等）
   

2. 在仪表板中绑定参数：

   • 新建一个名为“动态传参”的仪表板，使用上述已定义参数的SQL数据集创建一个基础柱状图（见图9-49）。
   • 为该仪表板添加一个查询组件。
   • 在配置该查询条件时，在右侧配置栏中找到 【绑定参数】 选项并勾选，然后从下拉列表中选择在SQL数据集中定义的参数 province（见图9-50）。
   • 同时，仍需在“关联图表及字段”部分，将此过滤条件与仪表板中使用该数据集的图表及相应字段（如“商品大类”）关联起来。
   • 完成配置后，用户在前端过滤组件中的选择，将作为${province}的值直接代入SQL执行，实现高效、精准的查询。

   图9-49 使用带参数的SQL数据集创建图表
   

   图9-50 在过滤组件配置中绑定SQL动态参数
   

🦋SQL语法注意事项

根据过滤组件的类型，SQL中的变量用法需相应调整：

• 情况一：过滤组件为单选，使用 =。

  SELECT ... WHERE ORDER_EMP = '${USER_NAME}'
  

• 情况二：过滤组件为多选，使用 IN，且变量不用引号包裹。

  SELECT ... WHERE ORDER_EMP IN (${USER_NAME})
  

• 情况三：多个过滤条件，需用括号组合。

  SELECT ... WHERE (ORDER_EMP IN (${USER_NAME}) AND PROJ_ID IN (${USER_PROJ_ID}))
  

• 情况四：日期范围。

  SELECT ... WHERE 记录时间 BETWEEN '${BEGIN_TIME}' AND '${END_TIME}'
  

🔎6.外部参数设置

外部参数设置允许通过仪表板的公共分享链接，从外部直接传递参数值，实现对仪表板数据的预过滤。这常用于将特定的、过滤后的数据视图直接分享给他人，或嵌入到其他系统中。

本节目标：创建一个仪表板，为其设置外部参数，并通过构造特定的URL，实现直接打开该仪表板时就自动过滤出指定品类（如“坚果炒货”）的数据。

🦋配置与使用步骤详解

1. 准备仪表板并设置外部参数：

   • 新建一个名为“外部参数”的仪表板，复用指标卡、仪表盘、基础柱状图和词云图等组件。
   • 在仪表板编辑页面，找到并点击 【外部参数】 或类似设置按钮（见图9-51），打开外部参数管理页面。
   • 点击 【添加参数】（“+”按钮），创建一个参数，例如命名为“商品大类”。然后将其与仪表板内相关图表（指标卡、仪表盘、词云图等）的“商品大类”字段进行关联（见图9-52）。
   • 保存仪表板及外部参数设置。

   图9-51 打开仪表板的“外部参数”设置页面
   

   图9-52 添加外部参数并关联图表字段
   

2. 生成并组装带参数的公共链接：

   • 在仪表板列表页，找到“外部参数”仪表板，操作栏中选择 【分享】，生成一个公共链接并复制（见图9-53，图9-54）。
   • 参数加密与组装：
     1. 将参数名和值组装成JSON格式，例如：{"province": "福建省"}。
     2. 使用 base64 编码工具对该JSON字符串进行编码（见图9-55）。例如，得到编码结果：eyJwcm92aW5jZSI6ICLnpo/lu7rnnIEifQ==。
     3. 将编码后的字符串以 ?attachParams= 为参数名拼接到公共链接后面。
     • 完整URL示例：<仪表板公共链接>?attachParams=eyJwcm92aW5jZSI6ICLnpo/lu7rnnIEifQ==
   • 多值参数：若参数支持多选，值可用数组表示，如 {"商品大类": ["坚果炒货","肉食卤味","果干蜜饯"]}，同样进行base64编码。
   • URL编码：为防止base64编码结果中的特殊字符（如+, /, =）导致解析错误，建议在拼接前对base64字符串再做一次 URL编码（encodeURIComponent）。

   图9-53 在仪表板列表页选择“分享”
   

   图9-54 开启公共链接并复制
   

   图9-55 使用命令行工具进行base64加密示例
   

3. 访问效果对比：

   • 未加参数：直接访问公共链接，仪表板显示全部数据（见图9-56）。
   • 添加参数后：访问拼接了加密参数的完整URL，仪表板打开后即自动显示过滤后的数据，例如只展示“坚果炒货”相关的所有图表（见图9-57）。

   图9-56 未拼接外部参数时访问仪表板的效果（显示全部数据）
   

   图9-57 拼接外部参数后访问仪表板的效果（数据被自动过滤）
   

通过外部参数设置，DataEase实现了仪表板的高度可集成性和场景化分享能力，使数据洞察能够以最精准的形式嵌入到工作流或传递给特定受众。