笔试考试系统 ____成绩统计

1.今日完成任务

成绩统计

 点击成绩统计可查看

控制器对应代码

public class ExamMannageController : Controller
    {
        // GET: ExamMannage
        public ActionResult Index(int page = 1)
        {
            IPagedList list = PaperRuleService.GetList(page);
            return View(list);

        }
        /// <summary>
        /// 统计分数
        /// </summary>
        /// <param name="ruleid"></param>
        /// <returns></returns>
        public ActionResult Totle(int ruleid)
        {
            Exam_PaperRule rule = PaperRuleService.FindPaperRuleByID(ruleid);
            ViewBag.Info = rule;

            ScoreTotleModel score = ExamPaperService.GetScoreModel(ruleid);
            return View(score);
        }
     
    }

视图对应代码：

@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.StudentNum</span></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.MaxScore</td>
                    <td>@Model.MinScore</td>
                    <td>@Model.ScoreAvg</td>
                </tr>
            </tbody>
        </table>

        <div id="main" class="center" style=" 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图表框架，按照示例文档进行编写