springBoot + Vue + Echarts 实现饼状图与柱状图

注意：使用前需引入echarts.js echarts官网可以下载前端页面<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>货物种类管理页面</title><link rel="stylesheet" href="../bootstrap/

野地蒙面侠

2692人浏览 · 2021-06-29 14:41:15

野地蒙面侠 · 2021-06-29 14:41:15 发布

注意：使用前需引入echarts.js echarts官网可以下载

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>货物种类管理页面</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background: #2C2255;
            background: url(../image/水漫漫.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
            font-size: 20px;
            font-family: STXingkai;
            color: #59ec0a;
        }

        a {
            text-decoration: none;
        }

        button {
            margin: 10px;
        }

        th {
            width: 300px;

        }

        td {
            width: 200px;
            height: 80px;
        }
    </style>


</head>
<body>
<h1>货物种类管理页面</h1>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>


<!--引入js文件-->
<script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
<script src="../bootstrap/js/bootstrap.js" ></script>
<script src="../vue/vue.js" charset="utf-8"></script>
<script src="../echarts/echarts/dist/echarts.js"></script>
<script type="text/javascript">
    //柱状图
    // 基于准备好的dom，初始化echarts实例
    var vm=new Vue({
        el:"#main",
        data:{
            name:["中国","美国"],
            type:["2","1"]
        },
        methods:{	//自定义方法
            getBarChart:function(){
                $.get("../ItemsTypeController/selItemsType",{},function(data){	//通过ajax访问后端数据,进行交互
                    var content=data.list;	//定义data变量,把后端的数据赋给data
                    vm.name=[];
                    vm.type=[];
                    for(var i=0;i<content.length;i++){		//for循环遍历数据
                        vm.name.push(content[i].itemsTypeName);
                        vm.type.push(content[i].itemsAllCounts);
                    }
                    console.log(vm.name);
                    console.log(vm.type);
                    var myChart = echarts.init(document.getElementById('main'));

                    myChart.setOption({
                        title: {
                            text: '商品库存柱状图'
                        },
                        tooltip: {},
                        legend: {
                            data: ['库存']
                        },
                        xAxis: {
                            data:vm.name
                        },
                        yAxis: {
                        },
                        series: [{
                            name: '库存',
                            type: 'bar',
                            data:vm.type
                        }]
                    });
                })
            }
        },
        mounted(){
            this.getBarChart();		//自调用getPie()函数
            this.timer=setInterval(this.getBarChart,500000);	//每秒进行表格数据的更新
        }

    });








    /*//饼状图区域
    // 基于准备好的dom，初始化echarts实例
    var vm=new Vue({
        el:"#main",
        data:{
            dat:[

            ]
        },
        methods:{	//自定义方法
            getPie:function(){
                $.get("../ItemsTypeController/selItemsType",{},function(data){	//通过ajax访问后端数据,进行交互
                    //alert(JSON.stringify(data));
                    var data=data.list;	//定义data变量,把后端的数据赋给data
                    console.log(data);
                    var len=data.length;
                    vm.dat=[];		//清空dat数值的数据,保证数据的准确性
                    for(var i=0;i<len;i++){		//for循环遍历数据
                        var info={};
                        //后端的字段也要变为value:---,name:---
                        info.name=data[i].itemsTypeName;
                        info.value=data[i].itemsAllCounts;
                        vm.dat.push(info);		//循环的数据一值追加到vm.dat数组里面
                    }
                    console.log(vm.dat);
                    let myChart = echarts.init(document.getElementById('main'));

                    myChart.setOption({
                        series : [


                            {
                                name: '货物数量饼状图',
                                type: 'pie',    // 设置图表类型为饼图
                                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                center: ['50%', '60%'],
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                                    }
                                },
                                data:vm.dat          // 数据数组，name 为数据项名称，value 为数据项值
                            }
                        ]
                    })
                })
            }
        },
        mounted(){
            this.getPie();		//自调用getPie()函数
            this.timer=setInterval(this.getPie,500000);	//每秒进行表格数据的更新
        }

    });*/

</script>

</body>
</html>

控制层

package com.buba.reportForm.controller;

import com.buba.reportForm.pojo.ItemsType;
import com.buba.reportForm.service.ItemsTypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 货物种类控制层
 */
@RestController
@RequestMapping("/ItemsTypeController")
public class ItemsTypeController {

    private ItemsTypeService itemsTypeService;


    /**
     * 查询货物种类及数量方法
     */
    @RequestMapping("/selItemsType")
    public Map<String,Object> selItemsType(){
        Map<String,Object> map = new HashMap<>();
        //查询数据库中货物种类表的数据
        List<ItemsType> list = itemsTypeService.selItemsType();
        //表联查查询数据库中货物种类表的数据以及对应的商品的库存
        List<ItemsType> list2 = itemsTypeService.selItemsTypeAndCounts();
        //遍历货物种类list
        for (ItemsType itemsType:list) {
            //创建一个Integer变量接受货物的库存量
            Integer count = 0;
            //遍历携带库存量的list
            for (ItemsType itemsType2:list2) {
                //判断两个list中相同的ItemsTypeId属性
                if (itemsType.getItemsTypeId().equals(itemsType2.getItemsTypeId())){
                    //如果相同 改变count的值
                    count+=itemsType2.getItemsCounts();
                }
            }
            //把最终的count赋值给货物种类对象中的总库存量属性
            itemsType.setItemsAllCounts(count);
        }

        map.put("list",list);
        return map;
    }


    @Autowired
    public void setItemsTypeService(ItemsTypeService itemsTypeService) {
        this.itemsTypeService = itemsTypeService;
    }
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^