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

最新推荐文章于 2024-04-26 19:11:29 发布
最新推荐文章于 2024-04-26 19:11:29 发布
阅读量3.1k 收藏 22
点赞数 7
分类专栏： 可视化 文章标签： spring boot echarts mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55906442/article/details/131496904
版权

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

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

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

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

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

一个人的牛牛
关注
  • 7
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 31
    评论
专栏目录
数据可视化的智慧河南大屏 JAVA毕业设计 Vue+SpringBoot+MySQL
10-24
基于JAVA+Vue+SpringBoot+MySQL的数据可视化的智慧河南大屏，包含了GDP、人口、土地面积、企业数、人均收入数据排行、地图展示等模块，还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块，数据可视化的智慧河南大屏基于角色的访问控制，给数据管理员、普通用户使用，可将权限精确到按钮级别，您可以自定义角色并分配权限，系统适合设计精确的权限约束需求。 项目讨论帖：https://bbs.csdn.net/topics/617437820
Springboot+mybatis+echarts实现数据可视化 折线图饼图柱状图
06-22
Springboot+mybatis+echarts实现数据可视化 可实现折线图饼图柱状图
34【源码】数据可视化：基于 Echarts + Python 动态实时大屏 - 视频平台_数据可视化大屏源代码
最新发布
2401_84592187的博客
04-26 831
Python崛起并且风靡，因为优点多、应用领域广、被大牛们认可。学习 Python 门槛很低，但它的晋级路线很多，通过它你能进入机器学习、数据挖掘、大数据，CS等更加高级的领域。Python可以做网络应用，可以做科学计算，数据分析，可以做网络爬虫，可以做机器学习、自然语言处理、可以写游戏、可以做桌面应用…Python可以做的很多，你需要学好基础，再选择明确的方向。这里给大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！
基于springboot+echarts开发的医疗管理数据分析系统
06-14
Java医疗数据分析管理系统源码 运行环境 jdk8+tomcat8+mysql+eclipse+maven 项目技术 spring+spring mvc+mybatis+bootstrap+jquery+bootstrap-table+echarts 登录地址:http://localhost:8080/log/do.html 管理员 Meadmin 123456 医生账号511002199506297038 123 科室账号NK1234 66666666 普通用户zuidaima 111111
springBoot2.1做的大屏数据展示
11-16
基于springboot2.1，oracle，mybitas，themeleaf做的大屏数据展示，拿来修改sql内容就可以使用，doc中有实际应用截图。也可以做学习springboot使用。
springboot+mybatis+echarts +mysql制作数据可视化大屏
qq_55906442的博客
07-08 1万+
成果展示：1）可以使用自己的MySQL数据库；2）使用我提供的数据。（免费下载）gmall_report用于可视化的SQL文件-MySQL文档类资源-CSDN下载MySQLIDEAjdk1.8Maven创建springboot项目有二种方式：1）在IDEA中创建2）在官网上创建我喜欢在官网创建官网地址（记得收藏）：https://start.spring.io/​ 注：1）注意红色框框的地方，选择你想要的版本和与你的计算机相应的配置；2）在1.处点击添加相关依赖；3）在2.处点击生成初始代码并下载。下面给出
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
10-19
主要介绍了PHP+jQuery实现滚屏无刷新动态加载数据功能,涉及php动态读取数据库及加载数据实现滚屏无刷新效果的具体操作技巧,需要的朋友可以参考下
【26】地图可视化：基于 Echarts + Java SpringBoot 的动态实时地图组件 - 点&气泡&流向&组合&区域&三级下钻地图
YYDataV的博客
06-15 1万+
在数据可视化大屏中，地图可视化是常用的高级图表之一。很多小伙伴们以为地图太高大上了，那么实现起来估计也不容易，说实话，确实不那么容易，直接用echarts是要花些时间研究的，但是我们可以将其二次封装，以后在项目中就可以实现拿来主义，这样就简单快捷多了。 3. 后端Java代码 二、封装的Echarts地图可视化组件 我将项目中常用的地图组件整理了一下，主要6组，分为： JSON数据格式 2. 点式+气泡组合地图 scatter + effectScatter JSON数
利用Echarts+Springboot实现数据可视化 数据可视化 Spring实现简单的数据可视化 自定义可视化图表
热门推荐
weixin_45437533的博客
11-26 1万+
最近老师在带做大数据项目，先做了个数据可视化。 简单来说就是： 利用Echarts+Springboot实现数据可视化 Echarts：调用Echarts.js的API实现图标数据展示 （echarts网址） https://echarts.apache.org/zh/index.html Springboot：编写接口访问 （目录结构如下） pom文件： <?xml version="1.0" encoding="UTF-8"?> <p.........
SpringBoot整合Echarts实现用户人数和性别展示
不愧是暮言的博客
05-07 2094
本文介绍了如何使用SpringBoot集成Echarts，实现展示用户人数和性别的功能。通过数据库设计、实现数据访问层、业务逻辑层和控制层的代码编写，以及前端页面的开发，本文详细地介绍了SpringBoot整合Echarts的实现步骤和代码。其中，使用Vue框架进行前端页面开发，增加了Web应用的可扩展性和易用性。同时，通过使用Echarts图表库，我们可以让数据呈现更为直观清晰，增强用户体验。
可视化大屏表格数据滚动的几种实现方案
IO14122的博客
02-28 1583
本文主要介绍可视化大屏中实现表格数据无缝滚动的几种方案，实现原理、实现方案、具体代码等。不同方案供大家参考，还有常用的第三方滚动插件推荐。
基于springboot+echart新闻可视化分析平台源码+数据库
04-02
基于springboot+echart新闻可视化分析平台源码+数据库
3【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-物联网平台大屏.zip
03-22
更多资料参考我的博文： YYDatav的数据可视化大屏《精彩案例汇总》（Java SpringBoot&Echarts源码） https://yydatav.blog.csdn.net/article/details/123652970 另有：YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码） https://yydatav.blog.csdn.net/article/details/120705616?spm=1001.2014.3001.5502
基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目
03-01
大屏设计是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。内置的基础功能包括数据源，数据集，报表管理。 多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，支持17种大屏组件，不会开发，照着设计稿也可以制作大屏。 三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。
1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析
03-18
1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析
Springboot+echarts实现可视化
08-25
Springboot+echarts实现可视化是指使用Springboot框架和echarts库实现数据可视化的技术架构。在本文中，我们将详细介绍如何使用Springboot和echarts实现可视化，包括后台代码和前端代码的实现细节。 一、项目架构...
Springboot+Echarts实现数据可视化项目
小白兔奶糖の博客
02-03 1015
首先，得明白 springboot 需要写什么内容？先理解下 MVC 模式！
SpringBoot整合数据可视化大屏使用
Datainside的博客
11-15 362
在Spring Boot框架中，我们可以使用一些优秀的前端数据可视化库来实现数据可视化大屏，例如ECharts、Highcharts等。通过引入前端数据可视化库（例如ECharts）、创建HTML页面、编写JavaScript代码以及从后端获取数据，我们可以实现一个简单的数据可视化大屏。在Spring Boot中，我们可以使用控制器类来处理前端请求，并将数据传递给HTML页面。通过以上步骤，我们可以在HTML页面中获取后端传递的数据，并在JavaScript代码中进行相应的数据可视化操作。
c++qt画可视化大屏连接数据库
10-23
C++和Qt是一种流行的编程语言和图形界面开发框架，可以用于实现可视化大屏应用并连接数据库。下面是一个简单的解释： Qt提供了QML（Qt Markup Language）和C++两种开发方式。我们可以使用这些工具来创建一个可视化大屏应用程序。 首先，我们需要使用Qt Creator创建一个新项目。选择适当的模板，例如Qt Quick Application模板，这样就可以使用QML进行界面设计。 在QML中，我们可以使用Qml Connections模块和Qml XmlListModel模块来连接数据库并获取数据。使用Qml Connections模块，我们可以轻松地建立和管理与数据库的连接。使用Qml XmlListModel模块，我们可以定义模型和视图来展现从数据库中检索到的数据。 在连接数据库之前，我们需要安装并配置适当的数据库驱动程序。例如，如果我们使用MySQL数据库，我们可以安装MySQL数据库驱动程序，并在项目配置文件中添加必要的配置。 然后，我们可以在QML中使用Qml Connections模块中的SqlConnection元素和XmlListModel元素来连接到数据库和展示数据。我们可以通过SqlConnection元素设置数据库的相关属性，例如主机名、用户名、密码、数据库名等。 一旦连接建立，我们可以使用XmlListModel元素中的QML属性，例如source、query、field等来指定从数据库中获取数据的方式。我们可以指定查询语句，然后使用field来指定要获取的字段。 最后，我们可以使用QML的各种组件来展示从数据库中检索到的数据。例如，我们可以使用Text组件来显示文本数据，或者使用ListView组件来显示多个数据项。 总之，在Qt中，我们可以使用QML和C++来开发可视化大屏应用程序并连接数据库。通过合理使用Qt提供的工具和模块，我们可以轻松实现可视化大屏的功能，并从数据库中获取和展示数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 31
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值