我家小花儿

这个屌丝很懒，什么也没留下！

热门标签

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

作者：我家小花儿 | 2024-07-24 18:28:40

踩

mysql echarts可视化大屏开发

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

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

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

专栏地址：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%20screen.html

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/876208

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