# 仪表盘设计 > 仪表盘设计是数据可视化的一种展现方式,是将数据以各类图表和图形化的设计的方式,以视觉形式来呈现,从而帮助我们更加直观的了解数据展示的意义。 >仪表盘设计操作简单,拖拽即可完成图表或表格等多种组件设计,无需编码,10 分钟零门槛打造出专业数据展示。 仪表盘设计支持多种数据来源配置,支持数据实时刷新,及数据过滤 方便快捷。 仪表盘设计在线体验: [http://boot3.jeecg.com/](http://boot3.jeecg.com/) 门户设计文档:[https://www.kancloud.cn/zhangdaiscott/vue3/2681205](https://www.kancloud.cn/zhangdaiscott/vue3/2681205) [TOC] ## 1.效果展示 ![](https://img.kancloud.cn/c2/11/c2112d61cdf5bce52a82ff373d7afbf9_1891x829.png) ## 2.仪表盘设计 ### 2.1 新建仪表盘 首先点击`“新增”`,创建一个新的仪表盘,或者使用已有示例复制一个仪表盘 ![](https://img.kancloud.cn/e4/53/e453be58a3cfa1e589c8818a15e4d8ef_1161x550.png) ### 2.2 选择我们所需要的组件 * 目前jeecg仪表盘支持常用`“图表组件”`、`“布局组件”`、`“地图组件”`、`“表单组件”`等等。 ![](https://img.kancloud.cn/b6/41/b64122b3d10279c524bb155904b8ae2f_1911x690.png) * 选中添加组件可在`“属性”`可设置组件的基本属性信息。 ![](https://img.kancloud.cn/09/35/093542f772b651cd18e9d428d5512924_1233x811.png) * 选中添加组件可在`“数据”`中选择静态数据或动态数据,动态数据可实现实时刷新。 ![](https://img.kancloud.cn/5f/70/5f70e6f88759f0f5db87bc3f7061f58c_1337x817.png) * 选中添加组件可在`“交互”`中设置跳转地址、查询配置和钻取配置。 ![](https://img.kancloud.cn/79/1b/791b84b98ff259f4ffd8c663825b4cc3_1184x538.png) ### 2.3 创建数据集 仪表盘设计所有组件默认均可设置静态数据,当我们需要动态数据时,可在`“数据集”`中创建`“SQL数据集”`、`“API数据集”`及`“JSON数据集”` * 点击“数据集”可“新增数据集” ![](https://img.kancloud.cn/92/c9/92c9d062c0e9480a835a0b55d3390d5c_1661x862.png) * 可选择数据类型,解析字段后即可使用 ![](https://img.kancloud.cn/55/36/553692861c3567487f07e4e5cf6ac4ad_1535x791.png) ## 3.角色授权 可将仪表盘配置到角色的首页配置中,用户登录后,首页自动展示所配置仪表盘 ### 3.1 复制路由 * 复制路由 选择所需要仪表盘,点击`“复制路由”` ![](https://img.kancloud.cn/8c/df/8cdf8af8b366350936cd3b4f83f2c890_731x632.png) ### 3.2 配置角色授权 * 在角色管理中,选择首页配置 ![](https://img.kancloud.cn/08/be/08beb66923ac361f422cd751864620d0_1594x294.png) * 填写配置信息 首页路由:上面`#3.1`复制的路由信息 组件地址:固定地址,直接复制即可 `super/drag/page/view` 是否路由菜单:选择`“否”` 是否开启:开启 ![](https://img.kancloud.cn/df/b1/dfb1908c098827a90ea073a9a8c1a44b_780x434.png)