大数据数据仓库 javascript 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：

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

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

ECharts

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

要码源的私聊我

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

金钥匙

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

销售环

商品销售额统计

销量统计

虚拟消费

收益情况

开发语言如何在android开发中使用Kotlin Flow(二)

java 开发语言数字化转型【大数据 OLAP 技术新书推荐】字节跳动阿里巴巴大厂资深架构师程序员多年实践经验总结《ClickHouse入门、实战与进阶》ClickHouse领域集大成之作，入门标准参考书日常工作案头必备手册

发表评论取消回复

金钥匙

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

销售环

商品销售额统计

销量统计

虚拟消费

收益情况

开发语言 如何在android开发中使用Kotlin Flow(二)

java 开发语言 数字化转型 【大数据 OLAP 技术新书推荐】 字节跳动阿里巴巴大厂资深架构师程序员多年实践经验总结《ClickHouse入门、实战与进阶》ClickHouse领域集大成之作，入门标准参考书日常工作案头必备手册

相关文章

发表评论取消回复

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

开发语言如何在android开发中使用Kotlin Flow(二)

java 开发语言数字化转型【大数据 OLAP 技术新书推荐】字节跳动阿里巴巴大厂资深架构师程序员多年实践经验总结《ClickHouse入门、实战与进阶》ClickHouse领域集大成之作，入门标准参考书日常工作案头必备手册