springboot+mybatis+echarts +mysql制作数据可视化大屏_百度小程序

您的位置：上海毫米网络优化公司 > 小程序 > 百度小程序 >

一、数据源

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的文件名都能够查看相应的图！

要码源的私聊我

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

上一篇：【毕设必备】手把手带你用Python搭建一个简单的后端服务- API的创建，前后端交互的数据传递，GET，POST，JSON，FLASK

下一篇：大数据SpringBoot|基于SpringBoot+SSM+MyBatis框架的迷你仿天猫商城购物系统