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

一、需求

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

二、具体实现

1、数据库设计

班级表：classes

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

学生表：student

字段名	类型	长度	是否允许为空	是否为主键	说明
sid	int	0	否	是	主键，自增
name	varchar	255	是	否	姓名
sex	int	0	是	否	性别
age	int	0	是	否	年龄
address	varchar	255	是	否	地址
cid	int	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 cNamefrom student s join classes c on s.cid = c.cidgroup 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;}@Overridepublic 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>