springboot如何從數(shù)據(jù)庫(kù)獲取數(shù)據(jù),用echarts顯示(數(shù)據(jù)可視化)
上圖是實(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)文章
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-06Java實(shí)現(xiàn)帶GUI的氣泡詩(shī)詞效果
這篇文章主要為大家介紹了如何利用Java實(shí)現(xiàn)帶GUI的氣泡詩(shī)詞效果,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Java有一定幫助,感興趣的可以了解一下2022-12-12Java使用pulsar-flink-connector讀取pulsar catalog元數(shù)據(jù)代碼剖析
這篇文章主要介紹了Java使用pulsar-flink-connector讀取pulsar catalog元數(shù)據(jù)代碼剖析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08Java基礎(chǔ)之Comparable與Comparator概述
這篇文章主要介紹了Java基礎(chǔ)之Comparable與Comparator詳解,文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)java基礎(chǔ)的小伙伴們有非常好的幫助,需要的朋友可以參考下2021-04-04