报表总结

两个月，终于做完了别人2个星期能做完的项目了。感谢老大，一直没催我；感谢两个小弟，一直让你们背锅。刚开始由于都是0经验所以交互数据格式方面一直有问题，感谢你们为了让前端容易处理而改了无数次Java。
这个项目是把考生的考试得分信息展现出来，生成报表，让老师、考生通过表格和图表更好的获取信息。
刚开始的两个星期…我做了十几个静态。不过也正是这十几个静态，弥补了我这方面的缺陷，由刚开始的每写一个属性就查看一次效果到现在一次性写几个属性…….还是这么弱……
报表嘛，就是表格加图。表格我们都是用jstl直接生成而不用异步去拿。柱状图、折线图、饼图我们采用了Echarts。这个高大上的东西不仅漂亮，而且使用起来还挺简单的，几行js就能把数据用图直观的展现数据。通过官网的文档和例子，一般都基本能懂，不过这东东很强大，我也没摸得太深。建议以后项目需要图表的，可以使用这个Echarts。
这个项目前端主要负责的就是通过ajax取得数据，用Echarts展现出来。
使用JQ来异步，简直是爽翻了，简单点的话，一个url，data，type就可以了。
刚开始由于不熟悉Echarts而在这方面花了很长时间。折线图、柱状图，必须要有xAxis,yAxis,series。虽然y轴的数据是写在series里面的，但是yAxis也是必不可少的。如果开始是空数据，则相应的data一定要赋一个空数组。当时因为这个点，吃了不少亏。废话不说，上代码。
下面展示的是先是空的图，通过ajax取得数据后再二次加载柱状图。
首先要在html里面定义一个带有width和height的div，id为echarts1，用js来初始化。

var mycharts1 = echarts.init(document.getElementById("echarts1")); //初始化echarts
var option = {
    color : [ '#f87b5e' ],
    tooltip : {                        //提示框
        trigger : 'item'
    },
    xAxis : [ {
        type : 'category',
        show : true,
        data : []          //data必不可少，即使是没有数据也要赋一个空数组给data
    } ],
    yAxis : [ {           //即使数据写在series里，yAxis也是必不可少的
        type : 'value'
    } ],
    series : [ {
        name : '平均分',
        type : 'bar',
        data : [],       //同理，没数据也要赋空数组
        markLine : {     //Echarts自带功能，能自动计算平均分并把这条线画出来
            data : [ {
                type : 'average',
                name : '校平均值'
            } ]
        }
    } ]
};

下面是ajax后二次渲染

$.ajax({
    url:'url',
    type:'get',
    data : {},
    success : function(data) {
        var data = data.attributes.classAvg;
        var sourceList = new Array();
        var classList = new Array();
        $(data).each(function(i) {
            sourceList[i] = parseFloat(data[i].avgScore).toFixed(2);
            classList[i] = data[i].className;
        });
        mycharts1.setOption({
            xAxis : {
                data : classList
            },
            series : [ {
                // 根据名字对应到相应的系列
                name : '平均分',
                data : sourceList
            } ]
        })
    }
});

最后，就能把数据展现出来啦~~

然后，看见右上角的选择班级了吗，他是点击那个班级就显示那个班级的数据其他班级都隐藏掉。刚开始我想了想觉得如果再次异步查询再渲染好像有点慢。后来我采取把其他数据的颜色都设为透明，只有他那条是橙色。为了实现这个功能，我新建一个颜色数组，里面都是’rgba(255,255,0,0)’。然后我在每个按钮都设置一个data-index值，根据他的data-index知道他是按了第几个按钮，对应的colorList的第i个就改为’#f87b5e’，最后再次渲染echarts1。但是….虽然设置了透明，但是因为他还是有数据的，所以每条柱状图的顶部还是有数字出来。所以，其实可以把这条颜色数组改为数值数组，赋值全为0，然后对应的下标i的数值等于sourceList[i]。（PS：看图是不是觉得很乱呢……）

实现了显示个别班后，如果我再次点击了496班级，应该是把这条柱隐藏对不对，但是怎么做才能更好呢。我感觉这功能我复杂化了，但是暂时没想到更好的方法，如果有更好的方法能分享一下吗。我设置了一个flag属性，如果是true表示他已经是显示出来如果是false则为透明。解决了这个就是全部班级这个点击麻烦的东西，不仅仅把颜色全改为不透明还要设置后面的按钮的flag属性。
因为不仅仅这个柱状图有这个选择班级的功能，所以一定要注意代码的复用。然后设计原则不是还有一个单一职责原则吗，所以我把这个功能分了3个方法来实现。但是…….感觉这段代码还有很大的优化空间。写得很……不过这是我第一次实战，能实现我已经对自己很满意了…….

/* 平均分 */
    angBtn : function() {
        var colList = new Array();
        for (var i = 0; i < $("#choose_class_ul li").length; i++) {
            colList[i] = "#f87b5e";
        }
        report.setAttr("#btn_avg_", $("#choose_class_ul li").length, colList,
                report.mycharts1, "bar");
    },

    setAttr : function(string, len, colList, echart, type) {
        var echa = new Array();
        for (var i = 0; i < len; i++) {
            echa[i] = "rgba(255,255,0,0)";
            $(string + i).attr("flag", "hide");
            var all = true;
            $(string + i).on("click",function() {              
                $(this).toggleClass("choosed");
                var index = $(this).attr("data-index");
                if (index == 0) {
                    for (var j = 0; j < len; j++) {
                        echa[j] = colList[j];
                        $(string + j).attr("flag", "hide");
                        $(string + j).removeClass("choosed");
                    }
                    $(string + 0).addClass("choosed");
                    all = true;
                } else {
                    if (all) {
                        $(string + 0).removeClass("choosed");
                        for (var j = 0; j < len; j++) {
                            echa[j] = "rgba(255,255,0,0)";
                        }
                        all = false;
                    }
                    if ($(this).attr("flag") == "hide") {
                        echa[index - 1] = colList[index - 1];
                        $(this).attr("flag", "show");
                    } else if ($(this).attr("flag") == "show") {
                        echa[index - 1] = "rgba(255,255,0,0)";
                        $(this).attr("flag", "hide");
                    }
                }
                report.setEchart(echart, echa, type);
            })
        }
    },

    setEchart : function(echart, echa, type) {
        if (type == "line") {
            echart.setOption({
                color : echa
            });
        } else if (type == "bar") {
            echart.setOption({
                series : [ {
                    itemStyle : {
                        normal : {
                            color : function(params) {
                                var colorList = echa;
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                } ]
            })
        }
    }

现在报表做完了，要开始做题库了。但是，不能原地踏步，这周末把静态做完后…..是的，我又要做静态….这方面真的很烦…但是不把静态做出来怎么做后面的呢……昨天被大神“安利”了一个…Veu.js….表示这个是什么我不知道。让我学学看看能不能运用到题库里面。加油~~每天进步一点点