基于springboot+Echarts+js制作实时大屏

基于springboot+Echarts+js制作实时大屏

最近工作中让完成一个实时大屏的东西，就是类似于电商实时数据成交数据的那种大屏，但是在网上查阅的资料对于后台的js的转输都有点模糊，于是自己写了一个较为完整的实现后台数据大屏显示的spring项目。若有不足之处，还请各位大佬批评与指正。

项目所需工具

博主这里所用的是IntelliJ IDEA 2020.1，这边给出相应的下载链接，可激活。内置相应的解释说明
链接：https://pan.baidu.com/s/1jFg-EdqGLncCv43fl6KqUg
提取码：4mgi

数据库使用的是mysql-5.7.25版本，当然您也可以使用其他版本。jdk版本为1.8，maven版本设置为3.5.2（大家可自行百度下载）

关于项目的目录结构，这边也一并贴出来供大家进行参考

关于创建项目的步骤

之后一步一步进行next即可

目录

一、在pom中添加所需依赖

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>


        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>


        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.6</version>
        </dependency>

    </dependencies>

关于所需依赖，大家若有需要自行添加的依赖，可自行访问网站进行搜索。https://mvnrepository.com/

二、配置application.yml

#设置端口号（端口号根据大家意图进行修改，若不修改，则是默认的8080端口）
server:
  port: 8089
spring:
  #数据库配置
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/echarts?useUnicode=true&characterEncoding=UTF-8&userSSL=true&serverTimezone=GMT%2B8
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root#自行修改您的数据库名称和密码
    password: root
    initial-size: 10
    max-active: 20
    max-idle: 8
    min-idle: 8
  #静态资源配置
  mvc:
    static-path-pattern: /static/**
  #thymeleaf模板引擎配置
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML
    encoding: UTF-8
    cache: false
    servlet:
      content-type: text/html
mybatis:
  #配置实体类的包路径
  type-aliases-package: com.lch.echarts.entity
  #配置对应的xml路径
  mapper-locations: classpath:mapping/*.xml

三、编写三层代码
1、entity实体类
关于User代码

package com.lch.echarts.entity;

public class User {
   
    private int id;
    private String province;
    private String nums;
    private String carid;

    public int getId() {
   
        return id;
    }

    public void setId(int id) {
   
        this.id = id;
    }

    public String getProvince() {
   
        return province;
    }

    public void setProvince(String province) {
   
        this.province = province;
    }

    public String getNums() {
   
        return nums;
    }

    public void setNums(String nums) {
   
        this.nums = nums;
    }

    public String getCarid() {
   
        return carid;
    }

    public void setCarid(String carid) {
   
        this.carid = carid;
    }

    @Override
    public String toString() {
   
        return "User{" +
                "id=" + id +
                ", province='" + province + '\'' +
                ", nums='" + nums + '\'' +
                ", carid='" + carid + '\'' +
                '}';
    }
}

关于shuju代码

package com.lch.echarts.entity;

public class Shuju {
   
    private String policyno;
    private String carcheckername;
    private String appliname;
    private String vinno;

    public String getPolicyno() {
   
        return policyno;
    }

    public void setPolicyno(String policyno) {
   
        this.policyno = policyno;
    }

    public String getCarcheckername() {
   
        return carcheckername;
    }

    public void setCarcheckername(String carcheckername) {
   
        this.carcheckername = carcheckername;
    }

    public String getAppliname() {
   
        return appliname;
    }

    public void setAppliname(String appliname) {
   
        this.appliname = appliname;
    }

    public String getVinno() {
   
        return vinno;
    }

    public void setVinno(String vinno) {
   
        this.vinno = vinno;
    }

    @Override
    public String toString() {
   
        return "Shuju{" +
                "policyno='" + policyno + '\'' +
                ", carcheckername='" + carcheckername + '\'' +
                ", appliname='" + appliname + '\'' +
                ", vinno='" + vinno + '\'' +
                '}';
    }
}

2、Controller控制层

package com.lch.echarts.controller;


import com.lch.echarts.entity.Shuju;
import com.lch.echarts.entity.User;
import com.lch.echarts.service.shujuservice;
import com.lch.echarts.service.userservice;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;


@Controller
public class controller {
   

    @Autowired
    private userservice userService; //注入UserService
    @Autowired
    private shujuservice shujuservice; //注入shujuService

    @RequestMapping( "/show")
    @ResponseBody
    public List<User> show() {
   
        List<User> users=userService.userList();
        return users;
    }
    @RequestMapping("/A")
    @ResponseBody
    public List<Shuju> A(){
   
        List<Shuju> shujus=shujuservice.shujuList();
        return shujus;
    }

    @RequestMapping( "/echarts")
    public String show2() {
   
        return "echarts";
    }

}

postman发送请求，获取Json数据格式，控制层获取到，即说明我们获取到相关的数据了。

3、service层

package com.lch.echarts.service;

import com.lch.echarts.entity.Shuju;
import com.lch.echarts.mapper.shujumapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;


@Service
public class shujuservice {
   

    @Autowired
    private shujumapper shujumapper; //注入UserMapper

    /*
     * 查询所有用户
     */
    public List<Shuju> shujuList(){
   
        return shujumapper.shujuList();
    }
}

package com.lch.echarts.service;

import com.lch.echarts.entity.User;
import com.lch.echarts.mapper.usermapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class userservice {
   

    @Autowired
    private usermapper usermapper; //注入UserMapper


    /*
     * 查询所有用户
     */
    public List<User> userList(){
   
        return usermapper.userList();
    }
}

4、mapper

package com.lch.echarts.mapper;

import com.lch.echarts.entity.User;
import org.springframework.stereotype.Repository;

import java.util.List;


@Repository  //该注解是要与启动类中的@mapperscan配套使用
public interface usermapper {
   

    /*
     * 查询所有用户
     */
    List<User> userList();
}

package com.lch.echarts.mapper;

import com.lch.echarts.entity.Shuju;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository  //该注解是要与启动类中的@mapperscan配套使用
public interface shujumapper {
   

    /*
     * 查询
     */
    List<Shuju> shujuList();
}

mapping数据访问层

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lch.echarts.mapper.shujumapper">

    <!--查询所有用户-->
    <select id="shujuList" resultType="Shuju">
        select * from shuju
    </select>

</mapper>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lch.echarts.mapper.usermapper">

    <!--查询所有用户-->
    <select id="userList" resultType="User">
        select * from user
    </select>

</mapper>

5、前端js 关键代码

var names = [];    //横坐标数组（实际用来盛放X轴坐标值）
            var value = [];    //纵坐标数组（实际用来盛放Y坐标值）
            $.ajax({
   
                type: "post",
                async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url: "/A",    //请求发送到dataActiont处
                data: {
   },
                dataType: "json",        //返回数据形式为json
                success: function (result) {
   
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
   
                        for (var i = 0; i < result.length; i++) {
   
                            names.push(result[i].appliname);
                            value.push(result[i].vinno);
                        }
                        myChart.hideLoading();

四、运行结果

转载：https://blog.csdn.net/qq_41635942/article/details/113849315