笔试考试系统 ____成绩统计

1.今日完成任务

成绩统计

 

 点击成绩统计可查看

 

 

控制器对应代码

 1 public class ExamMannageController : Controller
 2     {
 3         // GET: ExamMannage
 4         public ActionResult Index(int page = 1)
 5         {
 6             IPagedList list = PaperRuleService.GetList(page);
 7             return View(list);
 8 
 9         }
10         /// 

11         /// 统计分数
12         /// 
13         /// 
14         /// 
15         public ActionResult Totle(int ruleid)
16         {
17             Exam_PaperRule rule = PaperRuleService.FindPaperRuleByID(ruleid);
18             ViewBag.Info = rule;
19 
20             ScoreTotleModel score = ExamPaperService.GetScoreModel(ruleid);
21             return View(score);
22         }
23      
24     }

视图对应代码：

@using PagedList
@using PagedList.Mvc
@using Exam.Model
@model ScoreTotleModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
    <script src="~/js/echarts.min.js">script>
<div class="larry-fluid larry-wrapper fadeInRightBig">
    <div class="layui-row lay-col-space15 ">
        <table class="layui-table" lay-skin="line">
           
            <caption> <span class="tit">试卷名称：@ViewBag.Info.RuleName 总分：@ViewBag.Info.Score 总人数： @Model.StudentNumspan>caption>
            <colgroup>
                <col>
                <col width="100">
                <col width="120">
                <col width="150">
            colgroup>
            <thead>
                <tr>
                    <th>最高分th>
                    <th>最低分th>
                    <th>平均分th>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>@Model.MaxScoretd>
                    <td>@Model.MinScoretd>
                    <td>@Model.ScoreAvgtd>
                tr>
            tbody>
        table>

        <div id="main" class="center" style="width: 600px;height:400px;">div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '@ViewBag.Info.RuleName 分数段统计图'
                },
                tooltip: {},
                legend: {
                    data: ['人数']
                },
                xAxis: {
                    data: ["60分以下", "60-70", "70-80", "80-90", "90-100", "100及以上"]
                },
                yAxis: {},
                series: [{
                    name: '人数',
                    type: 'bar',
                    data: [@Model.Score60,@Model.Score6070,@Model.Score7080,@Model.Score8090,@Model.Score90100,@Model.Score100]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        script>
    div>
div>

本项目中图标用的是echarts   官网地址：https://echarts.apache.org/zh/index.html

3.遇到的问题

成绩统计表格的样式

4.解决方案  

运用echarts图表框架，按照示例文档进行编写