项目二电商数据可视化项目设计与实现数据可视化技术与应用71.pptxVIP

主讲教师：王晓项目二：电商数据可视化项目设计与实现任务7：绘制饼图和圆环图数据可视化技术与应用

030102目录CONTENTS饼图和圆环图简介饼图和圆环图的特点绘制饼图和圆环图04绘制饼图和圆环图的原则

回顾复习1.绘制图表的步骤；2.折线图、柱状图的特点和使用场景；3.绘制折线图、柱状图的注意事项。

主题讨论时间管理：健康的生活方式对人体有非常多的好处，健康的生活方式是指饮食规律，做到早睡早起，注意休息，劳逸结合，保持规律的生活作息。健康的生活方式可以提高生活质量，预防一些疾病的产生。请记录个人24小时时间分配的数据？并思考可以使用哪种图形来展示一天中不同活动所占用的时间？

案例导入/video/BV1FH4y1W7BC/?vd_source=ce965ee1f539892dc000062f643547cd

案例导入3月21日是世界睡眠日，《2024中国居民睡眠健康白皮书》也由中国睡眠研究会近期在北京发布。据白皮书报告显示，我国居民平均入睡时间为00:01，平均睡眠时长为6.75小时，夜间睡眠时长普遍偏短。最引人注目的是，大学生手机日使用时长偏高，熬夜问题严重。有56%的大学生每天使用手机超过8个小时，且有52%的人在零点后入睡，更有19%的人入睡超过凌晨两点。“70前”平均入睡时间为23:02，“00后”平均入睡时间在00：33。从70后到00后，平均入睡时间逐渐变晚。

1.培养数据解读与分析素养。2.提升问题解决与创新能力。1.掌握饼图和圆环图理论知识。2.掌握在ECharts中制作饼图和圆环图的详细流程。1.独立绘制高质量饼图和圆环图。2.深度分析与解读饼图和圆环图。教学目标素质目标知识目标能力目标

在制作过程中，图表的细节优化，如数据标签的合理布局、颜色的协调搭配、图表元素的尺寸调整等，对图表的最终展示效果至关重要。02难点01重点学生需要清晰知晓在何种数据情境下，饼图和圆环图能够最有效地展示数据占比关系 解决办法1.案例教学法：通过展示电商销售品类占比、日常支出费用占比等，详细讲解饼图和圆环图在不同场景下的应用优势，帮助学生理解重难点。2.通过专门的图表细节优化专题讲解，向学生传授数据标签设置、颜色搭配、图表元素尺寸调整等方面的技巧和原则，加深对重点难点知识的掌握。重点与难点

饼图的定义饼图(pie)或称饼状图，是一个划分为几个扇形的圆形统计图表，用于描述量、频率或百分比之间的相对关系。在饼图中，每个扇区的弧长（以及圆心角和面积）大小为其所表示的数量的比例。这些扇区合在一起刚好是一个完全的圆形。支付宝年度账单分布商品评价

案例分析

根据绘制柱状图表步骤，首先请同学们制作一个如图所示的饼图。睡眠时间:8运动时间:2学习时间:6娱乐时间:3吃饭时间:2其他时间:3分析：引入js文件div容器初始化对象设置option数据：无x轴、y轴绘制饼图

绘制饼图（1）创建HTML页面：创建一个HTML页面，引入echarts.min.js：scriptsrc=js/echarts.js/script（2）为ECharts准备一个具备大小（宽高）的Domdivid=mainstyle=width:600px;height:400px/div（3）基于准备好的DOM，初始化ECharts图表varmyChart=echarts.init(document.getElementById(main’));（4）指定图表的配置项和数据（type:pie,//设置指定显示为pie，饼图）（5）使用刚指定的配置项和数据显示图表myChart.setOption(option);

绘制饼图-代码实现创建html页面，引入charts.js文件； scriptsrc=js/echarts.js/script②为ECharts准备一个具备大小（宽高）的div容器； divid=mainstyle=width:600px;height:400px/div基于准备好的DOM，初始化ECharts图表： varmyChart=echarts.init(document.getElementById(main));

绘制饼图-代码实现重点内容（4）指定图表的配置项和数据varoption={ title{},legend{},yAxis, series:[//配置数据系列 name:AccessFrom, type:pie, radius:50%, data:[ {value:8,name:睡眠时间}, {value:2,