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

springboot+echarts+mysql制作数据可视化大屏（滑动大屏）

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

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

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

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

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

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

目录

 一、数据源

二、所需工具

三、项目框架搭建

四、代码编写

温度堆叠折线图

平均温度柱状图

温度变化堆叠面积图

南丁格尔玫瑰图

平均温度圆角环形图

五、大屏编写

成果展示：

springboot+echarts+mysql制作数据可视化大屏（滑动大屏）​

 一、数据源

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

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

二、所需工具

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

三、项目框架搭建

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

四、代码编写

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

温度堆叠折线图

后端

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 TemperatureController {

    private final JdbcTemplate jdbcTemplate;

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

    @GetMapping("/temperature-data")
    public Map<String, Object> getTemperatureData() {
        String query = "SELECT * FROM temperature";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> weekStartDates = new ArrayList<>();
        List<Double> mondayData = new ArrayList<>();
        List<Double> tuesdayData = new ArrayList<>();
        List<Double> wednesdayData = new ArrayList<>();
        List<Double> thursdayData = new ArrayList<>();
        List<Double> fridayData = new ArrayList<>();
        List<Double> saturdayData = new ArrayList<>();
        List<Double> sundayData = new ArrayList<>();

        for (Map<String, Object> row : result) {
            weekStartDates.add(row.get("week_start_date").toString());
            mondayData.add(Double.parseDouble(row.get("monday").toString()));
            tuesdayData.add(Double.parseDouble(row.get("tuesday").toString()));
            wednesdayData.add(Double.parseDouble(row.get("wednesday").toString()));
            thursdayData.add(Double.parseDouble(row.get("thursday").toString()));
            fridayData.add(Double.parseDouble(row.get("friday").toString()));
            saturdayData.add(Double.parseDouble(row.get("saturday").toString()));
            sundayData.add(Double.parseDouble(row.get("sunday").toString()));
        }

        Map<String, Object> data = new HashMap<>();
        data.put("weekStartDates", weekStartDates);
        data.put("mondayData", mondayData);
        data.put("tuesdayData", tuesdayData);
        data.put("wednesdayData", wednesdayData);
        data.put("thursdayData", thursdayData);
        data.put("fridayData", fridayData);
        data.put("saturdayData", saturdayData);
        data.put("sundayData", sundayData);

        return data;
    }
}

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

前端

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>温度堆叠折线图</title>
  <!-- 引入 ECharts.js -->
  <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>
    /* 设置图表容器的宽度和高度为100% */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #chart {
      width: 100%;
      height: 100%;
      min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */
    }
  </style>
</head>
<body>
<div id="chart"></div>

<script>
  $(document).ready(function() {
    // 发送Ajax请求获取温度数据
    $.ajax({
      url: "/temperature-data",
      type: "GET",
      success: function(data) {
        // 解析返回的数据
        var weekStartDates = data.weekStartDates;
        var mondayData = data.mondayData;
        var tuesdayData = data.tuesdayData;
        var wednesdayData = data.wednesdayData;
        var thursdayData = data.thursdayData;
        var fridayData = data.fridayData;
        var saturdayData = data.saturdayData;
        var sundayData = data.sundayData;

        // 初始化ECharts实例
        var myChart = echarts.init(document.getElementById("chart"));

        // 配置堆叠折线图的数据
        var option = {
          title: {
            text: "温度堆叠折线图"
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
          },
          xAxis: {
            type: "category",
            data: weekStartDates
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "Monday",
              type: "line",
              stack: "temperature",
              data: mondayData
            },
            {
              name: "Tuesday",
              type: "line",
              stack: "temperature",
              data: tuesdayData
            },
            {
              name: "Wednesday",
              type: "line",
              stack: "temperature",
              data: wednesdayData
            },
            {
              name: "Thursday",
              type: "line",
              stack: "temperature",
              data: thursdayData
            },
            {
              name: "Friday",
              type: "line",
              stack: "temperature",
              data: fridayData
            },
            {
              name: "Saturday",
              type: "line",
              stack: "temperature",
              data: saturdayData
            },
            {
              name: "Sunday",
              type: "line",
              stack: "temperature",
              data: sundayData
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);

        // 在窗口大小变化时重新绘制图表
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      },
      error: function(xhr, status, error) {
        console.log("Error: " + error);
      }
    });
  });
</script>
</body>
</html>

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

平均温度柱状图

后端

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 Temperature2Controller {

    private final JdbcTemplate jdbcTemplate;

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

    @GetMapping("/temperature-data2")
    public Map<String, Object> getTemperatureData() {
        String query = "SELECT week_start_date, AVG(monday) as avgMonday, AVG(tuesday) as avgTuesday, AVG(wednesday) as avgWednesday, AVG(thursday) as avgThursday, AVG(friday) as avgFriday, AVG(saturday) as avgSaturday, AVG(sunday) as avgSunday FROM temperature GROUP BY week_start_date";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> weekStartDates = new ArrayList<>();
        List<Double> avgMondayData = new ArrayList<>();
        List<Double> avgTuesdayData = new ArrayList<>();
        List<Double> avgWednesdayData = new ArrayList<>();
        List<Double> avgThursdayData = new ArrayList<>();
        List<Double> avgFridayData = new ArrayList<>();
        List<Double> avgSaturdayData = new ArrayList<>();
        List<Double> avgSundayData = new ArrayList<>();

        for (Map<String, Object> row : result) {
            weekStartDates.add(row.get("week_start_date").toString());
            avgMondayData.add(Double.parseDouble(row.get("avgMonday").toString()));
            avgTuesdayData.add(Double.parseDouble(row.get("avgTuesday").toString()));
            avgWednesdayData.add(Double.parseDouble(row.get("avgWednesday").toString()));
            avgThursdayData.add(Double.parseDouble(row.get("avgThursday").toString()));
            avgFridayData.add(Double.parseDouble(row.get("avgFriday").toString()));
            avgSaturdayData.add(Double.parseDouble(row.get("avgSaturday").toString()));
            avgSundayData.add(Double.parseDouble(row.get("avgSunday").toString()));
        }

        Map<String, Object> data = new HashMap<>();
        data.put("weekStartDates", weekStartDates);
        data.put("avgMondayData", avgMondayData);
        data.put("avgTuesdayData", avgTuesdayData);
        data.put("avgWednesdayData", avgWednesdayData);
        data.put("avgThursdayData", avgThursdayData);
        data.put("avgFridayData", avgFridayData);
        data.put("avgSaturdayData", avgSaturdayData);
        data.put("avgSundayData", avgSundayData);

        return data;
    }
}

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

前端

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>平均温度柱状图</title>
  <!-- 引入 ECharts.js -->
  <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: 280px; /* 设置最小高度，防止内容过小时显示异常 */
    }
  </style>
</head>
<body>
<div id="chart" style="width: 100%; height: 400px;"></div>

<script>
  $(document).ready(function() {
    // 发送 Ajax 请求获取温度数据
    $.ajax({
      url: "/temperature-data2",
      type: "GET",
      success: function(data) {
        // 解析返回的数据
        var weekStartDates = data.weekStartDates;
        var avgMondayData = data.avgMondayData;
        var avgTuesdayData = data.avgTuesdayData;
        var avgWednesdayData = data.avgWednesdayData;
        var avgThursdayData = data.avgThursdayData;
        var avgFridayData = data.avgFridayData;
        var avgSaturdayData = data.avgSaturdayData;
        var avgSundayData = data.avgSundayData;

        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById("chart"));

        // 配置柱状图的数据
        var option = {
          title: {
            text: "平均温度柱状图"
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
          },
          xAxis: {
            type: "category",
            data: weekStartDates
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "Monday",
              type: "bar",
              data: avgMondayData
            },
            {
              name: "Tuesday",
              type: "bar",
              data: avgTuesdayData
            },
            {
              name: "Wednesday",
              type: "bar",
              data: avgWednesdayData
            },
            {
              name: "Thursday",
              type: "bar",
              data: avgThursdayData
            },
            {
              name: "Friday",
              type: "bar",
              data: avgFridayData
            },
            {
              name: "Saturday",
              type: "bar",
              data: avgSaturdayData
            },
            {
              name: "Sunday",
              type: "bar",
              data: avgSundayData
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
      },
      error: function(xhr, status, error) {
        console.log("Error: " + error);
      }
    });

    // 在窗口大小变化时重新渲染图表
    $(window).on("resize", function() {
      if (myChart != null && myChart != undefined) {
        myChart.resize();
      }
    });
  });
</script>
</body>
</html>

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

温度变化堆叠面积图

后端

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 Temperature3Controller {

    private final JdbcTemplate jdbcTemplate;

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

    @GetMapping("/temperature-data3")
    public Map<String, Object> getTemperatureData() {
        String query = "SELECT * FROM temperature";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> weekStartDates = new ArrayList<>();
        List<Double> mondayData = new ArrayList<>();
        List<Double> tuesdayData = new ArrayList<>();
        List<Double> wednesdayData = new ArrayList<>();
        List<Double> thursdayData = new ArrayList<>();
        List<Double> fridayData = new ArrayList<>();
        List<Double> saturdayData = new ArrayList<>();
        List<Double> sundayData = new ArrayList<>();

        for (Map<String, Object> row : result) {
            weekStartDates.add(row.get("week_start_date").toString());
            mondayData.add(Double.parseDouble(row.get("monday").toString()));
            tuesdayData.add(Double.parseDouble(row.get("tuesday").toString()));
            wednesdayData.add(Double.parseDouble(row.get("wednesday").toString()));
            thursdayData.add(Double.parseDouble(row.get("thursday").toString()));
            fridayData.add(Double.parseDouble(row.get("friday").toString()));
            saturdayData.add(Double.parseDouble(row.get("saturday").toString()));
            sundayData.add(Double.parseDouble(row.get("sunday").toString()));
        }

        Map<String, Object> data = new HashMap<>();
        data.put("weekStartDates", weekStartDates);
        data.put("mondayData", mondayData);
        data.put("tuesdayData", tuesdayData);
        data.put("wednesdayData", wednesdayData);
        data.put("thursdayData", thursdayData);
        data.put("fridayData", fridayData);
        data.put("saturdayData", saturdayData);
        data.put("sundayData", sundayData);

        return data;
    }
}

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

前端

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>平均温度柱状图</title>
  <!-- 引入 ECharts.js -->
  <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: 280px; /* 设置最小高度，防止内容过小时显示异常 */
    }
  </style>
</head>
<body>
<div id="chart" style="width: 100%; height: 400px;"></div>

<script>
  $(document).ready(function() {
    // 发送 Ajax 请求获取温度数据
    $.ajax({
      url: "/temperature-data2",
      type: "GET",
      success: function(data) {
        // 解析返回的数据
        var weekStartDates = data.weekStartDates;
        var avgMondayData = data.avgMondayData;
        var avgTuesdayData = data.avgTuesdayData;
        var avgWednesdayData = data.avgWednesdayData;
        var avgThursdayData = data.avgThursdayData;
        var avgFridayData = data.avgFridayData;
        var avgSaturdayData = data.avgSaturdayData;
        var avgSundayData = data.avgSundayData;

        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById("chart"));

        // 配置柱状图的数据
        var option = {
          title: {
            text: "平均温度柱状图"
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
          },
          xAxis: {
            type: "category",
            data: weekStartDates
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "Monday",
              type: "bar",
              data: avgMondayData
            },
            {
              name: "Tuesday",
              type: "bar",
              data: avgTuesdayData
            },
            {
              name: "Wednesday",
              type: "bar",
              data: avgWednesdayData
            },
            {
              name: "Thursday",
              type: "bar",
              data: avgThursdayData
            },
            {
              name: "Friday",
              type: "bar",
              data: avgFridayData
            },
            {
              name: "Saturday",
              type: "bar",
              data: avgSaturdayData
            },
            {
              name: "Sunday",
              type: "bar",
              data: avgSundayData
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
      },
      error: function(xhr, status, error) {
        console.log("Error: " + error);
      }
    });

    // 在窗口大小变化时重新渲染图表
    $(window).on("resize", function() {
      if (myChart != null && myChart != undefined) {
        myChart.resize();
      }
    });
  });
</script>
</body>
</html>

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

南丁格尔玫瑰图

后端

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.math.BigDecimal;
import java.math.RoundingMode;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
public class Temperature4Controller {

    private final JdbcTemplate jdbcTemplate;

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

    @GetMapping("/temperature-data4")
    public Map<String, Object> getTemperatureData() {
        String query = "SELECT week_start_date, AVG(monday) AS monday_avg, AVG(tuesday) AS tuesday_avg, AVG(wednesday) AS wednesday_avg, AVG(thursday) AS thursday_avg, AVG(friday) AS friday_avg, AVG(saturday) AS saturday_avg, AVG(sunday) AS sunday_avg FROM temperature GROUP BY week_start_date";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> weekStartDates = new ArrayList<>();
        List<Double> averageTemperatures = new ArrayList<>();

        for (Map<String, Object> row : result) {
            weekStartDates.add(row.get("week_start_date").toString());
            double averageTemperature = (Double.parseDouble(row.get("monday_avg").toString()) +
                    Double.parseDouble(row.get("tuesday_avg").toString()) +
                    Double.parseDouble(row.get("wednesday_avg").toString()) +
                    Double.parseDouble(row.get("thursday_avg").toString()) +
                    Double.parseDouble(row.get("friday_avg").toString()) +
                    Double.parseDouble(row.get("saturday_avg").toString()) +
                    Double.parseDouble(row.get("sunday_avg").toString())) / 7.0;

            // 保留2位小数
            BigDecimal roundedTemperature = BigDecimal.valueOf(averageTemperature).setScale(2, RoundingMode.HALF_UP);
            averageTemperatures.add(roundedTemperature.doubleValue());
        }

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

        return data;
    }
}

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

前端

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>南丁格尔玫瑰图</title>
  <!-- 引入 ECharts.js -->
  <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: 280px; /* 设置最小高度，防止内容过小时显示异常 */
    }
  </style>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>

<script>
  $(document).ready(function() {
    // 发送Ajax请求获取温度数据
    $.ajax({
      url: "/temperature-data4",
      type: "GET",
      success: function(data) {
        // 解析返回的数据
        var weekStartDates = data.weekStartDates;
        var averageTemperatures = data.averageTemperatures;

        // 初始化ECharts实例
        var myChart = echarts.init(document.getElementById("chart"));

        // 配置南丁格尔玫瑰图的数据
        var option = {
          title: {
            text: "南丁格尔玫瑰图"
          },
          tooltip: {
            trigger: "item"
          },
          legend: {
            data: weekStartDates
          },
          series: [
            {
              name: "温度",
              type: "pie",
              radius: "55%",
              center: ["50%", "50%"],
              roseType: "radius",
              data: (function() {
                var seriesData = [];
                for (var i = 0; i < weekStartDates.length; i++) {
                  seriesData.push({
                    name: weekStartDates[i],
                    value: averageTemperatures[i]
                  });
                }
                return seriesData;
              })()
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
      },
      error: function(xhr, status, error) {
        console.log("Error: " + error);
      }
    });
  });
</script>
</body>
</html>

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

平均温度圆角环形图

后端

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.math.BigDecimal;
import java.math.RoundingMode;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
public class Temperature4Controller {

    private final JdbcTemplate jdbcTemplate;

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

    @GetMapping("/temperature-data4")
    public Map<String, Object> getTemperatureData() {
        String query = "SELECT week_start_date, AVG(monday) AS monday_avg, AVG(tuesday) AS tuesday_avg, AVG(wednesday) AS wednesday_avg, AVG(thursday) AS thursday_avg, AVG(friday) AS friday_avg, AVG(saturday) AS saturday_avg, AVG(sunday) AS sunday_avg FROM temperature GROUP BY week_start_date";
        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);

        List<String> weekStartDates = new ArrayList<>();
        List<Double> averageTemperatures = new ArrayList<>();

        for (Map<String, Object> row : result) {
            weekStartDates.add(row.get("week_start_date").toString());
            double averageTemperature = (Double.parseDouble(row.get("monday_avg").toString()) +
                    Double.parseDouble(row.get("tuesday_avg").toString()) +
                    Double.parseDouble(row.get("wednesday_avg").toString()) +
                    Double.parseDouble(row.get("thursday_avg").toString()) +
                    Double.parseDouble(row.get("friday_avg").toString()) +
                    Double.parseDouble(row.get("saturday_avg").toString()) +
                    Double.parseDouble(row.get("sunday_avg").toString())) / 7.0;

            // 保留2位小数
            BigDecimal roundedTemperature = BigDecimal.valueOf(averageTemperature).setScale(2, RoundingMode.HALF_UP);
            averageTemperatures.add(roundedTemperature.doubleValue());
        }

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

        return data;
    }
}

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

前端

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>平均温度圆角环形图</title>
  <!-- 引入 ECharts.js -->
  <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: 280px; /* 设置最小高度，防止内容过小时显示异常 */
    }
  </style>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>

<script>
  $(document).ready(function() {
    // 发送Ajax请求获取温度数据
    $.ajax({
      url: "/temperature-data4",
      type: "GET",
      success: function(data) {
        // 解析返回的数据
        var weekStartDates = data.weekStartDates;
        var averageTemperatures = data.averageTemperatures;

        // 初始化ECharts实例
        var myChart = echarts.init(document.getElementById("chart"));

        // 配置圆角环形图的数据
        var option = {
          title: {
            text: "平均温度圆角环形图"
          },
          tooltip: {
            trigger: "item"
          },
          series: [
            {
              name: "平均温度",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: "inside",
                formatter: "{b}: {c}"
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "16",
                  fontWeight: "bold"
                }
              },
              labelLine: {
                show: false
              },
              data: []
            }
          ]
        };

        // 添加数据
        for (var i = 0; i < weekStartDates.length; i++) {
          option.series[0].data.push({
            name: weekStartDates[i],
            value: averageTemperatures[i]
          });
        }

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
      },
      error: function(xhr, status, error) {
        console.log("Error: " + error);
      }
    });
  });
</script>
</body>
</html>

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

五、大屏编写

代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>温度数据前端HTML大屏</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #header {
      background-color: cadetblue;
      color: #fff;
      padding: 20px;
      text-align: center;
      font-size: 24px;
    }

    #container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20px;
    }

    .big-module {
      width: 65%;
      height: 300px;
      background-color: #f1f1f1;
      margin-bottom: 20px;
    }

    .small-module {
      width: 43%;
      height: 400px;
      background-color: #f1f1f1;
      margin-bottom: 20px;
    }

    .large-module {
      width: 55%;
      height: 400px;
      background-color: #f1f1f1;
    }

    .extra-large-module {
      width: 100%;
      height: 400px;
      background-color: #f1f1f1;
      margin-bottom: 20px;
    }
  </style>
</head>
<body style="background-color: cyan">
<div id="header">温度数据前端HTML大屏</div>
<div id="container">
  <div class="extra-large-module" style="background-color: deepskyblue">
    <iframe src="temperature2.html" style="width: 100%; height: 100%; border: none;"></iframe>
  </div>
  <div class="large-module" style="background-color: deepskyblue">
    <iframe src="temperature3.html" style="width: 100%; height: 100%; border: none;"></iframe>
  </div>
  <div class="small-module" style="background-color: deepskyblue">
    <iframe src="temperature4.html" style="width: 100%; height: 100%; border: none;"></iframe>
  </div>
  <div class="large-module" style="background-color: deepskyblue">
    <iframe src="temperature.html" style="width: 100%; height: 100%; border: none;"></iframe>
  </div>
  <div class="small-module" style="background-color: deepskyblue">
    <iframe src="temperature5.html" style="width: 100%; height: 100%; border: none;"></iframe>
  </div>
</div>
</body>
</html>

运行项目，浏览器访问​​​​​​​：http://localhost:8082/bigscreen.html

springboot+echarts+mysql制作数据可视化大屏（滑动大屏）​

运行项目，浏览器访问：http://localhost:8082/bigscreen.html 

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

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

声明：作品仅可作学习使用​​​​​​​。文章来源地址https://www.toymoban.com/news/detail-515591.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日
    浏览(55)
  • 构建数据可视化（基于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)
  • php+echarts实现数据可视化实例2

    php+echarts实现数据可视化实例2

    php css

    2024年02月12日
    浏览(35)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包