数据可视化技术绘制饼图24课件讲解.pptxVIP

数据可视化技术绘制饼图

绘制标准饼图绘制圆环图绘制嵌套饼图绘制南丁格尔玫瑰图饼图案例南丁格尔玫瑰图案例

绘制标准饼图

标准饼图01创建标准饼图展示学生成绩分布情况02操作演示03总结与思考04目录

01标准饼图

标准饼图标准饼图是以一个完整的圆来表示数据对象的全体，其中扇形面积表示各个组成部分。饼图常用于描述百分比构成，其中每一个扇形代表一个数据所占的比例。

标准饼图（1）center表示圆心坐标，它可以是像素点表示的绝对值，也可以是数组类型。默认值为[50%,50%]。（2）radius表示半径，它可以是像素点表示的绝对值，也可以是数组类型。默认值为[0,75%]，支持绝对值（px）和百分比。（3）clockWise表示饼图中各个数据项（item）是否按照顺时针顺序显示，它是一个布尔类型，取值只有false和true。默认值为true。

02创建标准饼图

创建标准饼图（一）准备数据现有某年级1班学生成绩数据如下图所示，作为我们创建标准的原始数据，绘制学生成绩分布情况，如右图所示的图表：标准饼图。

（二）创建项目创建标准饼图1.选择文件夹2.创建网页文件

（1）引入echarts.js库文件。（2）准备一个指定了大小的div容器。（3）使用init方法初始化容器。（二）创建项目创建标准饼图

（4）设置图形配置项和数据。（5）使用指定的配置项和数据显示渲染图表。（6）设置标准饼图。（二）创建项目创建标准饼图

创建标准饼图（4）设置图形配置项和数据

03操作演示

操作演示创建标准饼图

04总结与思考

标准饼图01创建标准饼图学生成绩分布的情况02总结

准备一个指定了大小的div容器标准饼图以及创建标准饼图展示某班成绩分布情况总结与思考使用init方法初始化容器设置图形配置项和数据使用指定的配置项和数据显示渲染标准饼图

课后，请大家绘制饼图：总结与思考

绘制圆环图

圆环图01创建圆环图展示学生成绩分布情况02操作演示03总结与思考04目录

01圆环图

圆环图圆环图是在圆环中显示数据，其中每个圆环代表一个数据项（item），用于对比分类数据的数值大小。

圆环图圆环图跟标准饼图同属于饼图这一种图表大类，只不过更加美观，也更有吸引力。

在ECharts中创建圆环图非常简单，只需要在代码中修改一个语句，即将语句“radius:66%,”修改为“radius:[45%,75%],”，即可由一个标准饼图变为一个圆环图，修改后的半径是有两个数值的数组，分别代表圆环的内、外半径。圆环图

02创建圆环图

创建圆环图（一）准备数据现有某年级1班学生成绩数据如下图所示，作为我们创建标准的原始数据，绘制学生成绩分布情况，如右图所示的图表：圆环图。

（二）创建项目创建圆环图1.选择文件夹2.创建网页文件

（1）引入echarts.js库文件。（2）准备一个指定了大小的div容器。（3）使用init方法初始化容器。（二）创建项目创建圆环图

（4）设置图形配置项和数据。（5）使用指定的配置项和数据显示渲染图表。（6）设置圆环图。（二）创建项目创建圆环图

创建圆环图（4）设置图形配置项和数据

03操作演示

操作演示创建圆环图

04总结与思考

圆环图01创建圆环图展示学生成绩分布情况02总结

准备一个指定了大小的div容器圆环图以及创建圆环图展示某年级1班成绩分布情况总结与思考使用init方法初始化容器设置图形配置项和数据使用指定的配置项和数据显示渲染圆环图

课后，请大家绘制圆环图：总结与思考

绘制嵌套饼图

嵌套饼图01创建嵌套图表展示专业分布情况02操作演示03总结与思考04目录

01嵌套饼图

嵌套饼图用于在每个类别中再嵌套多个类别，反映各类数据之间的比例关系外层一个环形图内层一个标准饼图或环形图

02创建嵌套图表

创建嵌套饼图某一本大学专业数据嵌套饼图（一）准备数据

选择文件夹创建网页文件12创建嵌套饼图（二）创建项目

010203040506引入echarts.js库文件准备一个指定了大小的div容器使用init方法初始化容器设置图形配置项和数据使用指定的配置项和数据显示渲染图表设置嵌套饼图创建嵌套饼图（二）创建项目设置嵌套饼图

设置图形配置项和数据创建嵌套饼图（二）创建项目

03操作演示

创建嵌套饼图操作演示

04总结与思考

嵌套饼图01创建嵌套饼图展示学生成绩分布情况02总结

准备一个指定了大小的div容器使用init方法初始化容器设置图形配置项和数据使用指定的配置项和数据显示渲染嵌套饼图嵌套饼图总结与思考创建嵌套饼图展示某一本大学专业分布情况

课后练习

绘制南丁格尔玫瑰图

南丁格尔玫瑰图01创建南丁格尔玫瑰图展示学生成绩分布情况02操