我们还是接着前面的内容，我把新增的功能代码贴出来，供大家学习参考。

bookController.java

package com.shrimpking.controller;


import cn.hutool.core.collection.CollectionUtil;
import cn.hutool.core.util.ObjectUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.shrimpking.annotation.AutoLog;
import com.shrimpking.pojo.Book;
import com.shrimpking.pojo.User;
import com.shrimpking.req.BookParams;
import com.shrimpking.req.QueryParams;
import com.shrimpking.res.Result;
import com.shrimpking.service.BookService;
import com.sun.javafx.collections.MappingChange;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

/**
 * <p>
 * 图书表 前端控制器
 * </p>
 *
 * @author shrimpking
 * @since 2023-11-12
 */
@RestController
@RequestMapping("/book")
public class BookController {

    @Autowired
    private BookService bookService;

    /**
     * 有查询条件时，获取分页数据
     * @param queryParams
     * @return
     */
    @GetMapping("/searchPage")
    public Result findBySearchPage(BookParams bookParams){
        IPage<Book> list = this.bookService.findBySearchPage(bookParams);
        return Result.success(list);
    }

    @AutoLog("新增图书信息")
    @PostMapping("/save")
    public Result save(@RequestBody Book book){
        //先查询有无同名图书
        LambdaQueryWrapper<Book> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(Book::getName,book.getName());
        int count = this.bookService.count(queryWrapper);
        if(count > 0) return Result.error("此图书已存在");

        boolean save = this.bookService.save(book);
        if(!save) return Result.error("保存失败");
        return Result.success("保存成功");
    }

    @AutoLog("更新图书信息")
    @PostMapping("/update")
    public Result update(@RequestBody Book book){
        //先查询有无同名图书
        LambdaQueryWrapper<Book> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(Book::getName,book.getName());
        Book one = this.bookService.getOne(queryWrapper);
        if(one != null && !one.getId().equals(book.getId())){
            return Result.error("此图书已存在");
        }

        boolean save = this.bookService.updateById(book);
        if(!save) return Result.error("更新失败");
        return Result.success("更新成功");
    }

    @AutoLog("删除图书信息")
    @DeleteMapping("/delete")
    public Result delete(@RequestParam("id") Integer id){
        boolean remove = this.bookService.removeById(id);
        if(!remove) return Result.error("删除失败");
        return Result.success("删除成功");
    }

    @GetMapping("/echarts/chartOne")
    public Result chartOne(){
        //获取全部图书
        List<Book> books = this.bookService.findAll();
        //
        Map<String, Long> collects = books.stream()
                //先从数据中过滤，不包含图书分类的坏数据
                .filter(book -> ObjectUtil.isNotEmpty(book.getTypeName()))
                //根据图书分类，分组统计
                .collect(Collectors.groupingBy(Book::getTypeName, Collectors.counting()));
        //返回前端的数据
        List<Map<String,Object>> mapList = new ArrayList<>();
        //统计的数据不为空时
        if(CollectionUtil.isNotEmpty(collects)){
            //循环
            for (String key : collects.keySet())
            {
                Map<String,Object> map = new HashMap<>();
                map.put("name",key);
                map.put("value",collects.get(key));
                mapList.add(map);
            }
        }
        return Result.success(mapList);
    }

    @GetMapping("/echarts/chartTwo")
    public Result chartTwo(){
        //获取全部图书
        List<Book> books = this.bookService.findAll();
        //
        Map<String, Long> collects = books.stream()
                //先从数据中过滤，不包含图书分类的坏数据
                .filter(book -> ObjectUtil.isNotEmpty(book.getTypeName()))
                //根据图书分类，分组统计
                .collect(Collectors.groupingBy(Book::getTypeName, Collectors.counting()));
        //返回封装的数据
        List<String> xAxis = new ArrayList<>();
        List<Long> yAxis = new ArrayList<>();
        if(CollectionUtil.isNotEmpty(collects)){
            for (String key : collects.keySet())
            {
                xAxis.add(key);
                yAxis.add(collects.get(key));
            }
        }
        Map<String,Object> map = new HashMap<>();
        map.put("xAxis",xAxis);
        map.put("yAxis",yAxis);

        return Result.success(map);
    }
}

homeview.vue

<template>
    <div>
        <h2>系统公告</h2>
        <el-row style="margin-top: 15px;">
            <el-col :span="12">
                <el-collapse v-model="activeName" accordion>
                    <el-collapse-item
                            v-for="item in noticeData"
                            :title="item.name"
                            :name="item.id">
                        <div style="padding:0 20px;"><strong>公告内容：</strong>{{ item.content }}</div>
                        <div style="padding:0 20px;"><strong>发布时间：</strong>{{ item.pubDate }}</div>
                    </el-collapse-item>
                </el-collapse>
            </el-col>
            <el-col :span="12">
                <div id="chartOne" style="width:100%;height: 345px;margin-left: 5px;"></div>
            </el-col>
        </el-row>
        <el-row style="margin-top: 15px;">
            <el-col :span="12">
                <div id="chartTwo" style="width:100%;height: 350px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartThree" style="width:100%;height: 350px;"></div>
            </el-col>
        </el-row>
    </div>

</template>

<script>
    import request from "@/utils/request";
    import * as echarts from 'echarts';

    export default {
        name: "HomeView",
        data() {
            return {
                activeName: '',
                noticeData:[]
            };
        },
        methods:{
            getData(){
                request.get('/notice/findTop').then(res=>{
                    if(res.code === '200'){
                        this.noticeData = res.data.records;
                        //默认第一个新闻打开
                        this.activeName = res.data.records[0].id;
                    }
                })
            },
            //获取图表一数据
            getChartOneData(){
                request.get('/book/echarts/chartOne').then(res=>{
                    if(res.code === '200'){
                        this.initChartOne(res.data);
                    }else {
                        this.$message.error(res.msg);
                    }
                });

            },
            //渲染图表一
            initChartOne(data){
                let chartOne = document.getElementById('chartOne');
                let myChart = echarts.init(chartOne);
                let option;

                option = {
                    title: {
                        text: '图书统计（饼图）',
                        subtext: '统计维度：按图书分类',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right'
                    },
                    series: [
                        {
                            name: '图书分类',
                            type: 'pie',
                            radius: '60%',
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                option && myChart.setOption(option);
            },
            //method end
            //获取图表二数据
            getChartTwoData(){
                request.get('/book/echarts/chartTwo').then(res=>{
                    if(res.code === '200'){
                        this.initChartTwo(res.data.xAxis,res.data.yAxis);
                    }else {
                        this.$message.error(res.msg);
                    }
                });
            },
            initChartTwo(xAxis,yAxis){
                let chartTwo = document.getElementById('chartTwo');
                let myChart = echarts.init(chartTwo);
                let option;

                option = {
                    title: {
                        text: '图书统计（柱状图）',
                        subtext: '统计维度：按图书分类',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: yAxis,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontWeight: 'bold',
                                    fontSize: 16
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            },
            //method end
            //获取图表三数据
            getChartThreeData(){
                request.get('/book/echarts/chartTwo').then(res=>{
                    if(res.code === '200'){
                        this.initChartThree(res.data.xAxis,res.data.yAxis);
                    }else {
                        this.$message.error(res.msg);
                    }
                });
            },
            initChartThree(xAxis,yAxis){
                let chartThree = document.getElementById('chartThree');
                let myChart = echarts.init(chartThree);
                let option;

                option = {
                    title: {
                        text: '图书分类（折线图）',
                        subtext: '统计维度：按图书分类',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: yAxis,
                            type: 'line',
                            emphasis:{
                                label:{
                                    show:true,
                                    fontSize:16,
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }
            //method end
        },
        mounted(){
            //获取数据
            this.getData();
            //获取图表一
            this.getChartOneData();
            this.getChartTwoData();
            this.getChartThreeData();
        }
    }
</script>

<style lang="scss" scoped>

</style>

package.json

{
  "name": "vueweb",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.6.1",
    "core-js": "^3.8.3",
    "echarts": "^5.1.2",
    "element-ui": "^2.15.14",
    "mockjs": "^1.1.0",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^5.0.0",
    "@vue/cli-service": "^5.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

main.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store'
import router from "@/router";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";
import * as echarts from 'echarts'
import '@/assets/global.css'

Vue.prototype.$echarts = echarts;
axios.defaults.baseURL='http://localhost:8089';
Vue.prototype.$http = axios;
Vue.use(ElementUI,{size:'small'});
Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  store,
  router
}).$mount('#app');

测试

首页

 图书分类

 图书管理

# vue.js # echarts # 前端
Logo
DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

cover

KingbaseES数据库：医疗信创潮涌沅江，国产化信创打造医疗新质生产力

avatar DAMO开发者矩阵
cover

告别迁移焦虑：金仓KDMS V4带你轻松搞定数据库国产化替代

avatar DAMO开发者矩阵
cover

KingbaseES数据库在常德二院全栈国产化信创中产生新质生产力,医疗信创的部署如何实现，如何操作？

avatar DAMO开发者矩阵