springboot+mybatis+echarts +mysql制作数据可视化大屏

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

目录

一、数据源

二、所需工具

三、项目框架搭建

3.1新建springboot项目

3.1.1进入官网

3.1.2创建项目

四、后端代码编写

4.1根据需求修改pom.xml

4.2配置数据源

4.3创建目录结构

4.4后端编写代码

4.4.1entity类

4.4.2dao

4.4.3service

4.4.4controller

4.5测试

五、前端代码编写

5.1准备

5.2创建包

 5.3代码编写

5.3.1配置静态资源访问

5.3.2在templates目录下创建HTML文件

5.4测试

---

成果展示：

一、数据源

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

2）使用我提供的数据。（免费下载）

gmall_report用于可视化的SQL文件-MySQL文档类资源-CSDN下载

二、所需工具

MySQL

IDEA

jdk1.8

Maven

三、项目框架搭建

3.1新建springboot项目

创建springboot项目有二种方式：

1）在IDEA中创建

2）在官网上创建

我喜欢在官网创建

3.1.1进入官网

官网地址（记得收藏）：

https://start.spring.io/

3.1.2创建项目

​

 注：

1）注意红色框框的地方，选择你想要的版本和与你的计算机相应的配置；

2）在1.处点击添加相关依赖；

3）在2.处点击生成初始代码并下载。

下面给出我的配置信息：

​

 项目下载后解压，然后用IDEA打开解压后的项目。

四、后端代码编写

4.1根据需求修改pom.xml

我的pom.xml：

   4.0.0
   
      org.springframework.boot
      spring-boot-starter-parent
      2.7.1
       
   
   com.example
   demo
   0.0.1-SNAPSHOT
   demo
   Demo project for Spring Boot
   
      1.8
   
   
      
         org.springframework.boot
         spring-boot-starter-web
      

      
         org.mybatis.spring.boot
         mybatis-spring-boot-starter
         2.2.2
      

      
         com.baomidou
         mybatis-plus-boot-starter
         3.1.2
      

      
         org.springframework.boot
         spring-boot-devtools
         runtime
         true
      

      
         mysql
         mysql-connector-java
      

      
         org.projectlombok
         lombok
         true
         1.18.4
      

      
         org.springframework.boot
         spring-boot-starter-test
         test
      

      
         org.springframework.boot
         spring-boot-starter-thymeleaf
      

   

   
      
         
            org.springframework.boot
            spring-boot-maven-plugin
            
               
                  
                     org.projectlombok
                     lombok
                  
               
            
         
      
   
1）

4.2配置数据源

1）重命名或者复制，把application.properties变为application.yml

​

2） 在application.yml中添加内容：

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://192.168.17.XXX:3306/gmall_report?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=CONVERT_TO_NULL
    username: root
    password: 123456

注：要按照实际情况修改内容。

（1）192.168.17.XXX是我的MySQL所在计算机的IP地址，要修改成你的；

（2）3306:是端口号；

（3）gmall_report是用到的数据库名；

（4）root是MySQL的用户名，123456是用户相应的密码；

4.3创建目录结构

按照下图创建你的包，使其目录和下图一样。

​

4.4后端编写代码

想要从MySQL中提取数据，要编写entity，dao，servier，controller类或者接口，强烈建议一张一张表的编写，方便梳理。

本文用到的表有：goods，ads_area_topic，ads_order_day_count，ads_product_sale_topN，ads_user_action_count

4.4.1entity类

在entity包下面创建java类，如下图；

​

（1） AreaTopicEntity

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;

@Data
@TableName("ads_area_topic")
public class AreaTopicEntity implements Serializable {
    private static final long serialVersionUID = 2L;

    @TableId
    private String dt;

    private String id;

    private String provinceName;

    private String regionName;

    private String orderDayAmount;

    private String paymentDayAmount;

    private String areaCode;
}

 注：

1）ads_area_topic是用到的mysql表名；

2）dt ,       id,        provinceName,        regionDayAmouth,         orderDayAmount,       paymentDayAmount,        areaCode;是ads_area_topic表的列名；

（2）GoodEntity 

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;

@Data
@TableName("goods")
public class GoodEntity implements Serializable {
    private static final long serialVersionUID = 1L;

   @TableId
    private Long id;

   private String name;

   private Integer num;

}

（3）OrderDayCountEntity

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;

@Data
@TableName("ads_order_daycount")
public class OrderDayCountEntity implements Serializable {
    private static final Long serialVersionUID = 1L;

    @TableId
    private String dt;

    private String orderCount;

    private String orderAmount;

    private String orderUsers;
}

（4）ProductSaleTopNEntity

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;

@Data
@TableName("ads_product_sale_topN")
public class ProductSaleTopNEntity implements Serializable {
    private static final Long serialVersionUID = 1L;

    @TableId
    private String dt;

    private String skuId;

    private String paymentAmount;
}

（5）UserActionCountEntity

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import javax.print.DocFlavor;
import java.io.Serializable;

@Data
@TableName("ads_user_action_convert_day")
public class UserActionCountEntity implements Serializable {
    private static final Long serialVersionUID = 1L;

    @TableField
    private String dt;
    private String homeCount;
    private String goodDetailCount;
    private String home2goodDetailConvertRatio;
    private String cartCount;
    private String goodDetail2cartConvertRatio;
    private String orderCount;
    private String cart2orderConvertRatio;
    private String paymentAmount;
    private String order2paymentConvertRatio;

}

4.4.2dao

按照下图在dao包下面创建java接口文件；

​

 （1）AreaTopicDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.AreaTopicEntity;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface AreaTopicDao extends BaseMapper {
}

（2）GoodDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.GoodEntity;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface GoodDao extends BaseMapper {
}

（3）OrderDayCountDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.OrderDayCountEntity;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface OrderDayCountDao extends BaseMapper {
}

（4）ProductSaleTopNDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.ProductSaleTopNEntity;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface ProductSaleTopNDao extends BaseMapper {
}

（5）UserActionCountDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.UserActionCountEntity;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserActionCountDao extends BaseMapper {
}

4.4.3service

1）在service包下创建一个impl包；

2）按照下图的布局在service和impl包下面创建java类和java接口文件

​

（1）AreaTopicService

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.demo.entity.AreaTopicEntity;

public interface AreaTopicService extends IService {
}

（1.1） AreaTopicServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.dao.AreaTopicDao;
import com.example.demo.entity.AreaTopicEntity;
import com.example.demo.service.AreaTopicService;
import org.springframework.stereotype.Service;

@Service("areatopicService")
public class AreaTopicServiceImpl extends ServiceImpl implements AreaTopicService {
}

（2）GoodService

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.demo.entity.GoodEntity;


public interface GoodService extends IService {
}

（2.1）GoodServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.dao.GoodDao;
import com.example.demo.entity.GoodEntity;
import com.example.demo.service.GoodService;
import org.springframework.stereotype.Service;

@Service("goodService")
public class GoodServiceImpl extends ServiceImpl implements GoodService {
}

（3）OrderDayCountService

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.demo.entity.OrderDayCountEntity;

public interface OrderDayCountService extends IService {
}

（3.1）OrderDayCountServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.dao.OrderDayCountDao;
import com.example.demo.entity.OrderDayCountEntity;
import com.example.demo.service.OrderDayCountService;
import org.springframework.stereotype.Service;

@Service("orderdaycountService")
public class OrderDayCountServiceImpl extends ServiceImpl implements OrderDayCountService {
}

（4）ProductSaleTopNService

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.demo.entity.ProductSaleTopNEntity;

public interface ProductSaleTopNService extends IService {
}

（4.1）ProductSaleTopNServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.dao.ProductSaleTopNDao;
import com.example.demo.entity.ProductSaleTopNEntity;
import com.example.demo.service.ProductSaleTopNService;
import org.springframework.stereotype.Service;

@Service("productsaletopNService")
public class ProductSaleTopNServiceImpl extends ServiceImpl implements ProductSaleTopNService {
}

（5）UserActionCountService

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.demo.entity.UserActionCountEntity;

public interface UserActionCountService extends IService {
}

（5.1）UserActionCountServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.dao.UserActionCountDao;
import com.example.demo.entity.UserActionCountEntity;
import com.example.demo.service.UserActionCountService;
import org.springframework.stereotype.Service;

@Service("useractioncountService")
public class UserActionCountServiceImpl extends ServiceImpl implements UserActionCountService {
}

4.4.4controller

按照下图的布局在controller包下面创建java类文件；

​

（1）AreaTopicController

import com.example.demo.entity.AreaTopicEntity;
import com.example.demo.service.AreaTopicService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("areatopic")
public class AreaTopicController {
    @Autowired
    private AreaTopicService areaTopicService;

    @RequestMapping("list")
    public List list(){
        return areaTopicService.list();
    }
}

（2） GoodController

import com.example.demo.entity.GoodEntity;
import com.example.demo.service.GoodService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("goods")
public class GoodController {

    @Autowired
    private GoodService goodService;

    @RequestMapping("list")
    public List list() {

        return goodService.list();
    }
}

（3）OrderDayCountController

import com.example.demo.entity.OrderDayCountEntity;
import com.example.demo.service.OrderDayCountService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("orderdaycount")
public class OrderDayCountController {

    @Autowired
    private OrderDayCountService orderdaycountService;

    @RequestMapping("list")
    public List list(){
        return orderdaycountService.list();
    }
}

（4）ProductSaleTopNController

import com.example.demo.entity.ProductSaleTopNEntity;
import com.example.demo.service.ProductSaleTopNService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("productsaletopN")
public class ProductSaleTopNController {

    @Autowired
    private ProductSaleTopNService productSaleTopNService;

    @RequestMapping("list")
    public List list(){
        return productSaleTopNService.list();
    }
}

（5）UserActionCountController

import com.example.demo.entity.UserActionCountEntity;
import com.example.demo.service.UserActionCountService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("useractioncount")
public class UserActionCountController {

    @Autowired
    private UserActionCountService userActionCountService;
    @RequestMapping("list")
    public List list(){
        return userActionCountService.list();
    }
}

4.5测试

1）点击启动项目

​

 2）启动成功样式

​

 3）进入浏览器，测试接口

http://localhost:8080/areatopic/list
http://localhost:8080/goods/list
http://localhost:8080/orderdaycount/list
http://localhost:8080/productsaletopN/list
http://localhost:8080/useractioncount/list

​

​

 注：

注意查看数据，都出现数据说明上面的代码没有问题！ 

如果有数据为空，先检查mysql数据库的数据有没有问题，没有问题再检查相应的entity的代码；

注意，如果数据库表的列名中有下划线，entity中下划线的后一位要用大写，不能用下划线；

比如：

id_user --------->idUser

gmall_ip_use -------------->gmallIpUse

五、前端代码编写

5.1准备

下载echarts.min.js，jquery-3.5.1.min.js.china.js

1)通过以下官网可以找到：

下载 - Apache ECharts

Download jQuery | jQuery

jquery下载所有版本（实时更新）

2)知道大家下载麻烦，我已经准备了好了，内含用到的css!免费下载哦！

echarts，jQuery文件-Javascript文档类资源-CSDN下载

5.2创建包

按照下面结构创建相应的文件和文件夹；

​

 5.3代码编写

5.3.1配置静态资源访问

在properties.yml中添加

resources:
  web:
    resources:
      static-locations: classpath:/templates/, classpath:/static/

5.3.2在templates目录下创建HTML文件

k.html

pie.html

index.html

line.html

map.html

bar.html

bar-trend.html

bar-negative.html

endindex.html

    
    
    
    

    
    
    




    

        

            

                

                

                    
销售环
                
                

                    
                
                

                    
商品销售额统计
                
                

                    
                
                

                    
销量统计
                
                

                    
                
            
        

        

            

                数据仓库可视化展示
            
            

                

                    

                
                

                    

                
                

                    
                
                

                    

                
                

                    
                
            
        

        

            

                

                

                    
虚拟消费
                
                

                    
                
                

                    
                
                

                    

                        
收益情况
                    
                    
                
            
        
    

5.4测试

1）运行项目

2）进入浏览器

http://localhost:8080/endindex.html

​

说明：为了偷懒，只有pie.html，        index.html，        line.html调用了mysql的数据，其他的数据是手敲的。

注：

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

要码源的私聊我

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