相关推荐recommended
springboot+mybatis+echarts +mysql制作数据可视化大屏
作者:mmseoamin日期:2023-12-25

作者水平低,如有错误,恳请指正!谢谢!!!!!

目录

一、数据源

二、所需工具

三、项目框架搭建

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测试


成果展示:

springboot+mybatis+echarts +mysql制作数据可视化大屏,第1张

一、数据源

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创建项目

springboot+mybatis+echarts +mysql制作数据可视化大屏,第2张

 注:

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

2)在1.处点击添加相关依赖;

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

下面给出我的配置信息:

springboot+mybatis+echarts +mysql制作数据可视化大屏,第3张

 项目下载后解压,然后用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

springboot+mybatis+echarts +mysql制作数据可视化大屏,第4张

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创建目录结构

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

springboot+mybatis+echarts +mysql制作数据可视化大屏,第5张

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类,如下图;

springboot+mybatis+echarts +mysql制作数据可视化大屏,第6张

(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接口文件;

springboot+mybatis+echarts +mysql制作数据可视化大屏,第7张

 (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接口文件

springboot+mybatis+echarts +mysql制作数据可视化大屏,第8张

(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类文件;

springboot+mybatis+echarts +mysql制作数据可视化大屏,第9张

(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)点击启动项目

springboot+mybatis+echarts +mysql制作数据可视化大屏,第10张

 2)启动成功样式

springboot+mybatis+echarts +mysql制作数据可视化大屏,第11张

 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

springboot+mybatis+echarts +mysql制作数据可视化大屏,第12张

springboot+mybatis+echarts +mysql制作数据可视化大屏,第13张

 注:

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

如果有数据为空,先检查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创建包

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

springboot+mybatis+echarts +mysql制作数据可视化大屏,第14张

 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




    
    ECharts
    
    
    



map.html




    
    地图
    
    
    


bar.html




    
    虚拟柱状图
    
    


bar-trend.html



    
    柱状图
    
    
    



bar-negative.html



    
    柱状图
    
    
    



endindex.html





    
    
    
    
    
    
    数据仓库可视化展示


    
        
            
                
销售环
商品销售额统计
销量统计
数据仓库可视化展示

虚拟消费
收益情况

5.4测试

1)运行项目

2)进入浏览器

http://localhost:8080/endindex.html

springboot+mybatis+echarts +mysql制作数据可视化大屏,第1张

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

注:

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

要码源的私聊我

作者水平低,如有错误,恳请指正!谢谢!!!!!