《大数据可视化分析》第4周-2.docx

PAGE

PAGE10

大数据可视化分析课程教案首页4-2

一、核心要素

章节名称

项目3智慧农业大屏结构设计

3.1功能架构设计、3.2大屏布局设计

教学课时

2

授课班级

大数据技术2401班

授课时间

第4周-2

授课地点

介夫楼307

教学目标

知识目标

了解本项目的研发目标和开发环境。

了解可视化大屏布局设计的原则和技巧

能力目标

完成Windows环境下的前端开发工具的安装和使用

能够使用前端开发工具完成布局页面的搭建。

素质目标

1.通过演示项目及相关文档，理解并梳理项目的业务功能结构。

2.勇于探索新技术，为推动国家和社会的发展贡献智慧和力量。

3.通过了解中国软件发展进步史，树立学生的民族自信心和自豪感。

教学内容

主要内容

了解本项目的研发目标和开发环境、可视化大屏布局设计的原则和技巧

重点

可视化环境的搭建

难点

熟练掌握可视化大屏布局的方法和原则

教法改革

教学方法

问答法/范例教学法

教学手段

（1）通过课堂讨论提出问题和相关视频学习，活跃课堂气氛并激发学生的学习兴趣；（2）教材、电子课件、超星信息化教学。

教学反思

二、教学设计

教学步骤

教学内容与情境设计

教师活动

学生活动

时间分配

一、导入课堂

本任务根据数据源、用户需求设计可视化大屏的布局，并使用HTML5和CSS3技术实现可视化大屏的网页框架。所用的HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。

教师演示，引导思考

明确本节课的目标效果

5分钟

3.1功能架构设计

3.1.1功能分解

数据可视化大屏可划分为展示类、监控类和分析类

展示类数据可视化大屏的应用场景一般为企事业单位展示核心经营理念、公司展示的是核心战略或品牌理念、业务亮点等，主要是整体、公开的数据。

监控类数据可视化大屏可根据不同业务和使用场景中需要监控的内容类型，对IOT设备、服务器、摄像头等硬件数据进行采集跟踪，结合使用图像、视频、可视化图表等多种可视化技术和手段，实时跟踪业务数据变化，对异常数据及时告警，从而保证业务的正常运行。

分析类数据数据大屏主要用于展示和分析企业实际的业务数据，并通过对数据的钻取、联动、透视等交互性操作，挖掘数据产生的原因，直观地展示数据背后的逻辑和价值，通过数据可视化为管理决策提供科学的数据支撑。

教师讲解

学生观看演示并思考

10分钟

3.1功能架构设计

3.1.2确定数据维度

同一个指标的数据，从不同的维度分析会有不同的结果，因此需要通过实际展示需求来确定指标分析维度，随后根据指标分析维度确定图表类型。如果没有找准分析维度或分析维度定义的比较混乱，那么会使可视化图表无法理解接收到的指令。我们需要利用联系、分布、比较、构成来分析数据的逻辑性。通常可以根据以下4项维度来确定数据指标。

联系：数据之间的相关性。

分布：指标中的数据主要集中在什么范围内，表现出怎样的规律。

比较：数据之间存在何种差异，主要体现在哪些方面。

构成：指标中的数据由哪几部分组成，每部分的占比如何。

教师讲解

学生观看演示并思考

10分钟

3.2大屏布局设计

3.2.1大屏设计原则

易读性和易理解性原则：数据可视化大屏应该以清晰、简明的方式呈现数据，使得读者能够快速理解其中的信息和意义。

分类和组织原则：为了提高页面的清晰度和查找数据的速度，数据可视化大屏中的信息和数据应按照一定的结构和分类进行组织，从而形成一个合理的页面结构。

比例和尺寸原则：在数据可视化大屏的设计中，应当合理运用比例和尺寸，以保持各种元素之间的平衡，同时让读者更容易注意到重点数据和信息。

颜色和字体原则：在数据可视化大屏的设计中，颜色和字体的使用应当遵循统一、协调、醒目等原则。颜色既要统一，又要有层次感，可清晰地突出重点，以便让读者更容易识别和分辨不同的信息和数据。

交互和用户体验原则：数据可视化大屏应具备良好的交互性和用户体验，以支持实时监控、数据查询和多维度分析等功能。

故事叙述原则：数据可视化大屏的设计还应考虑故事叙述，通过数据之间的联系、趋势变化等元素来呈现一个完整的故事，充分展示事态的进展和过程。

教师讲解

学生观看演示并思考

10分钟

3.2大屏布局设计

3.2.2大屏布局设计

1．常规布局

布局要点：左中右。常规布局如图3-1所示，中间为主要指标，占据页面的较大面积；左右两侧为次要指标，占据面积较小，较集中，展现的指标数量较多。

2．左右布局

布局要点：左右布局如图3-2所示，重点区域扩大，左侧或右侧放置少量指标，不易展示大量指标。

教师讲解

学生观看演示并思考

10分钟

3.2大屏布局设计

3.2.3大屏修饰技巧

1．色彩

大屏的色彩选择上，首先确定与行业属性（如科技类使