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

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

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

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

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

目录

 一、数据源

二、所需工具

三、项目框架搭建

四、代码编写

温度堆叠折线图

平均温度柱状图

温度变化堆叠面积图

南丁格尔玫瑰图

平均温度圆角环形图

五、大屏编写

---

成果展示：

​

 一、数据源

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

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

二、所需工具

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

三、项目框架搭建

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

四、代码编写

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

温度堆叠折线图

后端

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 getTemperatureData() {
        String query = "SELECT * FROM temperature";
        List> result = jdbcTemplate.queryForList(query);

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

        for (Map 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 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

前端

验证页面：运行项目，浏览器访问：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 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> result = jdbcTemplate.queryForList(query);

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

        for (Map 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 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

前端

验证页面：运行项目，浏览器访问：​​​​​​​​​​​​​​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 getTemperatureData() {
        String query = "SELECT * FROM temperature";
        List> result = jdbcTemplate.queryForList(query);

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

        for (Map 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 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

前端

 验证页面：运行项目，浏览器访问​​​​​​​：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 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> result = jdbcTemplate.queryForList(query);

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

        for (Map 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 data = new HashMap<>();
        data.put("weekStartDates", weekStartDates);
        data.put("averageTemperatures", averageTemperatures);

        return data;
    }
}

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

前端

验证页面：运行项目，浏览器访问​​​​​​​：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 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> result = jdbcTemplate.queryForList(query);

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

        for (Map 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 data = new HashMap<>();
        data.put("weekStartDates", weekStartDates);
        data.put("averageTemperatures", averageTemperatures);

        return data;
    }
}

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

前端

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

五、大屏编写

代码：

  
  
  


温度数据前端HTML大屏

  

    
  
  

    
  
  

    
  
  

    
  
  

    
  

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

​

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

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

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

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