springboot如何從數(shù)據(jù)庫獲取數(shù)據(jù),用echarts顯示(數(shù)據(jù)可視化)

更新時間：2023年12月22日 09:30:53 作者：only-qi

這篇文章主要介紹了springboot如何從數(shù)據(jù)庫獲取數(shù)據(jù),用echarts顯示(數(shù)據(jù)可視化),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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中創(chuàng)建的實體
        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準備一個具備大?。▽捀撸┑腄om -->
<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'));
        //數(shù)據(jù)加載完之前先顯示一段簡單的loading動畫
        myChart.showLoading();
        var names=[];    //橫坐標數(shù)組（實際用來盛放X軸坐標值）
        var values=[];    //縱坐標數(shù)組（實際用來盛放Y坐標值）
        $.ajax({
            type : "post",
            async : true,            //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執(zhí)行）
            url : "/kucun",    //請求發(fā)送到dataActiont處
            data : {},
            dataType : "json",        //返回數(shù)據(jù)形式為json
            success : function(result) {
                //請求成功時執(zhí)行該函數(shù)內(nèi)容，result即為服務(wù)器返回的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({        //加載數(shù)據(jù)圖表
                        title: {
                            text: '庫存數(shù)據(jù)'
                        },
                        tooltip: {},
                        legend: {
                            data:['數(shù)量']
                        },
                        xAxis: {
                            data: names
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            // 根據(jù)名字對應(yīng)到相應(yīng)的系列
                            name: '數(shù)量',//薪資 series not exists. Legend data should be same with series name or data name.
                            type: 'bar',
                            data: values
                        }]
                    });
                }
            },
            error : function(errorMsg) {
                //請求失敗時執(zhí)行該函數(shù)
                alert("圖表請求數(shù)據(jù)失敗!");
                myChart.hideLoading();
            }
        });//end ajax
    });
 
</script>
 
</body>
</html>

這是一個很簡單的小例子，仔細看看，肯定可以實現(xiàn)的！??！

持久層無論是mybatis，還是jpa都可以的。

就是遍歷數(shù)據(jù)庫，然后存入數(shù)組，最后傳給前端，如此而已。