如何用饼状图显示数据

开发工具与关键技术：VS MVC基础
作者：卢雅婷
撰写时间：2019/04/27

（代码来源于老师）
在我们平常处理数据的时候为了让客户、老师或者老板更直观的看到数据的情况及其变化趋向，我们会选择性的运用表格、图形、曲线等方法去呈现数据。
而我今天要说的是饼状图的数据分析图，饼状图相对于其他的图形优点在于它可以更直观的看到某部分数据占据总体的比率如下图所示，把鼠标移到该部分的上面，它可清楚的看出各个分数段占据比率的多少。哪这种饼状图是如何完成的呢？

其实它就是echarts这个插件的内容，上网搜索echarts，点击进去，再点击实例，下面就会出现很多类型的图标，折线图、饼状图、散点图、雷达图等等，你都可在上面学习。废话不多说，我们进入今天的主题，饼状图的创建。

1. 因为饼状图的方法我们是从echarts这个插件学习的，所以我们在创建之前要先引进echarts这个插件（我的echarts.min.js 放在Plugins这个文件夹中）

然后为Echarts准备一个具备达小宽高的Dom

2. 首先判断之前是否有图表若有则销毁后再次初始化，接着就是基于准备好的dom，初始化echarts实例，然后就是指定图表的配置项和数据，data数据的来源是下面控制器的查询结果。
   Formatter的值分别是是饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比），type是图形的形状，pie为饼状，（因为我的案例是有两个饼状图的，下图显示的是第一个小的饼状图，所以没用到分数段的数据，因为它们的方法都是一样的，我就不再一一举例了）第二个饼状图只要改一下data中的数据，和图形的大小就可以了。

3. 再到控制器中写查询图标字段的方法，（因为我们用的是饼状图，其显示的是数据的百分比，和不及格、及格等类型的数据，而我们的数据库中并没有该类型的字段，所以需要创建一个静态类来接收该字段，如下图所示就是我创建的一个实体类）

4. 要先得到图一的数据我们就必须经过连表查询（在此因为我侧重的是图形的创建所以有关多表查询的内容，我会一拉而过，如有不明白的可以查看我的文章有关多表查询的部分。）下图是在控制器中的一个方法查询后的内容，当我们查询出数据后，声明一个totals来接收其总人数（就是数据的条数）（因为现在得到的总人数是后面百分比计算的分母，所以我们要在此做个三目运算，当总人数为零时让其等于一）。

5. 接着实例化上图的实体类，再获取总人数和总成绩接着就是平均分，总人数除于总分数，就是AverageScore的取值，再到合格分数的获取PassNumber是进行获取大于九十分的的数据，PassNumberPercentage就是百分比的数字（还没加上%符号）。下面的数据的获取方法的原理是一样，所以我就不再细说。把各个分数段的数据的获取之后，再把数据返回给页面。
   
   鄙人学之尚浅如有不对之处，请给予矫正。