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

news2024/11/15 10:53:15

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

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

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

专栏地址：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等等。

温度堆叠折线图

后端

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

​

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

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/710107.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C】初步认识

【C】初步认识

目录 【1】什么是C语言 【2】第一个C程序解读 【3】数据类型 【4】变量常量 【4.1】定义变量的方法 【4.2】变量的分类 【4.3】变量的使用 【4.4】变量的作用域和生命周期 【4.5】常量分类 【5】字符串 【6】转义字符 【7】注释 【8】选择语句 【9】循环语句 【…
阅读更多...
牛客网Java面试题及答案整理（ 2023最新版）

牛客网Java面试题及答案整理（ 2023最新版）

大家从 Boss 直聘上或者其他招聘网站上都可以看到 Java 岗位众多&#xff0c;Java 岗位的招聘薪酬天差地别&#xff0c;人才要求也是五花八门。而很多 Java 工程师求职过程中&#xff0c;也是冷暖自知。很多时候技术有&#xff0c;但是面试的时候就是过不了&#xff01; 为了帮…
阅读更多...
SpringSecurity对CSRF的支持实践

SpringSecurity对CSRF的支持实践

【1】什么是CSRF 跨站请求伪造&#xff08;英语&#xff1a;Cross-site request forgery&#xff09;&#xff0c;也被称为 one-click attack 或者 session riding&#xff0c;通常缩写为 CSRF 或者 XSRF&#xff0c; 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操…
阅读更多...
chatgpt赋能python：如何用Python计算居民用电量

chatgpt赋能python：如何用Python计算居民用电量

如何用Python计算居民用电量 介绍 居民用电量是一个重要的经济指标。对于一个家庭来说&#xff0c;如果能够掌握自己的用电量情况&#xff0c;不仅可以控制开支&#xff0c;还可以提高用电效率&#xff0c;节约能源。而对于电力公司来说&#xff0c;了解居民用电量的变化规律…
阅读更多...
vue 实现色板功能

vue 实现色板功能

效果&#xff1a; 动态添加颜色 随机色 代码&#xff1a; <divclass"mt-10 firstTitle"v-show"pictureType ! card && pictureType ! table && pictureType ! inventory"><i:class"[colorSystemShow ? el-icon-com-xia…
阅读更多...
关于antd的form表单组件的一个天坑。。。

关于antd的form表单组件的一个天坑。。。

事情是这样的&#xff0c;项目中遇到了一个问题&#xff0c;用表单包裹着着一个Switch组件&#xff0c;提交表单的时候可以将Switch的值一起提交。 form.setFieldsValue({power:0})<Form.Item label"Switch" name"power"><Switch checked{flag}…
阅读更多...
autodl算力租用平台应用于pycharm

autodl算力租用平台应用于pycharm

一、GPU租用选择 1、创建实例 首先进入算力市场 博客以2080为例&#xff0c;选择计费方式&#xff0c;选择合适的主机&#xff0c;选择要创建实例中的GPU数量&#xff0c;选择镜像&#xff08;内置了不同的深度学习框架&#xff09;&#xff0c;最后创建即可 2、SSH远程连…
阅读更多...
第五章 linux编译器——gcc/g++的使用

第五章 linux编译器——gcc/g++的使用

第五章 linux编译器——gcc/g的使用 一、编辑器与编译器的区别二、gcc/g的编译过程前言1、阶段1&#xff1a;预处理&#xff08;头文件、宏的替换&#xff09;&#xff08;1&#xff09;作用&#xff08;2&#xff09;指令&#xff08;3&#xff09;示例 2、阶段2&#xff1a;编…
阅读更多...
Linux--用户身份切换： su

Linux--用户身份切换： su

①普通用户切换成超级用户且更改路径&#xff1a;su - ②普通用户切换成超级用户且不更改路径&#xff1a;su root 或者 su ③(由普通用户切换来的)超级用户切换回普通用户&#xff1a;Ctrld ④超级用户切换成普通用户&#xff1a;su 普通用户名 ⑤普通用户a切换成普通用户b…
阅读更多...
Jetson Nano Swap交换空间增加

Jetson Nano Swap交换空间增加

依次输入以下命令&#xff0c;可以使交换空间增加3G&#xff0c;解决一些耗尽内存的程序出错。 sudo fallocate -l 3G /var/swapfile sudo chmod 600 /var/swapfile sudo mkswap /var/swapfile sudo swapon /var/swapfile sudo bash -c echo "/var/swapfile swap swap de…
阅读更多...
金九银十1060+ 道 Java面试题及答案整理(2023最新版)

金九银十1060+ 道 Java面试题及答案整理(2023最新版)

前言 今年的金三银四可是被裁员疫情搞得人心慌慌&#xff0c;由于大厂纷纷裁员&#xff0c;面试的竞争难度又上一层&#xff0c;不知道你是否在金三银四中拿到 offer&#xff1f;不过这些都过去了&#xff0c;现在马上迎来的是金九银十&#xff0c;按照往年来说&#xff0c;秋…
阅读更多...
python | 识别项目中的接口并生成接口文档

python | 识别项目中的接口并生成接口文档

识别项目中的接口并生成接口文档 前言起点用途使用方法控制台展示文档内容展示代码注意事项 前言 前段时间也是来了一场说走就走的旅行&#xff0c;去看了看祖国的大好河山&#xff0c;不得不说也是一场让我难忘的旅行&#xff0c;可惜钱包太扁了&#xff0c;禁不起我的的折腾…
阅读更多...
NOSQL之redis配置和安装

NOSQL之redis配置和安装

关系数据库与非关系型数据库 ●关系型数据库&#xff1a; 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上&#xff0c;一般面向于记录。 SQL 语句&#xff08;标准数据查询语言&#xff09;就是一种基于关系型数据库…
阅读更多...
Andriod Studio安装使用中

Andriod Studio安装使用中

暑假快乐啊&#xff0c;终于考完啦 Android studio安装的前提是必须保证安装了jdk1.8版本以上 如果没有安装好&#xff0c;那么可以参考这个&#xff1a;win10下载jdk18以及环境配置 一、在官网下载Android Studio 官网&#xff1a;https://developer.android.google.cn/stud…
阅读更多...
jedis使用,操作Redis数据库1

jedis使用,操作Redis数据库1

使用jedis的原因; 1.提高性能&#xff0c;减少Socket的创建和销毁对性能的影响 2.是一个线程安全的网络连接池。可以用JedisPool创建一些可靠Jedis实例&#xff0c;可以从池中获取Jedis实例&#xff0c;使用完后再把Jedis实例归还给JedisPool连接池。合理的JedisPool资源池参数…
阅读更多...
8 款在线 API 接口文档管理工具；好用！

8 款在线 API 接口文档管理工具；好用！

1、Postman Postman是被大家所熟知的网页调试Chrome插件&#xff0c;我们常常用它来进行临时的http请求调试。幸运的是&#xff0c;Postman可以将调试过的请求保存到Collection中。形成的Collection就可以作为一份简单有效且支持在线测试的接口文档&#xff0c;使用同一账号登录…
阅读更多...
Jenkins+Docker 实现一键自动化部署项目

Jenkins+Docker 实现一键自动化部署项目

1、环境配置 环境&#xff1a;centos7git(gitee) 简述实现步骤&#xff1a;在docker安装jenkins&#xff0c;配置jenkins基本信息&#xff0c;利用Dockerfile和shell脚本实现项目自动拉取打包并运行。 2、安装docker docker 安装社区版本CE 确保 yum 包更新到最新。 yum …
阅读更多...
react-redux（由浅到深）

react-redux（由浅到深）

文章目录 1. redux1.1 概述与使用原则1.2工作流程1.2.1 三个核心 1.3 store1.4 action1.5 reducer1.5.1 合并reducers 1.6 dispatch getState 及状态更新 2. react-redux2.1 基本特征2.2 connect()、mapStateToProps2.3 mapDispatchToProps2.4Provider2.5. 中间件&#xff0c;c…
阅读更多...
【动手学习深度学习--逐行代码解析合集】04softmax回归的从零开始实现

【动手学习深度学习--逐行代码解析合集】04softmax回归的从零开始实现

【动手学习深度学习】逐行代码解析合集 04softmax回归的从零开始实现 视频链接&#xff1a;动手学习深度学习–softmax回归的从零开始实现 课程主页&#xff1a;https://courses.d2l.ai/zh-v2/ 教材&#xff1a;https://zh-v2.d2l.ai/ 1、 softmax网络架构 2、 softmax运算 3、…
阅读更多...
实验三：运算类编程实验

实验三：运算类编程实验

实验目的 阐明本实验的目的。 一实验目的掌握学精变C6应) 乘汉运第《结购 3位)江程产设计方法穿握双精度[3位)加法运算乡饰程产设计方法穿握双精度园) 朱讼运算 [结果为64位)汇编往广设计方讯 实验要求 说明实现本实验需要掌握的知识及本实验需要的实验环境 、实强要求 了解简单…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023