---
order: 3
navTitle: 图表切换仪表板（10分钟）
---
# 图表切换仪表板

> 预计用时：10分钟

本课程介绍使用[多页面板](../../../guide/data-viz/dash/components/layout/panelbook.md)、[交互](../../../guide/data-viz/dash/design/action/README.md)属性，来实现[仪表板](../../../guide/data-viz/dash/README.md)的图表切换的基本操作和知识，使用[条件样式](../../../guide/data-viz/dash/design/type/condition-style.md)来为数据做特殊标记。

![切换多页面板](./images/2024-05-14-11-07-52.png)

:::tip 学习小贴士
点击链接跳转观看学习视频：[图表切换仪表板](https://www.bilibili.com/video/BV1Vu411m7vE?p=3\&t=1.6)\
可以按照下方[课程讲解](#course)的分解步骤进行学习，学习完之后别忘了完成练习哦！
:::

## 学习目标{#target}

学习本课程可以掌握到如下知识点：

- 了解多页面板的使用
- 了解分组表的使用
- 了解条件样式的设置
- 了解交互的基本操作

## 课程讲解{#course}

本课程介绍使用多页面板、交互属性，来实现仪表板的图表切换的基本操作和知识，使用条件样式来为数据做特殊标记，建议在学习过程中跟着步骤练习操作。

- **课程讲解**
- （00:22）**多页面板制作**
- （04:33）**标签页制作及添加交互**
- （04:33）**标签页制作及添加交互**
- （05:34）**布局调整**
- （06:31）**柱形图增加条件样式**

## 总结与练习{#practice}

通过上面的学习，我们了解了图表切换，以及条件样式的使用。接下来，我们通过练习来加深对课程的认识和学习吧。

请按照视频制作出对应仪表板，将做好的仪表板复制出一份，并按照要求在复制的仪表板上更新做法或对文档进行总结：

1. [多页面板](../../../guide/data-viz/dash/components/layout/panelbook.md)、[分组表](../../../guide/data-viz/dash/components/table/grouped-table.md)：学习完这两篇文档后，请你为多页面板增加一个页面，用来放置各门店销售情况表（用分组表是实现，数据使用门店、销售数量、零售总额）
2. [标签页](../../../guide/data-viz/dash/components/input/tabbar.md)、[选择面板](../../../guide/data-viz/dash/components/input/selectpanel.md)、[切换多页面板](../../../guide/data-viz/dash/design/action/switch-panelbook.md)：学习完这三篇文档后，请你将标签页替换为选择面板实现多页面板的切换（选择面板的选项为：图、销售同比表、门店销售表
3. [条件样式](../../../guide/data-viz/dash/design/type/condition-style.md)：学习完这篇文档后，请你为练习1中门店销售表的【销售数量】添加条件样式使得销售数量前三的数字为红色（最前最后）