SpringBoot+Vue2+Echarts实现图表的统计

SpringBoot+Vue2+Echarts实现图表的统计

一、需求

该功能是为了实现在对学生分班的人数统计下，所作出的相应调整。Echarts图表在实际项目中也有使用。

二、具体实现

1、数据库设计

班级表：classes

字段名	类型	长度	小数点	是否允许为空	是否为主键	说明
cid	int	0	0	否	是	主键，自增
cname	varchar	255	0	是	否	班级名称

学生表：student

字段名	类型	长度	小数点	是否允许为空	是否为主键	说明
sid	int	0	0	否	是	主键，自增
name	varchar	255	0	是	否	姓名
sex	int	0	0	是	否	性别
age	int	0	0	是	否	年龄
address	varchar	255	0	是	否	地址
cid	int	0	0	是	否	所属班级

2、后端项目

• 框架：SpringBoot
• 数据库：MySQL

2.1、添加依赖

<parent>
	<artifactId>spring-boot-starter-parent</artifactId>
	<groupId>org.springframework.boot</groupId>
	<version>2.5.12</version>
</parent>

<dependencies>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-web</artifactId>
	</dependency>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-test</artifactId>
	</dependency>
	<dependency>
		<groupId>org.junit.platform</groupId>
		<artifactId>junit-platform-launcher</artifactId>
		<scope>test</scope>
	</dependency>
	<dependency>
		<groupId>mysql</groupId>
		<artifactId>mysql-connector-java</artifactId>
	</dependency>
	<dependency>
		<groupId>com.baomidou</groupId>
		<artifactId>mybatis-plus-boot-starter</artifactId>
		<version>3.5.3.1</version>
	</dependency>
	<dependency>
		<groupId>com.alibaba</groupId>
		<artifactId>fastjson</artifactId>
		<version>2.0.3</version>
	</dependency>
</dependencies>

2.2、实体类

package org.example.entity;

public class StudentVO {
    
    private Integer total;
    
    private String cId;
    
    private String cName;

    public Integer getTotal() {
        return total;
    }

    public void setTotal(Integer total) {
        this.total = total;
    }

    public String getcId() {
        return cId;
    }

    public void setcId(String cId) {
        this.cId = cId;
    }

    public String getcName() {
        return cName;
    }

    public void setcName(String cName) {
        this.cName = cName;
    }
}

2.3、Mapper

StudentDao

package org.example.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.hanscnc.entity.CountVO;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
@Mapper
public interface StudentDao extends BaseMapper<Student> {

    List<Student> selectCountStudent();

}

StudentMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.example.mapper.StudentDao">
    <select id="selectCountStudent" resultType="org.example.entity.StudentVO">
        select count(*) as total, s.cid as cId, c.cname as cName
        from student s join classes c on s.cid = c.cid
        group by c.cname;
    </select>
</mapper>

2.4、Service

package org.example.service;

import org.example.entity.StudentVO;
import java.util.List;

public interface StudentService {

    List<StudentVO> countStudent();

}

package org.example.service.impl;

import org.example.entity.StudentVO;
import org.example.mapper.StudentDao;
import org.example.service.StudentService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class StudentServiceImpl implements StudentService {

    private final Logger logger = LoggerFactory.getLogger(StudentService.class);

    private final StudentDao studentDao;

    public StudentServiceImpl(StudentDao studentDao) {
        this.studentDao = studentDao;
    }

    @Override
    public List<StudentVO> countStudent() {
        try {
            return studentDao.selectCountStudent();
        } catch (Exception e) {
            logger.error("StudentService---->countStudent(...)error." + e.getMessage());
            return null;
        }
    }

}

2.5、Controller

package org.example.controller;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import org.example.entity.MsgResponse;
import org.example.entity.StudentVO;
import org.example.service.StudentService;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/count")
public class StudentController {

    private final StudentService studentService;

    public StudentController(StudentService studentService) {
        this.studentService = studentService;
    }

    @GetMapping("/student")
    public String countStudent() {
        MsgResponse response = new MsgResponse();
        List<StudentVO> studentVOList = studentService.countStudent();
        JSONArray jsonArray = new JSONArray();
        JSONObject jsonObject;
        for (StudentVO studentVO : studentVOList) {
            jsonObject = new JSONObject(true);
            jsonObject.put("total", studentVO.getTotal());
            jsonObject.put("cId", studentVO.getcId());
            jsonObject.put("cName", studentVO.getcName());
            jsonArray.add(jsonObject);
        }
        response.setData(jsonArray.toString());
        return response.toString();
    }

}

3、前端项目

• Vue2
• Axios
• Vue Router
• Echarts

添加依赖

npm install echarts --save

在main.js中配置

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts;

在项目中使用

<template>
    <el-container>
        <el-header style="font-size: 12px; border-bottom: 1px solid #dcdfe6;">
            <el-row>
                <el-col :span="2" style="text-align:left;">
                    <span style="font-size:18px;font-weight:bolder;color:#409EFF;">学生统计</span>
                </el-col>
                <el-col :span="1" :offset="21">
                    <el-dropdown class="header-setting">
                        <i class="el-icon-setting" style="margin: auto 5px auto 25px;font-size:20px;cursor: pointer;"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <el-link :underline="false" href="/">系统主页</el-link>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-link :underline="false" href="" target="_blank">帮助中心</el-link>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-link :underline="false">退出登录</el-link>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <el-main :style="windowInfo">
            <el-card>
                <div id="main1" style="width:100%;height:600px"></div>
            </el-card>
        </el-main>
    </el-container>
</template>
<script>
import { countStudent } from '../../api/countStudent';
export default {
    data() {
        return {
            windowInfo: {
                height: '',
                overflow: 'scroll'
            },
            categoryList: [],
            seriesDataList: [],
        }
    },
    mounted() {
        window.onresize = () => {
            window.removeEventListener('resize', this.getWindowInit())
        };
        this.getInfo();
    },
    destroyed() {
        window.removeEventListener('resize', this.getWindowInit());
    },
    methods: {
        //初始化窗口大小
        getWindowInit() {
            this.windowInfo.height = window.innerHeight - 60 + 'px';
        },
        //获取数据
        getInfo() {
            countStudent().then(res => {
                if (res.errcode == 0) {
                    let data = res.data;
                    data.forEach(item => {
                        this.categoryList.splice(this.categoryList.length, 0, item.parentName);
                        this.seriesDataList.splice(this.seriesDataList.length, 0, item.total);
                    })
                    this.drawEcharts();
                }
            })
        },
        //画图表
        drawEcharts() {
            let myChart = this.$echarts.init(document.getElementById("main1"));
            let option = {
                title: {
                    text: "统计班级的学生数量",
                },
                tooltip: {},
                legend: {
                    data: ["学生数量"],
                },
                xAxis: {
                    name: "所属班级",
                    data: this.categoryList,
                    axisLabel: {
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: "班级学生的数量",
                        type: "bar",
                        barWidth: '60%',
                        data: this.seriesDataList,
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        }
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            // 点击事件
            myChart.on('click', function (param) {
                console.log('param', param);
            });
        },
    }
}
</script>
<style>
.el-container {
    width: 100%;
    height: 100%;
}

.el-container>.el-header {
    background-color: #fff;
    color: #000;
    line-height: 60px;
    height: 60px;
}

.el-container>.el-main {
    height: calc(100vh-60px);
    overflow: auto;
}
</style>