快捷導(dǎo)航

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

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

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

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)建的實(shí)體
        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準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
    $(document).ready(function(){
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        var myChart = echarts.init(document.getElementById('main'));
        //數(shù)據(jù)加載完之前先顯示一段簡(jiǎn)單的loading動(dòng)畫
        myChart.showLoading();
        var names=[];    //橫坐標(biāo)數(shù)組（實(shí)際用來(lái)盛放X軸坐標(biāo)值）
        var values=[];    //縱坐標(biāo)數(shù)組（實(shí)際用來(lái)盛放Y坐標(biāo)值）
        $.ajax({
            type : "post",
            async : true,            //異步請(qǐng)求（同步請(qǐng)求將會(huì)鎖住瀏覽器，用戶其他操作必須等待請(qǐng)求完成才可以執(zhí)行）
            url : "/kucun",    //請(qǐng)求發(fā)送到dataActiont處
            data : {},
            dataType : "json",        //返回?cái)?shù)據(jù)形式為json
            success : function(result) {
                //請(qǐng)求成功時(shí)執(zhí)行該函數(shù)內(nèi)容，result即為服務(wù)器返回的json對(duì)象
                if (result) {
                    for(var i=0;i<result.length;i++){
                        names.push(result[i].nameandnum);
                        values.push(result[i].purchasingamount);
                    }
                    myChart.hideLoading();    //隱藏加載動(dòng)畫
                    myChart.setOption({        //加載數(shù)據(jù)圖表
                        title: {
                            text: '庫(kù)存數(shù)據(jù)'
                        },
                        tooltip: {},
                        legend: {
                            data:['數(shù)量']
                        },
                        xAxis: {
                            data: names
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            // 根據(jù)名字對(duì)應(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) {
                //請(qǐng)求失敗時(shí)執(zhí)行該函數(shù)
                alert("圖表請(qǐng)求數(shù)據(jù)失敗!");
                myChart.hideLoading();
            }
        });//end ajax
    });
 
</script>
 
</body>
</html>

這是一個(gè)很簡(jiǎn)單的小例子，仔細(xì)看看，肯定可以實(shí)現(xiàn)的?。?！

持久層無(wú)論是mybatis，還是jpa都可以的。

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