菜单 搜索
首页 前端知识 springboot echarts mysql制作数据可视化大屏（四图）

springboot echarts mysql制作数据可视化大屏（四图）

2024-02-08 15:02:56 前端知识 前端哥 465 454 我要收藏

作者水平低，如有错误，恳请指正！谢谢！！！！！

项目简单，适合大学生参考

分类专栏还有其它的可视化博客哦！

专栏地址：https://blog.csdn.net/qq_55906442/category_11906804.html?spm=1001.2014.3001.5482

成果展示：

 一、数据源

1）可以使用自己的MySQL数据库；

2）使用我提供的数据。（要数据私信/留言——>留下邮箱即可）

二、所需工具

MySQL、IDEA、jdk1.8、Maven等等，总之编写工具要准备好，环境要搭建好

三、项目框架搭建

参考我博客的项目框架搭建，从3.1看到4.3即可springboot+mybatis+echarts +mysql制作数据可视化大屏_spring + 可视化大屏_一个人的牛牛的博客-CSDN博客

四、代码编写

代码简单，后端代码都写在一起了，没有区分controller等等，前端也是一样，没有单独写js等等。

4.1 区域销量统计条形图

4.1.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
public class Big1 {

    private final JdbcTemplate jdbcTemplate;

    @Autowired
    public Big1(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @GetMapping("/chart-data")
    public Map<String, Object> getChartData() {
        String query = "SELECT region_name, COUNT(*) AS count FROM ads_area_topic GROUP BY region_name";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> labels = new ArrayList<>();
        List<Integer> values = new ArrayList<>();

        for (Map<String, Object> row : result) {
            String regionName = (String) row.get("region_name");
            Integer count = ((Number) row.get("count")).intValue();

            labels.add(regionName);
            values.add(count);
        }

        Map<String, Object> data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);

        return data;
    }
}

验证接口：运行项目，浏览器访问http://localhost:8080/chart-data

4.1.2 前端

<!DOCTYPE html>
<html>
<head>
    <title>区域销量统计</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--    <script src="static/js/echarts.min.js"></script>-->
<!--    <script src="static/js/jquery-3.6.0.min.js"></script>-->
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #chart {
            width: 100%;
            height: 100%;
            min-height: 280px; /* 设置最小高度，防止内容过小时显示异常 */
        }
    </style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
    var chart = echarts.init(document.getElementById('chart'));

    // 监听窗口大小变化事件
    window.addEventListener('resize', function() {
        chart.resize(); // 调整图表大小
    });

    // 使用Ajax异步获取数据
    $.ajax({
        url: '/chart-data',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            var option = {
                title: {
                    text: '区域销量统计',
                    textStyle: {
                        textAlign: 'center'
                    }
                },
                tooltip: {},
                xAxis: {
                    data: data.labels
                },
                yAxis: {},
                series: [{
                    name: 'Count',
                    type: 'bar',
                    data: data.values,
                    itemStyle: {
                        color: function(params) {
                            // 设置背景颜色
                            var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD'];
                            return colorList[params.dataIndex];
                        }
                    }
                }]
            };
            chart.setOption(option);
        }
    });
</script>
</body>
</html>

验证页面：运行项目，浏览器访问http://localhost:8080/big1.html

4.2  订单金额折线图

4.2.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
public class Big2Controller {

    private final JdbcTemplate jdbcTemplate;

    @Autowired
    public Big2Controller(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @GetMapping("/chart-data2")
    public Map<String, Object> getChartData() {
        String query = "SELECT dt, order_amount FROM ads_order_daycount";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> labels = new ArrayList<>();
        List<Integer> values = new ArrayList<>();

        for (Map<String, Object> row : result) {
            String dt = row.get("dt").toString();
            Integer orderAmount = ((Number) row.get("order_amount")).intValue();

            labels.add(dt);
            values.add(orderAmount);
        }

        Map<String, Object> data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);

        return data;
    }
}

 验证接口：运行项目，浏览器访问​​​​​​​http://localhost:8080/chart-data2

4.2.2 前端

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>折线图</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #chart-container {
      width: 100%;
      height: 100%;
      min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */
    }
  </style>
</head>
<body>
<div id="chart-container"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  // 使用 Axios 发送 AJAX 请求
  axios.get('/chart-data2')
          .then(function (response) {
            // 处理从后端返回的数据
            const data = response.data;

            // 提取 X 轴和 Y 轴数据
            const xData = data.labels;
            const yData = data.values;

            // 创建图表
            const chartContainer = document.getElementById('chart-container');
            const chart = echarts.init(chartContainer);

            // 监听窗口大小变化事件
            window.addEventListener('resize', function() {
              chart.resize(); // 调整图表大小
            });

            const option = {
              title: {
                text: '订单金额折线图'
              },
              xAxis: {
                type: 'category',
                data: xData
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                type: 'line',
                data: yData,
                areaStyle: {
                  color: 'rgba(0, 128, 255, 0.3)' // 设置背景颜色
                }
              }]
            };

            // 渲染图表
            chart.setOption(option);

          })
          .catch(function (error) {
            console.log(error);
          });
</script>
</body>
</html>

验证页面：运行项目，浏览器访问​​​​​​​​​​​​​​http://localhost:8080/big2.html

4.3  平均支付时间统计

4.3.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
public class Big3Controller {

    private final JdbcTemplate jdbcTemplate;

    @Autowired
    public Big3Controller(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @GetMapping("/chart-data3")
    public Map<String, Object> getChartData() {
        String query = "SELECT dt, payment_avg_time FROM ads_payment_daycount";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> labels = new ArrayList<>();
        List<Integer> values = new ArrayList<>();

        for (Map<String, Object> row : result) {
            String dt = row.get("dt").toString();
            Integer paymentAvgTime = ((Number) row.get("payment_avg_time")).intValue();

            labels.add(dt);
            values.add(paymentAvgTime);
        }

        Map<String, Object> data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);

        return data;
    }
}

 验证接口：运行项目，浏览器访问​​​​​​​​​​​​​​http://localhost:8080/chart-data3

4.3.2 前端

<!DOCTYPE html>
<html>
<head>
  <title>平均支付时间统计</title>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #chart {
      width: 100%;
      height: 100%;
      min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */
    }
  </style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
  var chart = echarts.init(document.getElementById('chart'));

  // 监听窗口大小变化事件
  window.addEventListener('resize', function() {
    chart.resize(); // 调整图表大小
  });

  // 使用Ajax异步获取数据
  $.ajax({
    url: '/chart-data3',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      var option = {
        title: {
          text: '平均支付时间统计',
          textStyle: {
            textAlign: 'center'
          }
        },
        tooltip: {},
        angleAxis: {},
        radiusAxis: {
          type: 'category',
          data: data.labels
        },
        polar: {},
        series: [{
          name: 'Avg Time',
          type: 'bar',
          data: data.values,
          coordinateSystem: 'polar',
          itemStyle: {
            color: function(params) {
              // 设置背景颜色
              var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD'];
              return colorList[params.dataIndex % colorList.length];
            }
          }
        }]
      };
      chart.setOption(option);
    }
  });
</script>
</body>
</html>

 验证页面：运行项目，浏览器访问​​​​​​​http://localhost:8080/big3.html

4.4  订单金额统计

4.4.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
public class Big4Controller {

    private final JdbcTemplate jdbcTemplate;

    @Autowired
    public Big4Controller(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @GetMapping("/chart-data4")
    public Map<String, Object> getChartData() {
        String query = "SELECT dt, order_amount FROM ads_payment_daycount";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> labels = new ArrayList<>();
        List<Integer> values = new ArrayList<>();

        for (Map<String, Object> row : result) {
            String dt = row.get("dt").toString();
            Integer orderAmount = ((Number) row.get("order_amount")).intValue();

            labels.add(dt);
            values.add(orderAmount);
        }

        Map<String, Object> data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);

        return data;
    }
}

 验证接口：运行项目，浏览器访问​​​​​​​​​​​​​​http://localhost:8080/chart-data4

4.4.2 前端

<!DOCTYPE html>
<html>
<head>
  <title>订单金额统计</title>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #chart {
      width: 100%;
      height: 100%;
      min-height: 300px;
    }
  </style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
  var chart = echarts.init(document.getElementById('chart'));

  // 监听窗口大小变化事件
  window.addEventListener('resize', function() {
    chart.resize(); // 调整图表大小
  });

  // 使用Ajax异步获取数据
  $.ajax({
    url: '/chart-data4',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      var option = {
        title: {
          text: '订单金额统计',
          textStyle: {
            textAlign: 'center'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        series: [{
          name: '订单金额',
          type: 'pie',
          radius: '50%',
          data: data.values.map(function(value, index) {
            return {
              name: data.labels[index],
              value: value
            };
          })
        }]
      };
      chart.setOption(option);
    }
  });
</script>
</body>
</html>

验证页面：运行项目，浏览器访问​​​​​​​http://localhost:8080/big4.html

五、大屏编写

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>大屏可视化</title>
    <style>
        /* CSS样式 */
        body, html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #header {
            width: 100%;
            height: 8%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-size: 20px;
            font-weight: bold;
        }
        #content {
            width: 100%;
            height: 92%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            padding: 20px;
        }
        .chart-container {
            width: 49%;
            height: 48%;
            background-color: #ffffff;
            margin-bottom: 20px;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
        }
        .chart-container:not(:last-child) {
            margin-right: 5px;
        }
    </style>
</head>
<body style="background-color: bisque">
    <div id="header"><h2>销售数据平面一览大屏</h2></div>

    <div id="content">
        <div class="chart-container" id="chart1">
            <iframe src="big1.html" style="width: 100%; height: 100%; border: none;"></iframe>
        </div>
        <div class="chart-container" id="chart2">
            <iframe src="big2.html" style="width: 100%; height: 100%; border: none;"></iframe>
        </div>
        <div class="chart-container" id="chart3">
            <iframe src="big3.html" style="width: 100%; height: 100%; border: none;"></iframe>
        </div>
        <div class="chart-container" id="chart4">
            <iframe src="big4.html" style="width: 100%; height: 100%; border: none;"></iframe>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/d3@7.0.0/dist/d3.min.js"></script>
    <script>
    </script>
</body>
</html>

运行项目，浏览器访问​​​​​​​http://localhost:8080/large screen.html

注：http://localhost:8080/加上HTML的文件名都能够查看相应的图！

要码源的私聊/评论留下邮箱号，压缩包包括项目源码、数据sql文件，readme.txt。

声明：作品仅可作学习使用​​​​​​​。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/1542.html
标签
大数据spring bootmysql
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

js实现动态数字滚动，插件jquery.counterup.min.js的使用方式

2024-02-22 11:02:40

echarts 3D柱状图

2024-02-22 11:02:39

jQuery的介绍以及应用场景

2024-02-22 11:02:39

JQuery工具框架

2024-02-22 11:02:38

【漏洞复现】jQuery-1.7.2 版本任意文件下载漏洞复现

2024-02-22 11:02:33

JavaScript和jQuery的关系

2024-02-22 11:02:33

jQuery淡入 淡出 —— W3school 详解 简单易懂（五）

2024-02-22 11:02:33

JQuery过滤选择器-如何让某个元素换颜色(俩种方式)

2024-02-22 11:02:32

jQuery下载使用

2024-02-22 11:02:11

echart图表渲染合并策略

2024-02-22 11:02:06

大家推荐的文章
1

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
2

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
3

移动端css布局大全

2024-02-06 15:02:421000
4

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
5

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
6

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
7

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
8

尚硅谷css3笔记

2024-02-13 10:02:44998
9

如何利用浏览器测试跨域

2024-02-11 10:02:28998
10

【JS逆向】某麻将游戏数据生成JS加密逆向分析探索！

2024-02-22 10:02:34997

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！