头歌- 校园大数据

最新推荐文章于 2025-08-23 23:02:37 发布

一道闪电34

最新推荐文章于 2025-08-23 23:02:37 发布

阅读量168

点赞数 2

CC 4.0 BY-SA版权

文章标签：大数据

本文链接：https://blog.csdn.net/2401_88833926/article/details/148729948

校园大数据—数据可视化

第1关：使用柱状图展示每门课程男女选修人数

包含五个代码部分请分开粘贴：

application.properties

#********** Begin **********#
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/mydb?characterEncoding=utf-8
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=123123
#********** End **********#

CoursesNumber.java

package com.example.student.pojo;
public class CoursesNumber {
    /********** Begin **********/
    private String coursename; // 课程名称
    private int malesnumber; // 男生数量
    private int femalesnumber; // 女生数量
    public CoursesNumber() {
    }
    public CoursesNumber(String coursename, int malesnumber, int femalesnumber) {
        this.coursename = coursename;
        this.malesnumber = malesnumber;
        this.femalesnumber = femalesnumber;
    }
    public String getCoursename() {
        return coursename;
    }
    public void setCoursename(String coursename) {
        this.coursename = coursename;
    }
    public int getMalesnumber() {
        return malesnumber;
    }
    public void setMalesnumber(int malesnumber) {
        this.malesnumber = malesnumber;
    }
    public int getFemalesnumber() {
        return femalesnumber;
    }
    public void setFemalesnumber(int femalesnumber) {
        this.femalesnumber = femalesnumber;
    }
    /********** End **********/
}

CoursesNumberMapper.java

package com.example.student.mapper;
import com.example.student.pojo.CoursesNumber;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
/********** Begin **********/
@Mapper
public interface CoursesNumberMapper {
    // 查询 courses_number 表数据
    @Select("select * from courses_number")
    List<CoursesNumber> queryAll();
}
/********** End **********/

CoursesNumberController.java

package com.example.student.controller;
import com.example.student.mapper.CoursesNumberMapper;
import com.example.student.pojo.CoursesNumber;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
/********** Begin **********/
@Controller
public class CoursesNumberController {
    @Autowired
    private CoursesNumberMapper coursesNumberMapper;
    /**
     * 模板跳转
     *
     * @param page
     * @return
     */
    @RequestMapping("/{page}")
    public String index(@PathVariable String page) {
        return page;
    }
    @RequestMapping("/coursesdata")
    @ResponseBody
    public List<CoursesNumber> queryAll() {
        List<CoursesNumber> list = coursesNumberMapper.queryAll();
        System.out.println(list.toString());
        return list;
    }
}
/********** End **********/

coursesnumber.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程男女人数图</title>
</head>
<body>
<div id="main" style="height:600px;width:80%;"></div>
<script type="text/JavaScript" src="/js/echarts.min.js"></script>
<script type="text/JavaScript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
    /********** Begin **********/
$(document).ready(function () {
        var myChart = echarts.init(document.getElementById('main'));
        $.ajax({
            type: "post",
            async: true,
            url: "/coursesdata",
            dataType: "json",
            success: function (result) {
                var coursenames = [];
                var malesnumbers = [];
                var femalesnumber = [];
                for (var i = 0; i < result.length; i++) {
                    coursenames.push(result[i].coursename)
                    malesnumbers.push(result[i].malesnumber)
                    femalesnumber.push(result[i].femalesnumber)
                }
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['男生数量','女生数量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: coursenames,
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value.split("").join("\n");
                                }
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            max: 920,
                            min: 800,
                            splitNumber: 6,
                        }
                    ],
                    series: [
                        {
                            name: '男生数量',
                            type: 'bar',
                            barWidth: '30%',
                            itemStyle: {
                                normal: {
                                    color: 'blue'
                                }
                            },
                            data: malesnumbers
                        },
                        {
                            name: '女生数量',
                            type: 'bar',
                            barWidth: '30%',
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            },
                            data: femalesnumber
                        }
                    ]
                };
                myChart.setOption(option);
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        });
    });
    /********** End **********/
</script>
</body>
</html>

第2关：使用饼状图展示课程各个成绩段的人数占比

包含五个代码部分请分开粘贴：

application.properties

#********** Begin **********#
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/mydb?characterEncoding=utf-8
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=123123
#********** End **********#

CoursesScore.java

package com.example.student.pojo;
public class CoursesScore {
    /********** Begin **********/
    private String courseid;
    private String coursename; // 课程名称
    private String level; // 等级
    private int num; // 数量
    public CoursesScore() {
    }
    public CoursesScore(String courseid, String coursename, String level, int num) {
        this.courseid = courseid;
        this.coursename = coursename;
        this.level = level;
        this.num = num;
    }
    public String getCourseid() {
        return courseid;
    }
    public void setCourseid(String courseid) {
        this.courseid = courseid;
    }
    public String getCoursename() {
        return coursename;
    }
    public void setCoursename(String coursename) {
        this.coursename = coursename;
    }
    public String getLevel() {
        return level;
    }
    public void setLevel(String level) {
        this.level = level;
    }
    public int getNum() {
        return num;
    }
    public void setNum(int num) {
        this.num = num;
    }
    /********** End **********/
}

CoursesScoreMapper.java

package com.example.student.mapper;
import com.example.student.pojo.CoursesScore;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
/********** Begin **********/
@Mapper
public interface CoursesScoreMapper {
    // 查询 courses_score 表数据
    @Select("select * from courses_score where courseid = #{courseid}")
    List<CoursesScore> queryAllByCourseid(String courseid);
}
/********** End **********/

CoursesScoreController.java

package com.example.student.controller;
import com.example.student.mapper.CoursesScoreMapper;
import com.example.student.pojo.CoursesScore;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/********** Begin **********/
@Controller
public class CoursesScoreController {
    @Autowired
    private CoursesScoreMapper coursesScoreMapper;
    /**
     * 模板跳转
     *
     * @param page
     * @return
     */
    @RequestMapping("/{page}")
    public String index(@PathVariable String page) {
        return page;
    }
    @RequestMapping("/coursesdata")
    @ResponseBody
    public List<CoursesScore> queryAllByCourseid(@RequestParam("courseid") String courseid) {
        List<CoursesScore> list = coursesScoreMapper.queryAllByCourseid(courseid);
        return list;
    }
}
/********** End **********/

coursesscore.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程成绩图</title>
</head>
<body>
<div id="main" style="height:600px;width:600px;margin:0 auto;"></div>
<script type="text/JavaScript" src="/js/echarts.min.js"></script>
<script type="text/JavaScript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
    /********** Begin **********/
    $(document).ready(function () {
        var myChart = echarts.init(document.getElementById('main'));
        var courseid = window.location.href.split("?")[1].split("=")[1];
        var val = {"courseid": courseid};
        $.ajax({
            type: "post",
            async: true,
            url: "/coursesdata",
            data: val,
            dataType: "json",
            success: function (result) {
                var coursename = "";
                var levels = [];
                var values = [];
                for (var i = 0; i < result.length; i++) {
                    coursename = result[i].coursename;
                    levels.push(result[i].level);
                    var parse = {"value": result[i].num, "name": result[i].level};
                    values.push(parse);
                }
                option = {
                    title: {
                        text: coursename,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: levels
                    },
                    series: [
                        {
                            name: coursename,
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: values,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        });
    });
    /********** End **********/
</script>
</body>
</html>

第3关：使用折线图展示各种支付方式在每月的数量变化趋势

包含五个代码部分请分开粘贴：

application.properties

#********** Begin **********#
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/mydb?characterEncoding=utf-8
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=123123
#********** End **********#

PayNumber.java

package com.example.student.pojo;
public class PayNumber {
    /********** Begin **********/
    private String pay;
    private String coursename; // 支付方式
    private String date; // 月份
    private int malesnumber; // 男生使用次数
    private int femalesnumber; // 女生使用次数
    private int num; // 总次数
    public PayNumber() {
    }
    public PayNumber(String pay, String coursename, String date, int malesnumber, int femalesnumber, int num) {
        this.pay = pay;
        this.coursename = coursename;
        this.date = date;
        this.malesnumber = malesnumber;
        this.femalesnumber = femalesnumber;
        this.num = num;
    }
    public String getPay() {
        return pay;
    }
    public void setPay(String pay) {
        this.pay = pay;
    }
    public String getCoursename() {
        return coursename;
    }
    public void setCoursename(String coursename) {
        this.coursename = coursename;
    }
    public String getDate() {
        return date;
    }
    public void setDate(String date) {
        this.date = date;
    }
    public int getMalesnumber() {
        return malesnumber;
    }
    public void setMalesnumber(int malesnumber) {
        this.malesnumber = malesnumber;
    }
    public int getFemalesnumber() {
        return femalesnumber;
    }
    public void setFemalesnumber(int femalesnumber) {
        this.femalesnumber = femalesnumber;
    }
    public int getNum() {
        return num;
    }
    public void setNum(int num) {
        this.num = num;
    }
    /********** End **********/
}

PayNumberMapper.java

package com.example.student.mapper;
import com.example.student.pojo.PayNumber;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
/********** Begin **********/
@Mapper
public interface PayNumberMapper {
    // 查询 pay_number 表数据
    @Select("select * from pay_number")
    List<PayNumber> queryAll();
}
/********** End **********/

PayNumberController.java

package com.example.student.controller;
import com.example.student.mapper.PayNumberMapper;
import com.example.student.pojo.PayNumber;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/********** Begin **********/
@Controller
public class PayNumberController {
    @Autowired
    private PayNumberMapper payNumberMapper;
    /**
     * 模板跳转
     *
     * @param page
     * @return
     */
    @RequestMapping("/{page}")
    public String index(@PathVariable String page) {
        return page;
    }
    @RequestMapping("/paydata")
    @ResponseBody
    public List<PayNumber> queryAllByCourseid() {
        List<PayNumber> list = payNumberMapper.queryAll();
        System.out.println(list.toString());
        return list;
    }
}
/********** End **********/

paynumber.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付方式占比图</title>
</head>
<body>
<div id="main" style="height:600px;width:600px;margin:0 auto;"></div>
<script type="text/JavaScript" src="/js/echarts.min.js"></script>
<script type="text/JavaScript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
    /********** Begin **********/
    $(document).ready(function () {
        var myChart = echarts.init(document.getElementById('main'));
        $.ajax({
            type: "post",
            async: true,
            url: "/paydata",
            dataType: "json",
            success: function (result) {
                function unique(arr) {
                    for (var i = 0, len = arr.length; i < len; i++) {
                        for (var j = i + 1, len = arr.length; j < len; j++) {
                            if (arr[i] === arr[j]) {
                                arr.splice(j, 1);
                                j--;
                                len--;
                            }
                        }
                    }
                    return arr;
                }
                var dates = [];
                var values = [];
                dates.push('product');
                var a = [];
                for (var i = 0; i < result.length; i++) {
                    dates.push(result[i].date);
                    var pay = result[i].pay;
                    if (a.indexOf(pay) === -1) {
                        a.push(pay);
                        var pays = [];
                        pays.push(pay);
                        for (var y = 0; y < result.length; y++) {
                            if (pay === result[y].pay) {
                                pays.push(result[y].num);
                            }
                        }
                        values.push(pays);
                    }
                }
                values.unshift(unique(dates));
                option = {
                    legend: {},
                    tooltip: {
                        trigger: 'axis',
                        showContent: false
                    },
                    dataset: {
                        source: values
                    },
                    xAxis: {type: 'category'},
                    yAxis: {gridIndex: 0},
                    grid: {top: '55%'},
                    series: [
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {
                            type: 'pie',
                            id: 'pie',
                            radius: '30%',
                            center: ['50%', '25%'],
                            label: {
                                formatter: '{b}: {@2012} ({d}%)'
                            },
                            encode: {
                                itemName: 'product',
                                value: '2012',
                                tooltip: '2012'
                            }
                        }
                    ]
                };
                myChart.on('updateAxisPointer', function (event) {
                    var xAxisInfo = event.axesInfo[0];
                    if (xAxisInfo) {
                        var dimension = xAxisInfo.value + 1;
                        myChart.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                },
                                encode: {
                                    value: dimension,
                                    tooltip: dimension
                                }
                            }
                        });
                    }
                });
                myChart.setOption(option);
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        });
    });
    /********** End **********/
</script>
</body>
</html>