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

基于springboot實現(xiàn)數(shù)據(jù)可視化的示例代碼

 更新時間：2022年07月11日 09:18:41   作者：妙烏  
本文主要介紹了基于springboot實現(xiàn)數(shù)據(jù)可視化，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧<BR>

前言：

數(shù)據(jù)可視化就是將數(shù)據(jù)轉(zhuǎn)換成圖或表等，以一種更直觀的方式展現(xiàn)和呈現(xiàn)數(shù)據(jù)。通過“可視化”的方式，我們看不懂的數(shù)據(jù)通過圖形化的手段進行有效地表達，準確高效、簡潔全面地傳遞某種信息，甚至我們幫助發(fā)現(xiàn)某種規(guī)律和特征，挖掘數(shù)據(jù)背后的價值?，F(xiàn)在，提出一種方案，基于springboot框架，將excel表格中的數(shù)據(jù)提取出來，前端使用echarts框架，通過柱形圖和餅狀圖對數(shù)據(jù)進行直觀展示

Excel數(shù)據(jù)源展示

創(chuàng)建Registration.xlsx表格和fruit_sales頁面，同時創(chuàng)建相關水果銷售數(shù)據(jù)

在這里插入圖片描述

結(jié)構(gòu)一覽

在這里插入圖片描述

?? echarts,min.js下載鏈接

一、讀取Excel表格中的數(shù)據(jù)

本項目使用springboot整合hutool第三方類庫實現(xiàn)對excel文件中數(shù)據(jù)采用流的方式進行讀取，詳情參看hutool官方文檔

Hutool官方文檔鏈接

1.1 創(chuàng)建springboot工程，導入相關依賴

        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.4.7</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.16</version>
        </dependency>

        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>3.16</version>
        </dependency>

1.2 創(chuàng)建測試類TestExcel

package com.allin.data_view;

import cn.hutool.poi.excel.ExcelReader;
import cn.hutool.poi.excel.ExcelUtil;
import org.apache.poi.util.IOUtils;
import org.junit.Test;
import org.springframework.mock.web.MockMultipartFile;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.util.List;
import java.util.Map;
import java.util.Set;

public class TestExcel {

    @Test
    public  void test() throws Exception{
        File file = new File("D:\\2022learn\\springboot-test\\springboot-office\\data_view\\Registration.xlsx");

        FileInputStream input = new FileInputStream(file);

        MultipartFile multipartFile =new MockMultipartFile("file", file.getName(), "text/plain", IOUtils.toByteArray(input));
        // 1.獲取上傳文件輸入流
        InputStream inputStream = null;
        try{
            inputStream = multipartFile.getInputStream();
        }catch (Exception e){
        }
        // 2.應用HUtool ExcelUtil獲取ExcelReader指定輸入流和sheet
        ExcelReader excelReader = ExcelUtil.getReader(inputStream, "fruit_sales");
        // 可以加上表頭驗證
        // 3.讀取第二行到最后一行數(shù)據(jù)
        //List<List<Object>> read = excelReader.read(1, excelReader.getRowCount());
        List<Map<String,Object>> read = excelReader.readAll();
        for (Map<String,Object> objects : read) {
            Set<String> keys = objects.keySet();
            for(String key:keys){
                System.out.println(key + ":" + objects.get(key));
            }
            System.out.println();
        }
    }
}

?? 測試結(jié)果：

在這里插入圖片描述

二、采用柱形圖顯示Excel表格數(shù)據(jù)

在這里插入圖片描述

2.1 前端代碼

?? 在springboot框架中創(chuàng)建index.html,使用ajax動態(tài)獲取后端數(shù)據(jù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts-bar</title>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大?。▽捀撸┑腄om -->
<div id="main" style="width: 1400px;height:500px;"></div>
<script type="text/javascript">
    // 基于準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定圖表的配置項和數(shù)據(jù)
    myChart.setOption({
        title: {
            text: '水果銷售情況柱形圖'
        },
        tooltip: {},
        legend: {
            data:['銷量']
        },
        xAxis: {
            data: [],
            axisLabel:{
                interval: 0
            }
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'bar',
            data: []
        }]
    });

    myChart.showLoading();

    var names=[];    //類別數(shù)組（實際用來盛放X軸坐標值）
    var nums=[];    //銷量數(shù)組（實際用來盛放Y坐標值）

    $.ajax({
        type : "get",
        async : false,            //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執(zhí)行）
        url : "list",    //請求發(fā)送到TestServlet處
        data : {},
        dataType : "json",        //返回數(shù)據(jù)形式為json
        success : function(result) {
            //請求成功時執(zhí)行該函數(shù)內(nèi)容，result即為服務器返回的json對象
            var data = result.data;
            if (data) {
                for(var i=0;i<data.length;i++){
                    names.push(data[i].name);    //挨個取出類別并填入類別數(shù)組
                }
                for(var i=0;i<data.length;i++){
                    nums.push(data[i].count);    //挨個取出銷量并填入銷量數(shù)組
                }
                myChart.hideLoading();    //隱藏加載動畫
                myChart.setOption({        //加載數(shù)據(jù)圖表
                    xAxis: {
                        data: names
                    },
                    series: [{
                        // 根據(jù)名字對應到相應的系列
                        name: '銷量',
                        data: nums
                    }]
                });

            }
        },
        error : function() {
            //請求失敗時執(zhí)行該函數(shù)
            alert("圖表請求數(shù)據(jù)失敗!");
            myChart.hideLoading();
        }
    })
</script>
</body>
</html>

2.2 后端代碼

2.2.1 Controller層代碼

?? 前端代碼會發(fā)送list請求到后端請求數(shù)據(jù)，controller層響應請求，通過service層獲取表格數(shù)據(jù)，返回map類型的數(shù)據(jù)

package com.allin.controller;

import com.allin.service.GetDataFromExcel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping(value = "/")
public class IndexController {

    @Autowired
    private GetDataFromExcel getDataFromExcel;

    @RequestMapping(value = "", method = RequestMethod.GET)
    public String index(){
        return "index";
    }

    @RequestMapping(value = "list", method = RequestMethod.GET)
    @ResponseBody
    public Map<String,Object> getList() throws Exception {
        Map<String,Object> map = new HashMap<>();
        List<Map<String,Object>> list = getDataFromExcel.getData();
        map.put("msg","ok");
        map.put("data",list);
        list.forEach(System.out::println);

        return map;
    }
}

2.1.3 Service層代碼

?? 在service包下創(chuàng)建GetDataFromExcel類用于從Excel表格中獲取數(shù)據(jù)

package com.allin.service;

import cn.hutool.poi.excel.ExcelReader;
import cn.hutool.poi.excel.ExcelUtil;
import org.apache.poi.util.IOUtils;
import org.springframework.mock.web.MockMultipartFile;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.util.List;
import java.util.Map;

@Service
public class GetDataFromExcel {
    public List<Map<String,Object>> getData() throws Exception{
        File file = new File("D:\\2022learn\\springboot-test\\springboot-office\\data_view\\Registration.xlsx");

        FileInputStream input = new FileInputStream(file);

        MultipartFile multipartFile =new MockMultipartFile("file", file.getName(), "text/plain", IOUtils.toByteArray(input));
        // 1.獲取上傳文件輸入流
        InputStream inputStream = null;
        try{
            inputStream = multipartFile.getInputStream();
        }catch (Exception e){
        }
        // 2.應用HUtool ExcelUtil獲取ExcelReader指定輸入流和sheet
        ExcelReader excelReader = ExcelUtil.getReader(inputStream, "fruit_sales");
        // 可以加上表頭驗證
        // 3.讀取第二行到最后一行數(shù)據(jù)
        //List<List<Object>> read = excelReader.read(1, excelReader.getRowCount());
        List<Map<String,Object>> read = excelReader.readAll();
        return read;
    }
}

三、采用餅狀圖顯示Excel表格數(shù)據(jù)

在這里插入圖片描述

3.1 前端代碼

?? 在springboot框架中創(chuàng)建index1.html,使用ajax動態(tài)獲取后端數(shù)據(jù)

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" style="height: 100%">
<head>
  <meta charset="utf-8">
  <title>echarts-pie</title>
  <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <script src="js/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
  <div id="main" style="height: 100%"></div>

  <script type="text/javascript">
    var mychart1 = echarts.init(document.getElementById('main'));

    mychart1.setOption({
      title: {
        text: '水果銷量統(tǒng)計餅狀圖',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: []
        }],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    });

    mychart1.showLoading();

    var names=[];
    var nums=[];

    $.ajax({
      type : "get",
      async : false,            //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執(zhí)行）
      url : "list",    //請求發(fā)送到TestServlet處
      data : {},
      dataType : "json",        //返回數(shù)據(jù)形式為json
      success : function(result) {
        //請求成功時執(zhí)行該函數(shù)內(nèi)容，result即為服務器返回的json對象
        var data = result.data;
        if (data) {
          for(var i=0;i<data.length;i++){
            names.push(data[i].name);    //挨個取出類別并填入類別數(shù)組
            nums[i] = {value: data[i].count,name:data[i].name};
          }
/*          for(var i=0;i<data.length;i++){
            nums.push(data[i].count);    //挨個取出銷量并填入銷量數(shù)組
          }*/
          mychart1.hideLoading();    //隱藏加載動畫
          mychart1.setOption({        //加載數(shù)據(jù)圖表
            series: {
              type: 'pie',
              radius: '55%',
              center: ['50%','60%'],
              data: nums,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgb(0,0,0,0.5)'
                }
              }
            },
          });
        }
      },
      error : function() {
        //請求失敗時執(zhí)行該函數(shù)
        alert("圖表請求數(shù)據(jù)失敗!");
        mychart1.hideLoading();
      }
    })


    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

3.2 后端代碼

?? 因與柱狀圖獲取數(shù)據(jù)來源一樣，故Controller層與Service層代碼同柱狀圖

?? 參考資料

Echarts 動態(tài)加載數(shù)據(jù)庫中的數(shù)據(jù)

Hutool讀取Excel內(nèi)容

到此這篇關于基于springboot實現(xiàn)數(shù)據(jù)可視化的文章就介紹到這了,更多相關基于springboot實現(xiàn)數(shù)據(jù)可視化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

  • 使用Maven Archetype插件構(gòu)建Maven工程原型模板的實例

    使用Maven Archetype插件構(gòu)建Maven工程原型模板的實例

    下面小編就為大家分享一篇使用Maven Archetype插件構(gòu)建Maven工程原型模板的實例，具有很好的參考價值，希望對大家有所幫助
    2017-12-12
  • Spring Cloud Gateway自定義異常處理Exception Handler的方法小結(jié)

    Spring Cloud Gateway自定義異常處理Exception Handler的方法小結(jié)

    這篇文章主要介紹了Spring Cloud Gateway自定義異常處理Exception Handler的方法，本文通過兩種方法結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-08-08
  • Java 實現(xiàn)多線程切換等待喚醒交替打印奇偶數(shù)

    Java 實現(xiàn)多線程切換等待喚醒交替打印奇偶數(shù)

    這篇文章主要介紹了Java 實現(xiàn)多線程切換等待喚醒交替打印奇偶數(shù) ,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-05-05
  • java字符串比較獲取字符串出現(xiàn)次數(shù)的示例

    java字符串比較獲取字符串出現(xiàn)次數(shù)的示例

    java獲取一個字符串在整個字符串出現(xiàn)的次數(shù)，下面寫出我的思路和二個實現(xiàn)方法，大家參考使用吧
    2014-01-01
  • SpringBoot快速整合SpringSecurity的詳細步驟(新手都會!)

    SpringBoot快速整合SpringSecurity的詳細步驟(新手都會!)

    日 Spring Security 是針對Spring項目的安全框架,也是Spring Boot底層安全模塊默認的技術(shù)選型,他可以實現(xiàn)強大的Web安全控制,下面這篇文章主要給大家介紹了關于SpringBoot快速整合SpringSecurity的詳細步驟,需要的朋友可以參考下
    2023-03-03
  • 一篇文章帶你了解Java SpringMVC返回null

    一篇文章帶你了解Java SpringMVC返回null

    這篇文章主要介紹了Spring MVC返回null,文中講的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2021-10-10
  • java中TreeMap排序的示例代碼

    java中TreeMap排序的示例代碼

    本篇文章主要介紹了java中TreeMap排序的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • JPA merge聯(lián)合唯一索引無效問題解決方案

    JPA merge聯(lián)合唯一索引無效問題解決方案

    這篇文章主要介紹了JPA merge聯(lián)合唯一索引無效問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-09-09
  • Springboot配置返回日期格式化五種方法詳解

    Springboot配置返回日期格式化五種方法詳解

    本文主要介紹了Springboot配置返回日期格式化五種方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07

    • 最新評論