1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：一个人的牛牛 分类：Toy博客 阅读(43) 违法举报

这篇具有很好参考价值的文章主要介绍了springboot+echarts +mysql制作数据可视化大屏（四图）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

成果展示：

springboot+echarts +mysql制作数据可视化大屏（四图）,可视化,spring boot,echarts,mysql,大数据,java

 一、数据源

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%20screen.html

springboot+echarts +mysql制作数据可视化大屏（四图）,可视化,spring boot,echarts,mysql,大数据,java

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

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

声明：作品仅可作学习使用​​​​​​​。文章来源地址https://www.toymoban.com/news/detail-541136.html

到了这里，关于springboot+echarts +mysql制作数据可视化大屏（四图）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【Python大数据期末/课程设计】动态爬取“纵横中文网“小说排行榜数据并进行可视化处理 (flask框架/MySQL数据库/echarts数据可视化)

    【Python大数据期末/课程设计】动态爬取“纵横中文网“小说排行榜数据并进行可视化处理 (flask框架/MySQL数据库/echarts数据可视化)

    代写C语言、C++、Java、Python、HTML、JavaScript、vue、MySQL相关编程作业， 长期接单，信誉有保证，标价10-20每份，如有需要请加文章最下方QQ。 本文资源：https://download.csdn.net/download/weixin_47040861/89149396 题目描述： 爬取“纵横中文网” 1.利用爬虫技术爬取完整的一千条数据. 2.将爬

    2024年04月25日
    浏览(45)
  • 编写web程序，基于echarts将Mysql表数据进行可视化展示及Hadoop学习心得

    编写web程序，基于echarts将Mysql表数据进行可视化展示及Hadoop学习心得

    文章目录 目录 前言 一、从MySQL数据库中获取需要展示的数据。 1.引入库 2.连接到MySQL数据库 二、创建图表 三、运行后结果展示 四、学习心得  总结         将Mysql表数据可视化展示在Web程序中可以借助ECharts这样的图表库来实现。通过Web程序连接MySQL数据库，获取数据后，

    2024年02月03日
    浏览(42)
  • 基于Django+Mysql+Echarts的可视化大屏开发

    基于Django+Mysql+Echarts的可视化大屏开发

    课程实验作业，临时赶出来的一个可视化大屏，后端是Django实现的web框架+Mysql数据库；前端（HTML+CSS+JS）三剑客，图表控件Echarts；本人很菜，，，做的比较潦草，还请多多包涵！ github项目地址：https://github.com/goldikfish/Bigscreen.git 运行效果如图 数据源自国家数据统计局 ，将数

    2024年02月11日
    浏览(42)
  • Echarts数据可视化 第4章 Echarts可视化图 4.10 热力图

    Echarts数据可视化 第4章 Echarts可视化图 4.10 热力图

    Echarts数据可视化 Echarts数据可视化：入门、实战与进阶 第4章 Echarts可视化图 4.10 热力图 热力图是一种密度图，使用不同颜色和不同颜色深浅程度来表示数据量的区别。 举个栗子 渲染效果 解释一下这个图 其中横轴代表小时，纵轴表示星期几，图中不同颜色的区块代表了数据

    2024年02月14日
    浏览(48)
  • 基于Echarts的大数据可视化模板：大数据可视化展板

    基于Echarts的大数据可视化模板：大数据可视化展板

    2024年02月01日
    浏览(64)
  • ECharts数据可视化

    ECharts数据可视化

    目录 第一章 什么是ECharts 第二章 搭建环境  2.1 Echarts的下载 2.2 Visual Studio Code下载 第三章 一个简单的可视化展示 第四章 Echarts组件 4.1 标题 4.2 提示框 4.3 工具栏 4.4 图例 4.5 时间轴 4.6 数据区域缩放 4.6.1 滑动条型数据区域缩放 4.6.2 内置型数据区域缩放    4.6.3 框选型数据

    2024年02月10日
    浏览(43)
  • 数据可视化一、ECharts

    数据可视化一、ECharts

    1、数据可视化 （1）数据可视化 数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 （2）数据可视化的场景 目前互联网公司通常有这么几大类的可视化需求： （3）常见

    2024年02月05日
    浏览(46)
  • ECharts数据可视化--常用图表类型

    ECharts数据可视化--常用图表类型

    目录 一.柱状图 1.基本柱状图  1.1最简单的柱状图 ​编辑   1.2多系列柱状图   1.3柱状图的样式          （1）柱条样式                  （2）柱条的宽度和高度         （3）柱条间距         （4）为柱条添加背景颜色 ​编辑 2.堆叠柱状图 3.动态排序柱状图 4.阶梯

    2024年02月05日
    浏览(56)
  • 构建数据可视化（基于Echarts,python)

    构建数据可视化（基于Echarts,python)

    本文目录： 一、写在前面的题外话 二、数据可视化概念 三、用Python matplotlib库绘制数据可视化图 四、基于Echarts构建大数据可视化 4.1、安装echarts.js 4.2、数据可视化折线图制作 4.2.1、基础折线图 4.2.2、改善折线图 4.2.3、平滑折线图 4.2.4、虚线折线图 4.2.5、阶梯折线图 4.2.6、面

    2024年02月11日
    浏览(59)
  • 数据可视化-ECharts Html项目实战（5）

    数据可视化-ECharts Html项目实战（5）

     在之前的文章中，我们学习了如何设置滚动图例，工具箱设置和插入图片。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢 数据可视化-ECharts Html项目实战（4）-CSDN博客 https://blog.csdn.net/qq_49513817/

    2024年03月24日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包