上传文件至 'WebContent/js'

WebContent/js/BA_index.js

@@ -0,0 +1,824 @@
+/**
+ * 发送阿贾克斯请求 获取数据库信息,放到 arrX和 arrY中
+ * @param {String} val 输入year 或者 score 即抓取年份还是值还是
+ * @param {Array} arr 输入arrX 或者 arrY
+ * @param {String} address 请求地址
+ */
+function findData(val, arr, address) {
+    $.ajax({
+        type: "post",
+        async: false,
+        url: address,
+        data: {},
+        dataType: "json", //返回数据形式为json,这里是N个 {name:'xxx',num:x}
+        success: function (result) {
+            console.log('result', result);
+            if (result) {
+                for (var i = 0; i < result.length; i++) {
+                    // console.log('temp', result);
+                    arr.push(result[i][val]); //把每一项的名字或者值存起来
+                }
+            }
+        },
+        error: function (errorMsg) {
+            alert("不好意思，大爷，图表请求数据失败啦!");
+            myChart.hideLoading();
+        }
+    });
+}
+
+/**
+ * 切换
+ */
+switcher();
+
+function switcher() {
+    //先阻止默认事件
+    $('#banner a').click(function (e) {
+        e.preventDefault();
+    });
+
+    //工具箱的切换
+    //样式选项卡切换
+    $('#banner li').on('click', function () {
+        $(this).siblings('li').css({
+            'background-color': '',
+            'border-radius': '0px',
+            'box-shadow': '0 0 0 0',
+        });
+        $(this).siblings('li').children('a').css('color', 'white');
+        $(this).css({
+            'background-color': '#6a19c1',
+            'border-radius': '7px',
+            'box-shadow': '0 0 10px 0 #6a19c1',
+        });
+        $(this).children('a').css('color', '#008c8c');
+    });
+
+    $('#banner li:eq(0)').on('click', function () {
+        $('#pie').hide();
+        $('#line').css('visibility', 'hidden');
+        // $('#line div').remove();
+        $('#bar').css('visibility', 'visible');
+        barGraph();
+        console.log('柱状图');
+
+        //导航栏控制内容的切换
+        $('.tools .pieList').hide();
+        $('.tools .lineList').show();
+        $('.tools .lineList').children('input[placeholder="请输入名字"]').val('詹皇');
+        console.log('工具箱big');
+    });
+
+    $('#banner li:eq(1)').on('click', function () {
+        $('#pie').hide();
+        $('#line').css('visibility', 'visible');
+        // $('#line div').remove();
+        $('#bar').css('visibility', 'hidden');
+        lineGraph();
+        console.log('折线图');
+
+        $('.tools .pieList').hide();
+        $('.tools .lineList').show();
+        $('.tools .lineList').children('input[placeholder="请输入名字"]').val('');
+        console.log('工具箱big');
+    });
+
+    $('#banner li:eq(2)').on('click', function () {
+        $('#pie').show();
+        $('#line').css('visibility', 'hidden');
+        // $('#line div').remove();
+        $('#bar').css('visibility', 'hidden');
+        // $('#bar div').remove();
+        pieGraph();
+        console.log('饼图');
+
+        $('.tools .lineList').hide();
+        $('.tools .pieList').show();
+        $('.tools .lineList').children('input[placeholder="请输入名字"]').val('');
+        console.log('工具箱mini');
+    });
+}
+
+/**
+ * 工具箱_控制(增删改)
+ */
+controlGraph();
+
+function controlGraph() {
+    //内容显示
+    $(".tools").on('mouseover', function () {
+        $(this).children().css({
+            'visibility': 'visible',
+        });
+        $(this).find('button').css({
+            'transition': '1s',
+        })
+    }).on('mouseleave', function () {
+        $(this).children().css({
+            'visibility': 'hidden',
+        });
+        $(this).find('button').css({
+            'transition': '0s',
+        });
+        $(this).children('.iconfont').css('visibility', 'visible');
+    });
+
+    //添加
+    $('.tools button:eq(0)').on('click', function () {
+        var keyX = $(this).prev().prev().prev().val(), //抓取输入的名字
+            keyY = $(this).prev().prev().val(), //抓取输入的年份
+            keyZ = $(this).prev().val(); //抓取输入的得分
+        console.log(keyX, keyY, keyZ);
+        if (keyX != '') {
+            if (keyY == '') { //如果没设置值
+                keyY = 0;
+            }
+            $.ajax({
+                    type: 'post',
+                    url: 'Add',
+                    data: {
+                        "setName": keyX,
+                        "setYear": keyY,
+                        "setScore": keyZ,
+                    }
+                })
+                .done(function () {
+                    alert('添加成功');
+                    barGraph();
+                })
+                .fail(function () {
+                    alert('添加失败');
+                });
+        }
+
+        var key = $('#bar').css('visibility');
+        if (key == 'visible') { //如果目前看的是柱状图
+            /* if (keyX != '詹皇' || keyX != '詹姆斯') {
+                alert('提示一下：你目前看的是詹皇的数据,所以你刚刚输入的名字不能在图中显示');
+            } */
+            barGraph();
+        } else {
+            lineGraph();
+        }
+        console.log('添加成功');
+    });
+
+
+    //修改
+    $('.tools button:eq(2)').on('click', function () {
+        var keyX = $(this).prev().prev().prev().val(), //抓取输入的名字
+            keyY = $(this).prev().prev().val(), //抓取输入的年份
+            keyZ = $(this).prev().val(); //抓取输入的得分
+
+        // console.log(name, value);
+        $.ajax({
+                type: 'post',
+                url: 'changePerform',
+                data: {
+                    "changeName": keyX,
+                    "changeYear": keyY,
+                    "changeScore": keyZ,
+                }
+            })
+            .done(function () {
+                alert('修改成功');
+                barGraph();
+            })
+            .fail(function () {
+                alert('修改失败');
+            })
+
+        var key = $('#bar').css('visibility');
+        if (key == 'visible') {
+            barGraph();
+        } else {
+            lineGraph();
+        }
+        console.log('修改成功');
+    });
+
+    //删除
+    $('.tools button:eq(1)').on('click', function () {
+        var name = $(this).prev().prev().val(),
+            year = $(this).prev().val();
+        // console.log(name);
+        $.ajax({
+                type: 'post',
+                url: 'Delete',
+                data: {
+                    delName: name,
+                    delYear: year,
+                }
+            })
+            .done(function () {
+                barGraph();
+                alert('删除成功！');
+            })
+            .fail(function () {
+                alert('删除失败');
+            });
+
+        var key = $('#bar').css('visibility');
+        if (key == 'visible') {
+            barGraph();
+        } else {
+            lineGraph();
+        }
+        console.log('删除成功');
+    });
+
+    //饼图的修改
+    $('.tools .changePie').on('click', function () {
+        var keyX = $(this).prev().prev().val(), //抓取输入的名字
+            keyY = $(this).prev().val(); //抓取输入的值
+        /* var name = $(this).prev().prev().val(),
+            value = $(this).prev().val(); */
+        // console.log(name, value);
+
+        $.ajax({
+                type: 'post',
+                url: 'pieChange',
+                data: {
+                    "changeName": keyX,
+                    "changeScore": keyY,
+                }
+            })
+            .done(function () {
+                alert('修改成功');
+                barGraph();
+            })
+            .fail(function () {
+                alert('修改失败');
+            });
+        pieGraph();
+        console.log('修改成功！');
+    })
+}
+
+
+/**
+ * 柱状图
+ */
+// barGraph();
+
+function barGraph() {
+    var arrX = [], //用来保存键(名字)
+        arrY = []; //用来保存值(数量)
+
+    //获取数据库信息
+    findData('year', arrX, "bar.do"); //获取名字
+    findData('score', arrY, "bar.do"); //获取值
+
+    //初始化
+    var myChart = echarts.init(document.getElementById('bar'));
+    var option = {
+        color: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8',
+            '#8d4653', '#91e8e1'
+        ],
+        title: {
+            text: '詹皇2016以来的场均得分',
+            x: 'center'
+        },
+        tooltip: {},
+        xAxis3D: {
+            type: 'category',
+            data: arrX,
+            axisLine: {
+                lineStyle: {
+                    color: 'purple',
+                    width: 2
+                }
+            },
+            // xAxis.axisTick.interval:{},
+            axisLabel: {
+                interval: 0 //强制显示所有标签
+            }
+        },
+        yAxis3D: {
+            type: 'category',
+            data: [''],
+            axisLine: {
+                lineStyle: {
+                    color: 'purple',
+                    width: 2
+                }
+            },
+        },
+        zAxis3D: {
+            type: 'value',
+            axisLine: {
+                lineStyle: {
+                    color: 'purple',
+                    width: 2
+                }
+            },
+        },
+        grid3D: {
+            boxWidth: 200,
+            boxDepth: 30,
+            axisPointer: {
+                show: false
+            },
+            light: {
+                main: {
+                    intensity: 1.2
+                },
+                ambient: {
+                    intensity: 0.3
+                }
+            },
+            viewControl: {
+                alpha: 10, //控制场景平移旋转
+                beta: 20,
+                minAlpha: 10,
+                maxAlpha: 10,
+                minBeta: 20,
+                maxBeta: 20
+            }
+        },
+        series: [{
+            type: 'bar3D',
+            name: '1',
+            barSize: 10,
+            data: (function () {
+                var tempRecordY = []; //临时记录 arrY 中的每一项
+                arrY.forEach(function (item, i, self) { //将arrY中每一项拿出来
+                    if (i % 2 == 0) {
+                        tempRecordY.push([i, 0, item]);
+                    }
+                });
+                return tempRecordY; //将他返回给data
+            }()),
+            stack: 'stack',
+            shading: 'lambert',
+            emphasis: {
+                label: {
+                    show: true
+                }
+            }
+        }, {
+            type: 'bar3D',
+            name: '2',
+            barSize: 10,
+            data: (function () {
+                var tempRecordY = [];
+                arrY.forEach(function (item, i, self) {
+                    if (i % 2 !== 0) {
+                        tempRecordY.push([i, 0, item]);
+                    }
+                });
+                return tempRecordY;
+            }()),
+            // stack: 'stack',  第二个不设置，不然会飞起来对不齐
+            shading: 'lambert',
+            emphasis: {
+                label: {
+                    show: true
+                }
+            }
+        }]
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option);
+
+    console.log(arrX);
+
+
+}
+
+
+/**
+ * 饼图
+ */
+// pieGraph();
+
+function pieGraph() {
+    //根据json数据生成饼状图，并将饼状图显示到div中
+    var arrX = [],
+        arrY = [];
+
+    findData('name', arrX, "pie.do");
+    findData('score', arrY, "pie.do");
+
+    // 转为 [{},{},{},{}] 格式
+    var j = 0,
+        lenY = arrY.length;
+    var jsonPerform = [];
+    for (var i = 0, lenX = arrX.length; i < lenX; i++) {
+        for (; j < lenY;) {
+            jsonPerform.push({
+                'name': arrX[i],
+                'value': arrY[j],
+            });
+            j++;
+            break;
+        }
+    }
+    // console.log('new',arrX,arrY);
+    // console.log('newLast', jsonPerform);
+
+    MakeChart(jsonPerform);
+
+    function MakeChart(json) {
+        chartData = eval(json);
+        //饼状图
+        chart = new AmCharts.AmPieChart();
+        chart.dataProvider = chartData;
+        //标题数据
+        chart.titleField = "name";
+        //值数据
+        chart.valueField = "value";
+        //边框线颜色
+        chart.outlineColor = "#fff";
+        //边框线的透明度
+        chart.outlineAlpha = .8;
+        //边框线的狂宽度
+        chart.outlineThickness = 1;
+        chart.depth3D = 20;
+        chart.angle = 30;
+        chart.write("pie");
+
+    }
+}
+
+/**
+ * 折线图
+ */
+lineGraph();
+
+function lineGraph() {
+    var arrX = [],
+        arrY1 = [],
+        arrY2 = [];
+
+    //获取数据库信息
+    findData('year', arrX, "line.do"); //获取年份
+    findData('score', arrY1, "line.do"); //获取詹皇分数
+    findData('score2', arrY2, "line2.do"); //获取戴维斯分数
+    console.log('詹皇', arrY1);
+    console.log('年份', arrX);
+    console.log('戴维斯', arrY2);
+    /**
+     * 画双折线图
+     * @param container 容器
+     * @param titleName 标题
+     * @param xData x轴数据
+     * @param seriesNameOne 第一条折线图表名称
+     * @param seriesDataOne 第一条折线图表数据
+     * @param seriesNameTwo 第二条折线图表名称
+     * @param seriesDataTwo 第二条折线图表数据
+     */
+    drawDoubleLine('doubleLine', '年份', arrX, '詹皇', arrY1, '戴维斯', arrY2);
+
+    function drawDoubleLine(container, titleName, xData, seriesNameOne, seriesDataOne, seriesNameTwo, seriesDataTwo) {
+        var doubleLine = echarts.init(document.getElementById('line'));
+        doubleLineOption = {
+            tooltip: {
+                trigger: 'axis',
+                //指示器
+                axisPointer: {
+                    type: 'line',
+                    lineStyle: {
+                        color: '#7171C6'
+                    }
+                }
+            },
+            //标题样式
+            title: {
+                text: titleName,
+                textStyle: {
+                    color: 'white',
+                },
+                left: 'center'
+            },
+            //图形位置
+            grid: {
+                left: '4%',
+                right: '6%',
+                bottom: '4%',
+                top: 50,
+                containLabel: true
+            },
+            xAxis: [{
+                type: 'category',
+                //x轴坐标点开始与结束点位置都不在最边缘
+                boundaryGap: true,
+                axisLine: {
+                    show: true,
+                    //x轴线样式
+                    lineStyle: {
+                        color: '#17273B',
+                        width: 1,
+                        type: 'solid'
+                    }
+                },
+                //x轴字体设置
+                axisLabel: {
+                    show: true,
+                    fontSize: 12,
+                    color: 'white'
+                },
+                data: xData
+            }],
+            yAxis: [{
+                type: 'value',
+                //y轴字体设置
+                axisLabel: {
+                    show: true,
+                    color: 'white',
+                    fontSize: 12,
+                    formatter: function (value) {
+                        if (value >= 1000) {
+                            value = value / 1000 + 'k';
+                        }
+                        return value;
+                    }
+                },
+                //y轴线设置显示
+                axisLine: {
+                    show: true
+                },
+                //与x轴平行的线样式
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#17273B',
+                        width: 1,
+                        type: 'solid',
+                    }
+                }
+            }],
+            series: [{
+                name: seriesNameOne,
+                type: 'line',
+                smooth: true,
+                lineStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0,
+                            color: '#00F2B1' // 0% 处的颜色
+                        }, {
+                            offset: 1,
+                            color: '#00F2B1' // 100% 处的颜色
+                        }],
+                        globalCoord: false
+                    },
+                    width: 2,
+                    type: 'solid',
+                },
+                //折线连接点样式
+                itemStyle: {
+                    color: '#00E5DE'
+                },
+                //折线堆积区域样式
+                areaStyle: {
+                    color: '#004c5E'
+                },
+                data: seriesDataOne
+            }, {
+                name: seriesNameTwo,
+                type: 'line',
+                smooth: true,
+                lineStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0,
+                            color: '#0AB2F9' // 0% 处的颜色
+                        }, {
+                            offset: 1,
+                            color: '#0AB2F9' // 100% 处的颜色
+                        }],
+                        globalCoord: false
+                    },
+                    width: 2,
+                    type: 'solid',
+                },
+                //折线连接点样式
+                itemStyle: {
+                    color: '#00E5DE'
+                },
+                //折线堆积区域样式
+                areaStyle: {
+                    color: '#004c5E'
+                },
+                data: seriesDataTwo
+            }]
+        };
+        doubleLine.setOption(doubleLineOption);
+    }
+}
+
+/**
+ * 交互图
+ */
+rect();
+
+function rect() {
+    var arrX = [],
+        arrY1 = [],
+        arrY2 = [];
+
+    //获取数据库信息
+    findData('year', arrX, "line.do"); //获取年份
+    findData('score', arrY1, "line.do"); //获取詹皇分数
+    findData('score2', arrY2, "line2.do"); //获取戴维斯分数
+    // 路径配置
+    require.config({
+        paths: {
+            echarts: 'http://echarts.baidu.com/build/dist'
+        }
+    });
+    // 使用
+    require(['echarts', 'echarts/chart/bar', 'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
+        ],
+        drewEcharts
+    );
+
+    function drewEcharts(ec) {
+        // 基于准备好的dom，初始化echarts图表
+        var myChart = ec.init(document.getElementById('rect'));
+
+        var option = {
+            title: {
+                text: '湖人队主力',
+                // subtext: '纯属虚构'
+            },
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: ['詹皇', '戴维斯']
+            },
+            toolbox: {
+                show: true,
+                feature: {
+                    dataView: {
+                        show: true,
+                        readOnly: false
+                    },
+                    magicType: {
+                        show: true,
+                        type: ['line', 'bar']
+                    },
+                    restore: {
+                        show: true
+                    },
+                    saveAsImage: {
+                        show: true
+                    }
+                }
+            },
+            calculable: true,
+            xAxis: [{
+                type: 'category',
+                data: arrX,
+            }],
+            yAxis: [{
+                type: 'value'
+            }],
+            series: [{
+                    "name": "詹皇",
+                    "type": "bar",
+                    "data": arrY1,
+
+                    markPoint: {
+                        data: [{
+                                type: 'max',
+                                name: '最大值'
+                            },
+                            {
+                                type: 'min',
+                                name: '最小值'
+                            }
+                        ]
+                    },
+                    markLine: {
+                        data: [{
+                            type: 'average',
+                            name: '平均值'
+                        }]
+                    }
+                },
+
+                {
+                    name: '戴维斯',
+                    type: 'bar',
+                    "data": arrY2,
+                    markPoint: {
+                        data: [{
+                                type: 'max',
+                                name: '最大值'
+                            },
+                            {
+                                type: 'min',
+                                name: '最小值'
+                            }
+                        ]
+                    },
+                    markLine: {
+                        data: [{
+                            type: 'average',
+                            name: '平均值'
+                        }]
+                    }
+                }
+
+            ]
+        };
+
+        // 为echarts对象加载数据 
+        myChart.setOption(option);
+    }
+}
+
+/**
+ * 浮现效果
+ */
+document.addEventListener("DOMContentLoaded", function () {
+    appear();
+})
+
+function appear() {
+    //先把内容全部隐藏
+    $('.info .James').children().hide();
+    //鼠标移入头像
+    $('header img').on('mouseover', function () {
+        $('.info .James').animate({
+            'height': 200,
+        }, function () {
+            var height = $('.info .James').height();
+            if (height == 200) {
+                $('.info .James').children().show();
+            }
+        });
+
+    });
+    //鼠标移出头像
+    $('header img').on('mouseleave', function () {
+        $('.info .James').stop();
+        $('.info .James').children().hide();
+        $('.info .James').animate({
+            'height': '0',
+        });
+    });
+
+    //鼠标移入more
+    /* $('.more').children().hide();
+    $('.more').find('.iconfont').show();
+    $('.more').on('mouseover', function () {
+        $('.more .more_list').animate({
+            'height': '250px',
+        }, function () {
+            $('.more').children().show();
+        });
+    });
+    //鼠标移出more
+    $('.more').on('mouseleave', function () {
+        $(this).children().hide();
+        $('.more .more_list').animate({
+            'height': '0',
+        });
+        $(this).find('.iconfont').show();
+    }); */
+}
+
+/**数字数据 */
+numDigi();
+
+function numDigi() {
+    var arrY1 = [], //记录詹皇的分
+        arrY2 = []; //记录戴维斯的分
+    //获取数据库信息
+    findData('score', arrY1, "line.do"); //获取名字
+    findData('score2', arrY2, "line2.do"); //获取名字
+    console.log('分数k', arrY1);
+    console.log('分数d', arrY2);
+
+    /*  for (var i = 0, len = arrY2.length; i < len; i++) {
+         arrY2[i].toFixed(2);
+         console.log('arrY2',arrY2)
+     } */
+
+    $('.digital tr:eq(1) td:eq(1)').text(arrY1[0]);
+    $('.digital tr:eq(1) td:eq(2)').text(arrY2[0]);
+
+    $('.digital tr:eq(2) td:eq(1)').text(arrY1[1]);
+    $('.digital tr:eq(2) td:eq(2)').text(arrY2[1]);
+
+    $('.digital tr:eq(3) td:eq(1)').text(arrY1[2]);
+    $('.digital tr:eq(3) td:eq(2)').text(arrY2[2]);
+
+    $('.digital tr:eq(4) td:eq(1)').text(arrY1[3]);
+    $('.digital tr:eq(4) td:eq(2)').text(arrY2[3]);
+}