# 智慧社区管理系统-数据统计分析-报表统计管理

最新推荐文章于 2024-11-04 20:33:37 发布

雷大胖胖

最新推荐文章于 2024-11-04 20:33:37 发布

阅读量315

点赞数

本文链接：https://blog.csdn.net/m0_74795259/article/details/128167569

版权

一后端

1:entity

package com.woniu.community.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Bar {
    private  Integer id;
    private  String name;
    private Integer nums;
}

2:BarMapper

package com.woniu.community.mapper;

import com.woniu.community.entity.Bar;

import java.util.List;

public interface BarMapper {
    List<Bar> selectAll();
}

2:IBarService

package com.woniu.community.service;

import java.util.Map;

public interface IBarService {
    Map getBar();
}

2:BarServiceImpl

package com.woniu.community.service.impl;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.woniu.community.entity.Bar;
import com.woniu.community.mapper.BarMapper;
import com.woniu.community.service.IBarService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class BarServiceImpl implements IBarService {

    @Autowired(required = false)
    protected BarMapper barMapper;
    @Override
    public Map getBar() {

        List<Bar> bars = barMapper.selectAll();
       List<String> names=new ArrayList<String>();
//       bars.forEach(e->{
//           names.add(e.getName());
//       });
        for (Bar bar : bars) {
            names.add(bar.getName());
        }
        List<Integer> nums=new ArrayList<Integer>();
        for (Bar bar : bars) {
          nums.add(bar.getNums());
        }
//        bars.forEach(e->{
//            nums.add(e.getNums());
//
//        });
        Map  map=new HashMap();
        map.put("names",names);
        map.put("nums",nums);
        return map;
    }
}

2:Barcontroller

package com.woniu.community.controller;

import com.woniu.community.service.IBarService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@RestController
@RequestMapping("/bar")
@CrossOrigin(origins = "*")
public class BarController {
    @Autowired
    private IBarService iBarService;
    @RequestMapping("/list")
    Map getBar(){
        return iBarService.getBar();
    }
}

2:BarMapper.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="com.woniu.community.mapper.BarMapper">
    <resultMap id="barMap" type="Bar">
        <result column="id" property="id"/>
        <result column="name" property="name"/>
        <result column="nums" property="nums"/>
    </resultMap>
    <select id="selectAll" resultMap="barMap">
        SELECT
            count(re.id) as nums,ret.name
        FROM
            repairtype ret
                LEFT JOIN REPAIR re ON ret.id = re.com_id

        GROUP BY  ret.id
    </select>
</mapper>

二前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
    <script src="assets/date_picker.js"></script>
    <script src="assets/echarts.min-5.4.0.js"></script>
</head>
<body>
    <div id="app">
        <div id="bar" ref="bar" style="width: 1000px;height:400px;">

        </div>
    </div>
</body>
    <script>
        new Vue({
            el:'#app',
            data:{
                xAxisData:null,
                seriesData:null,

            },
            methods:{
                myEcharts(){
                  var myEcharts=  echarts.init(this.$refs.bar);
                    option = {
                        xAxis: {
                            data: this.xAxisData},
                        yAxis: {},
                        series: [
                            {
                               type:'bar',
                                data:this.seriesData
                            }
                        ]
                    };
                    myEcharts.setOption(option);
                },
                getBarList(){
                    axios.get("http://localhost:8080/bar/list").then(response=>{
                        this.xAxisData=response.data.names;
                        this.seriesData=response.data.nums;
                        this.myEcharts();

                    })

                }
            },
           created:function () {
            this.getBarList();
           }
        });
    </script>
</html>