欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ò)誤或未考慮完全的地方,望不吝賜教

上圖是實(shí)現(xiàn)的效果圖:

Echarts插件,對(duì)于圖表操控是十分方便的,但是一般生產(chǎn)環(huán)境

是把數(shù)據(jù)通過(guò)Json的格式傳到HTML頁(yè)面,

利用Ajax解析Json,所以我們來(lái)模擬一下該過(guò)程

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("========開(kāi)始");
        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è)具備大小(寬高)的Dom -->
<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)畫(huà)
        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ì)鎖住瀏覽器,用戶(hù)其他操作必須等待請(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)畫(huà)
                    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ù)組,最后傳給前端,如此而已。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Java 回調(diào)函數(shù)深入理解

    Java 回調(diào)函數(shù)深入理解

    這篇文章主要介紹了 Java 回調(diào)函數(shù)深入理解的相關(guān)資料,需要的朋友可以參考下
    2017-03-03
  • Java泛型定義與用法實(shí)例詳解

    Java泛型定義與用法實(shí)例詳解

    這篇文章主要介紹了Java泛型定義與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Java中泛型的概念、原理、定義、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2018-08-08
  • java多線程實(shí)現(xiàn)取款小程序

    java多線程實(shí)現(xiàn)取款小程序

    這篇文章主要為大家詳細(xì)介紹了java多線程實(shí)現(xiàn)取款小程序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • SpringBoot結(jié)合Redis實(shí)現(xiàn)接口冪等性的示例代碼

    SpringBoot結(jié)合Redis實(shí)現(xiàn)接口冪等性的示例代碼

    本文主要介紹了SpringBoot結(jié)合Redis實(shí)現(xiàn)接口冪等性的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • Java實(shí)現(xiàn)帶GUI的氣泡詩(shī)詞效果

    Java實(shí)現(xiàn)帶GUI的氣泡詩(shī)詞效果

    這篇文章主要為大家介紹了如何利用Java實(shí)現(xiàn)帶GUI的氣泡詩(shī)詞效果,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Java有一定幫助,感興趣的可以了解一下
    2022-12-12
  • Java使用pulsar-flink-connector讀取pulsar catalog元數(shù)據(jù)代碼剖析

    Java使用pulsar-flink-connector讀取pulsar catalog元數(shù)據(jù)代碼剖析

    這篇文章主要介紹了Java使用pulsar-flink-connector讀取pulsar catalog元數(shù)據(jù)代碼剖析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-08-08
  • Spring中@RefreshScope注解的處理方法詳解

    Spring中@RefreshScope注解的處理方法詳解

    這篇文章主要介紹了Spring中@RefreshScope注解的處理方法詳解,spring啟動(dòng)時(shí)會(huì)調(diào)用ClassPathBeanDefinitionScanner.java類(lèi)中的doScan()對(duì)包路徑下的所有class進(jìn)行掃描,獲取bean的定義,同時(shí)對(duì)bean的@RefreshScope(@Scope的父類(lèi))進(jìn)行處理,需要的朋友可以參考下
    2023-10-10
  • Java?SpringBoot操作Redis

    Java?SpringBoot操作Redis

    這篇文章主要介紹了SpringBoot如何操作Redis,文章中有詳細(xì)的代碼示例,有一定的參考價(jià)值,感興趣的同學(xué)可以參考閱讀
    2023-04-04
  • JavaWeb讀取配置文件的四種方法

    JavaWeb讀取配置文件的四種方法

    這篇文章主要介紹了JavaWeb讀取配置文件的4種方法,方法一采用ServletContext讀取,方法二采用ResourceBundle類(lèi)讀取配置信息,方法三采用ClassLoader方式進(jìn)行讀取配置信息,對(duì)javaweb讀取配置文件的四種方法感興趣的朋友參考下吧
    2018-03-03
  • Java基礎(chǔ)之Comparable與Comparator概述

    Java基礎(chǔ)之Comparable與Comparator概述

    這篇文章主要介紹了Java基礎(chǔ)之Comparable與Comparator詳解,文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)java基礎(chǔ)的小伙伴們有非常好的幫助,需要的朋友可以參考下
    2021-04-04

最新評(píng)論