java

关注公众号 jb51net

关闭
首页 > 软件编程 > java > springboot从数据库获取数据,用echarts显示

springboot如何从数据库获取数据,用echarts显示(数据可视化)

作者:only-qi

这篇文章主要介绍了springboot如何从数据库获取数据,用echarts显示(数据可视化),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

上图是实现的效果图:

Echarts插件,对于图表操控是十分方便的,但是一般生产环境

是把数据通过Json的格式传到HTML页面,

利用Ajax解析Json,所以我们来模拟一下该过程

1.下载Echarts的js文件和Jquery.js

Echarts地址:http://echarts.baidu.com/download.html

Jquery地址:https://jquery.com/download/

2.controller里面的代码

 @RequestMapping(value = "/kucun")
    @ResponseBody
    public List<PurchasingManagement> kucunData(Model model){
     List<PurchasingManagement> purcahseManagements=purchasingManagementService.findAll();
    //PurchasingManagement是我pojo中创建的实体
        System.err.println(purcahseManagements.toString());
        return purcahseManagements;
    }
    @GetMapping(value = "/kucundata")
    public String echarts4(Model model){
        System.err.println("========开始");
        return "purchasing-kucun";
    }

3.前端代码

http://localhost:8080/kucundata

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>图表</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
 
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
    $(document).ready(function(){
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var names=[];    //横坐标数组(实际用来盛放X轴坐标值)
        var values=[];    //纵坐标数组(实际用来盛放Y坐标值)
        $.ajax({
            type : "post",
            async : true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
            url : "/kucun",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容,result即为服务器返回的json对象
                if (result) {
                    for(var i=0;i<result.length;i++){
                        names.push(result[i].nameandnum);
                        values.push(result[i].purchasingamount);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title: {
                            text: '库存数据'
                        },
                        tooltip: {},
                        legend: {
                            data:['數量']
                        },
                        xAxis: {
                            data: names
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '數量',//薪资 series not exists. Legend data should be same with series name or data name.
                            type: 'bar',
                            data: values
                        }]
                    });
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });
 
</script>
 
</body>
</html>
 

这是一个很简单的小例子,仔细看看,肯定可以实现的!!!

持久层无论是mybatis,还是jpa都可以的。

就是遍历数据库,然后存入数组,最后传给前端,如此而已。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文