您现在的位置是:群英 > 开发技术 > 编程语言
在springboot中怎么实现数据可视化,代码是什么?
Admin发表于 2022-10-10 18:12:08529 次浏览
在这篇文章中我们将学习“在springboot中怎么实现数据可视化,代码是什么?”的相关知识,下文有详细的介绍及实例,步骤过程清晰,简单易懂,小编觉得挺不错的,有需要的朋友可以借鉴参考,希望大家阅读完这篇能有所获。


     

前言:

数据可视化就是将数据转换成图或表等,以一种更直观的方式展现和呈现数据。通过“可视化”的方式,我们看不懂的数据通过图形化的手段进行有效地表达,准确高效、简洁全面地传递某种信息,甚至我们帮助发现某种规律和特征,挖掘数据背后的价值。现在,提出一种方案,基于springboot框架,将excel表格中的数据提取出来,前端使用echarts框架,通过柱形图和饼状图对数据进行直观展示

Excel数据源展示

创建Registration.xlsx表格和fruit_sales页面,同时创建相关水果销售数据

结构一览

️ echarts,min.js下载链接

一、读取Excel表格中的数据

本项目使用springboot整合hutool第三方类库实现对excel文件中数据采用流的方式进行读取,详情参看hutool官方文档

Hutool官方文档链接

1.1 创建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 创建测试类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.读取第二行到最后一行数据
        //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();
        }
    }
}

测试结果:

二、采用柱形图显示Excel表格数据

2.1 前端代码

在springboot框架中创建index.html,使用ajax动态获取后端数据

<!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准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 1400px;height:500px;"></div>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    myChart.setOption({
        title: {
            text: '水果销售情况柱形图'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: [],
            axisLabel:{
                interval: 0
            }
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    });

    myChart.showLoading();

    var names=[];    //类别数组(实际用来盛放X轴坐标值)
    var nums=[];    //销量数组(实际用来盛放Y坐标值)

    $.ajax({
        type : "get",
        async : false,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
        url : "list",    //请求发送到TestServlet处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容,result即为服务器返回的json对象
            var data = result.data;
            if (data) {
                for(var i=0;i<data.length;i++){
                    names.push(data[i].name);    //挨个取出类别并填入类别数组
                }
                for(var i=0;i<data.length;i++){
                    nums.push(data[i].count);    //挨个取出销量并填入销量数组
                }
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data: names
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '销量',
                        data: nums
                    }]
                });

            }
        },
        error : function() {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })
</script>
</body>
</html>

2.2 后端代码

2.2.1 Controller层代码

前端代码会发送list请求到后端请求数据,controller层响应请求,通过service层获取表格数据,返回map类型的数据

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包下创建GetDataFromExcel类用于从Excel表格中获取数据

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.读取第二行到最后一行数据
        //List<List<Object>> read = excelReader.read(1, excelReader.getRowCount());
        List<Map<String,Object>> read = excelReader.readAll();
        return read;
    }
}

三、采用饼状图显示Excel表格数据

3.1 前端代码

在springboot框架中创建index1.html,使用ajax动态获取后端数据

<!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: '水果销量统计饼状图',
        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,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
      url : "list",    //请求发送到TestServlet处
      data : {},
      dataType : "json",        //返回数据形式为json
      success : function(result) {
        //请求成功时执行该函数内容,result即为服务器返回的json对象
        var data = result.data;
        if (data) {
          for(var i=0;i<data.length;i++){
            names.push(data[i].name);    //挨个取出类别并填入类别数组
            nums[i] = {value: data[i].count,name:data[i].name};
          }
/*          for(var i=0;i<data.length;i++){
            nums.push(data[i].count);    //挨个取出销量并填入销量数组
          }*/
          mychart1.hideLoading();    //隐藏加载动画
          mychart1.setOption({        //加载数据图表
            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() {
        //请求失败时执行该函数
        alert("图表请求数据失败!");
        mychart1.hideLoading();
      }
    })


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

3.2 后端代码

因与柱状图获取数据来源一样,故Controller层与Service层代码同柱状图



以上就是关于在springboot中怎么实现数据可视化,代码是什么?的介绍啦,需要的朋友可以参考上述内容,希望对大家有帮助,想要了解更多,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

相关信息推荐
2022-11-04 18:40:09 
摘要:这篇文章主要介绍了yii框架结合charjs实现统计30天数据的方法,涉及Yii框架日期运算、数据查询相关操作技巧,需要的朋友可以参考下
2022-05-07 17:06:38 
摘要:bootstrap设置悬浮窗的方法:1、创建Html代码;2、定义一个超链接,并引入相应页面的css和js;3、通过bootstrap的popover插件实现悬浮窗效果即可。
2022-10-28 17:59:34 
摘要:二维数组在内存中的存放顺序是按行存放,即放完一行之后再放入第二行;也就是先存放“a[0]”行,再存放“a[1]”行,接着存放“a[2]”行,以此类推直到元素放完;每行中元素也是依次存放。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部