201912G05/WebContent/js/BA_index.js

/**
 * 发送阿贾克斯请求 获取数据库信息,放到 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]);
}