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

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

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

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

专栏地址：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;@RestControllerpublic class Big1 {    private final JdbcTemplate jdbcTemplate;    @Autowired    public Big1(JdbcTemplate jdbcTemplate) {        this.jdbcTemplate = jdbcTemplate;    }    @GetMapping("/chart-data")    public Map getChartData() {        String query = "SELECT region_name, COUNT(*) AS count FROM ads_area_topic GROUP BY region_name";        List result = jdbcTemplate.queryForList(query);        List labels = new ArrayList();        List values = new ArrayList();        for (Map row : result) {            String regionName = (String) row.get("region_name");            Integer count = ((Number) row.get("count")).intValue();            labels.add(regionName);            values.add(count);        }        Map data = new HashMap();        data.put("labels", labels);        data.put("values", values);        return data;    }}

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

4.1.2 前端

    区域销量统计                        html, body {            height: 100%;            margin: 0;            padding: 0;        }        #chart {            width: 100%;            height: 100%;            min-height: 280px; /* 设置最小高度，防止内容过小时显示异常 */        }        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);        }    });

验证页面：运行项目，浏览器访问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;@RestControllerpublic class Big2Controller {    private final JdbcTemplate jdbcTemplate;    @Autowired    public Big2Controller(JdbcTemplate jdbcTemplate) {        this.jdbcTemplate = jdbcTemplate;    }    @GetMapping("/chart-data2")    public Map getChartData() {        String query = "SELECT dt, order_amount FROM ads_order_daycount";        List result = jdbcTemplate.queryForList(query);        List labels = new ArrayList();        List values = new ArrayList();        for (Map row : result) {            String dt = row.get("dt").toString();            Integer orderAmount = ((Number) row.get("order_amount")).intValue();            labels.add(dt);            values.add(orderAmount);        }        Map data = new HashMap();        data.put("labels", labels);        data.put("values", values);        return data;    }}

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

4.2.2 前端

    折线图      html, body {      height: 100%;      margin: 0;      padding: 0;    }    #chart-container {      width: 100%;      height: 100%;      min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */    }    // 使用 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);          });

验证页面：运行项目，浏览器访问​​​​​​​​​​​​​​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;@RestControllerpublic class Big3Controller {    private final JdbcTemplate jdbcTemplate;    @Autowired    public Big3Controller(JdbcTemplate jdbcTemplate) {        this.jdbcTemplate = jdbcTemplate;    }    @GetMapping("/chart-data3")    public Map getChartData() {        String query = "SELECT dt, payment_avg_time FROM ads_payment_daycount";        List result = jdbcTemplate.queryForList(query);        List labels = new ArrayList();        List values = new ArrayList();        for (Map row : result) {            String dt = row.get("dt").toString();            Integer paymentAvgTime = ((Number) row.get("payment_avg_time")).intValue();            labels.add(dt);            values.add(paymentAvgTime);        }        Map data = new HashMap();        data.put("labels", labels);        data.put("values", values);        return data;    }}

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

4.3.2 前端

  平均支付时间统计            html, body {      height: 100%;      margin: 0;      padding: 0;    }    #chart {      width: 100%;      height: 100%;      min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */    }    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);    }  });

 验证页面：运行项目，浏览器访问​​​​​​​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;@RestControllerpublic class Big4Controller {    private final JdbcTemplate jdbcTemplate;    @Autowired    public Big4Controller(JdbcTemplate jdbcTemplate) {        this.jdbcTemplate = jdbcTemplate;    }    @GetMapping("/chart-data4")    public Map getChartData() {        String query = "SELECT dt, order_amount FROM ads_payment_daycount";        List result = jdbcTemplate.queryForList(query);        List labels = new ArrayList();        List values = new ArrayList();        for (Map row : result) {            String dt = row.get("dt").toString();            Integer orderAmount = ((Number) row.get("order_amount")).intValue();            labels.add(dt);            values.add(orderAmount);        }        Map data = new HashMap();        data.put("labels", labels);        data.put("values", values);        return data;    }}

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

4.4.2 前端

  订单金额统计            html, body {      height: 100%;      margin: 0;      padding: 0;    }    #chart {      width: 100%;      height: 100%;      min-height: 300px;    }    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);    }  });

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

五、大屏编写

        大屏可视化            /* 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;        }        
销售数据平面一览大屏
                                                                                                                                    

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

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

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

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