UI大屏界面--简单数据看板制作

学习日期：2024年7月9号

学习内容：UI大屏界面

学习作者：zhao

学习地址：数据分析与可视化指南 (fanruan.com)（用于学习研究）

标准的可视化设计流程概括来讲，可以分为以下四个步骤：明确目的、选择图表、视觉设计、突出重点。

1.明确目的

 这份数据可视化报告谁来用，什么场景下用、用来说明什么问题，选什么样的数据比较合适？

2.选择图表

选择前，我们首先要想清楚，解决的问题是什么，我的数据是什么，需要用图表做什么？

选择图表 - 数据分析与可视化指南 (fanruan.com)

3.视觉设计

视觉设计 - 数据分析与可视化指南 (fanruan.com)

4.突出重点

降低认知负荷 - 数据分析与可视化指南 (fanruan.com)

实战训练

一、下载地址

进入帆软官网下载FineReport模板设计器，下载地址：帆软官网

二、创建报表

1.新建决策报表

（1）单击左上角文件，根据提示新建决策报表

（2）可以选择新建空白模板来自定义排版，也可以根据推荐选择合适模板

这里我们选择一个比较简单的模板来进行演示(2-4模板中的第2个模块)

三、正文部分

1.更换模块主题，选择自己喜欢的主题颜色

2.套用组件

（1）搜索选择需要的内容，比如标题、地图组件、图表等等。。

（2）可以使用在线组件。

Tips：

（1）鼠标左键按住组件不松，拖拽至模板的最上方的方格中(标题头)

（2）因为组件的本质就是(表格+背景图片)完成的，所以在调试阶段会显示出表格的样式，但是正常实际预览是看不到表格的。

3.设置标题文案

（1）这里选择的是酷炫蓝标题

（2）把下载好的标题拖放到模板最上方（有些标题不适配，内容不在标题中间位置）

双击标题头，进入表格，再双击单元格设置标题文字，设置完成不要忘记保存操作。

编辑完文案后，我们点击最下方的表单，重新回到模板页面，再次点击保存

保存后点击左上角的预览按钮，点击PC端预览

 很好！

4.地图组件

搜索地图组件放入模板内，这里选择的是 定位点地图-未来风

双击地图组件可进入修改样式界面

修改文本、字符、背景等等。让我们来预览一下吧

okokokokok

5.图表显示

（1）随机选择两个图表放在模板内，这里只是进行演示，具体图表选择还需要具体分析

选择图表很有讲究~

选择前，我们首先要想清楚，解决的问题是什么，我的数据是什么，需要用图表做什么？

选择图表 - 数据分析与可视化指南 (fanruan.com)

（2）修改图表标题

预览一下吧

四、数据配置

选好图表后，开始配置图表数据源，也就是图表里显示的数据。

请大家跳转到我另一个文章：点击跳转