Echarts可视化-数据请求-代码实现和思路

需求：为前端可视化图表提供数据支持。

实现：

  • 时间戳获取优化（细化到秒）

  • 根据时间获取数据（SQL编写）

  • 前端需求数据返回（数据VO）

内容

  • Apache ECharts

  • 营业额统计

  • 用户统计

  • 订单统计

  • 销量排名Top10

功能实现：数据统计

1. Apache ECharts

1.1 介绍

Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。 官网地址：Apache ECharts

常见效果展示：

1). 柱形图

2). 饼形图

3). 折线图

总结：不管是哪种形式的图形，最本质的东西实际上是数据，它其实是对数据的一种可视化展示。

1.2 入门案例

Apache Echarts官方提供的快速入门：快速上手 - 使用手册 - Apache ECharts

效果展示：

实现步骤：

1). 引入echarts.js 文件(当天资料已提供)

2). 为 ECharts 准备一个设置宽高的 DOM

3). 初始化echarts实例

4). 指定图表的配置项和数据

5). 使用指定的配置项和数据显示图表

代码开发：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));
​// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};
​// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
</html>

总结：使用Echarts，重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据，然后响应给前端来展示图表。

2. 营业额统计

2.1 需求分析和设计

2.1.1 产品原型

营业额统计是基于折现图来展现，并且按照天来展示的。实际上，就是某一个时间范围之内的每一天的营业额。同时，不管光标放在哪个点上，那么它就会把具体的数值展示出来。并且还需要注意日期并不是固定写死的，是由上边时间选择器来决定。比如选择是近7天、或者是近30日，或者是本周，就会把相应这个时间段之内的每一天日期通过横坐标展示。

原型图：

业务规则：

  • 营业额指订单状态为已完成的订单金额合计

  • 基于可视化报表的折线图展示营业额数据，X轴为日期，Y轴为营业额

  • 根据时间选择区间，展示每天的营业额数据

2.1.2 接口设计

通过上述原型图，设计出对应的接口。

查询类的操作GET

注意：具体返回数据一般由前端来决定，前端展示图表，具体折现图对应数据是什么格式，是有固定的要求的。 所以说，后端需要去适应前端，它需要什么格式的数据，我们就给它返回什么格式的数据。

2.2 代码开发

在pojo模块，TurnoverReportVO.java

实现前端需求的数据返回格式。

​

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
​
import java.io.Serializable;
​
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class TurnoverReportVO implements Serializable {
​//日期，以逗号分隔，例如：2022-10-01,2022-10-02,2022-10-03private String dateList;
​//营业额，以逗号分隔，例如：406.0,1520.0,75.0private String turnoverList;
​
}

2.2.2 Controller层

根据接口定义创建ReportController：

​

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
​
import javax.servlet.http.HttpServletResponse;
import java.time.LocalDate;
​
/*** 数据统计相关接口*/
@RestController
@RequestMapping("/admin/report")
@Api(tags = "数据统计相关接口")
@Slf4j
public class ReportController {
​@Autowiredprivate ReportService reportService;
​/*** 营业额统计* @param begin* @param end* @return*/@GetMapping("/turnoverStatistics")@ApiOperation("营业额统计")//接收日期并封装格式public Result<TurnoverReportVO> turnoverStatistics(@DateTimeFormat(pattern = "yyyy-MM-dd")  LocalDate begin,@DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end){log.info("营业额数据统计：{},{}",begin,end);return Result.success(reportService.getTurnoverStatistics(begin,end));}

2.2.3 Service层接口

创建ReportService接口，声明getTurnover方法：

import javax.servlet.http.HttpServletResponse;
import java.time.LocalDate;
​
public interface ReportService {
​/*** 统计指定时间区间内的营业额数据* @param begin* @param end* @return*/TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate end);

2.2.4 Service层实现类

  • 根据时间获取数据

  • 数据判断和封装返回

创建ReportServiceImpl实现类，实现getTurnover方法:

import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.apache.poi.xssf.usermodel.XSSFRow;
import org.apache.poi.xssf.usermodel.XSSFSheet;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
​
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.time.LocalDate;
import java.time.LocalDateTime;
import java.time.LocalTime;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
​
@Service
@Slf4j
public class ReportServiceImpl implements ReportService {
​@Autowiredprivate OrderMapper orderMapper;@Autowiredprivate UserMapper userMapper;
​
​@Autowiredprivate WorkspaceService workspaceService;
​/*** 统计指定时间区间内的营业额数据** @param begin* @param end* @return*/public TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate end) {
​//1、当前集合用于存放从begin到end范围内的每天的日期List<LocalDate> dateList = new ArrayList<>();
​dateList.add(begin);
​//遍历添加集合while (!begin.equals(end)) {//日期计算，计算指定日期的后一天对应的日期begin = begin.plusDays(1);dateList.add(begin);}
​//2、存放每天的营业额List<Double> turnoverList = new ArrayList<>();
​for (LocalDate date : dateList) {
​//查询date日期对应的营业额数据，营业额是指：状态为“已完成”的订单金额合计.//将date时间细化成秒，用于匹配到秒下单的时间。一天的开始与结束时刻。LocalDateTime beginTime = LocalDateTime.of(date, LocalTime.MIN);LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);
​// 数据查询SQL ：select sum(amount) from orders where order_time > beginTime and order_time < endTime and status = 5//数据格式封装mapMap map = new HashMap();map.put("begin", beginTime);map.put("end", endTime);map.put("status", Orders.COMPLETED);
​Double turnover = orderMapper.sumByMap(map);
​//如果今天没有订单为null，将null转为0，解决这个小bug！！！turnover = turnover == null ? 0.0 : turnover;//将元素封装成集合turnoverList.add(turnover);}
​//3、构建-封装返回结果（list——>String）return TurnoverReportVO.builder().dateList(StringUtils.join(dateList, ",")).turnoverList(StringUtils.join(turnoverList, ",")).build();}

2.2.5 Mapper层

在OrderMapper接口声明sumByMap方法：

/*** 根据动态条件统计营业额* @param map*/Double sumByMap(Map map);

在OrderMapper.xml文件中编写动态SQL：

<select id="sumByMap" resultType="java.lang.Double">select sum(amount) from orders<where><if test="status != null">and status = #{status}</if><if test="begin != null">and order_time &gt;= #{begin}</if><if test="end != null">and order_time &lt;= #{end}</if></where>
</select>

2.3 功能测试

可以通过如下方式进行测试：

  • 接口文档测试

  • 前后端联调测试

启动服务器，启动nginx，直接采用前后端联调测试。

2.4 代码提交

3. 用户统计

3.1 需求分析和设计

3.1.1 产品原型

所谓用户统计，实际上统计的是用户的数量。通过折线图来展示，上面这根蓝色线代表的是用户总量，下边这根绿色线代表的是新增用户数量，是具体到每一天。所以说用户统计主要统计两个数据，一个是总的用户数量，另外一个是新增用户数量。

原型图：

业务规则：

  • 基于可视化报表的折线图展示用户数据，X轴为日期，Y轴为用户数

  • 根据时间选择区间，展示每天的用户总量和新增用户量数据

3.1.2 接口设计

根据上述原型图设计接口。

3.2 代码开发

在pojo模块，UserReportVO.java已定义

​

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;
​
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class UserReportVO implements Serializable {
​//日期，以逗号分隔，例如：2022-10-01,2022-10-02,2022-10-03private String dateList;
​//用户总量，以逗号分隔，例如：200,210,220private String totalUserList;
​//新增用户，以逗号分隔，例如：20,21,10private String newUserList;
​
}

3.2.2 Controller层

根据接口定义，在ReportController中创建userStatistics方法：

/*** 用户数据统计* @param begin* @param end* @return*/@GetMapping("/userStatistics")@ApiOperation("用户数据统计")public Result<UserReportVO> userStatistics(@DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate begin,@DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end){
​return Result.success(reportService.getUserStatistics(begin,end));            
}

3.2.3 Service层接口

在ReportService接口中声明getUserStatistics方法：

/*** 根据时间区间统计用户数量* @param begin* @param end* @return*/UserReportVO getUserStatistics(LocalDate begin, LocalDate end);

3.2.4 Service层实现类

在ReportServiceImpl实现类中实现getUserStatistics方法：

 @Autowiredprivate UserMapper userMapper;
​
/*** 统计指定时间区间内的用户数据** @param begin* @param end* @return*/public UserReportVO getUserStatistics(LocalDate begin, LocalDate end) {//存放从begin到end之间的每天对应的日期List<LocalDate> dateList = new ArrayList<>();
​dateList.add(begin);
​while (!begin.equals(end)) {begin = begin.plusDays(1);dateList.add(begin);}
​//存放每天的新增用户数量（当天注册数） select count(id) from user where create_time < ? and create_time > ?List<Integer> newUserList = new ArrayList<>();//存放每天的总用户数量 select count(id) from user where create_time < ?List<Integer> totalUserList = new ArrayList<>();
​//时间细化for (LocalDate date : dateList) {LocalDateTime beginTime = LocalDateTime.of(date, LocalTime.MIN);LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);
​Map map = new HashMap();map.put("end", endTime);//总用户数量Integer totalUser = userMapper.countByMap(map);
​map.put("begin", beginTime);//新增用户数量Integer newUser = userMapper.countByMap(map);
​totalUserList.add(totalUser);newUserList.add(newUser);}
​//封装结果数据return UserReportVO.builder().dateList(StringUtils.join(dateList, ",")).totalUserList(StringUtils.join(totalUserList, ",")).newUserList(StringUtils.join(newUserList, ",")).build();}

3.2.5 Mapper层

在UserMapper接口中声明countByMap方法：

	/*** 根据动态条件统计用户数量* @param map* @return*/Integer countByMap(Map map);

在UserMapper.xml文件中编写动态SQL：

 /*** 根据动态条件统计用户数量* @param map* @return*/Integer countByMap(Map map);
在UserMapper.xml文件中编写动态SQL：<select id="countByMap" resultType="java.lang.Integer">select count(id) from user<where><if test="begin != null">and create_time &gt;= #{begin}</if><if test="end != null">and create_time &lt;= #{end}</if></where>
</select>

订单统计、销量排名Top10接口设计

订单统计接口设计

销量排名Top10设计接口。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/621980.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

搜维尔科技：【简报】元宇宙数字人赛道，《全息影像技术应用》！

搜维尔科技：【简报】元宇宙数字人赛道，《全息影像技术应用》！

期待着看展的主角来到今天要参观的全息影像展&#xff0c;平时就喜欢看展的她对于所谓的全息影像非常好奇&#xff0c;于是她带着期待的心情进入展内。进入展内的主角看到的是与之前完全不同的画展&#xff0c;每幅画看起来就像真的一样&#xff0c;充满好奇的她在展览的各处游…
阅读更多...
【ONE·MySQL || 复合查询】

【ONE·MySQL || 复合查询】

总言 主要内容&#xff1a;主要介绍一些复杂的查询&#xff0c;涉及多表查询、交叉连接、内连接、外连接、子查询、合并查询等。       文章目录 总言1、基本查询回顾1.0、博文说明1.1、一些例题1.1.1、查询工资高于500或岗位为MANAGER的雇员&#xff0c;同时还要满足他们的…
阅读更多...
Python爬虫|使用urllib获取百度首页源码

Python爬虫|使用urllib获取百度首页源码

在这个博客中&#xff0c;我们将一起探索百度首页的源码&#xff0c;深入了解从URL请求到页面呈现的全过程。我们将使用Python的urllib.request库来模拟浏览器发送请求&#xff0c;并解码响应中的页面源码。通过分析源码&#xff0c;我们将揭示网页的结构、内容和背后的工作原理…
阅读更多...
【Redis】AOF 源码

【Redis】AOF 源码

在上篇, 我们已经从使用 / 机制 / AOF 过程中涉及的辅助功能等方面简单了解了 Redis AOF。 这篇将从源码的形式, 进行深入的了解。 1 Redis 整个 AOF 主要功能 Redis 的 AOF 功能概括起来就 2 个功能 AOF 同步: 将客户端发送的变更命令, 保存到 AOF 文件中AOF 重写: 随着 Red…
阅读更多...
电脑重置网络后连不上网了怎么办

电脑重置网络后连不上网了怎么办

一般电脑重置网络后都会自动重新下载好网络配置&#xff0c;但是不免会出现一些意外&#xff0c;接下来就我遇到的重置后无法联网的解决方案 做一个分享&#xff1a; 1、按下“winR”打开运行输入 services.msc 。 2、找到 WLAN AutoConfig 和 Wired AutoConfig 服务&#xff…
阅读更多...
如何安装Python

如何安装Python

Python是一种流行的编程语言&#xff0c;拥有广泛的应用领域。为了开始使用Python&#xff0c;首先需要在计算机上安装Python解释器。在本文中&#xff0c;我们将介绍如何安装Python以及一些常见的安装步骤。 1. 下载Python 首先&#xff0c;你需要前往Python官方网站&#xf…
阅读更多...
第 9 章 哈希表

第 9 章 哈希表

文章目录 9.1 哈希表(散列)-Google 上机题9.2 哈希表的基本介绍9.3 google 公司的一个上机题: 9.1 哈希表(散列)-Google 上机题 看一个实际需求&#xff0c;google 公司的一个上机题:有一个公司,当有新的员工来报道时,要求将该员工的信息加入(id,性别,年龄,住址…),当输入该员…
阅读更多...
软件测试|PyQt5实战教程（一）安装与环境配置

软件测试|PyQt5实战教程（一）安装与环境配置

简介 我们之前介绍过使用tkinter创建图形用户界面&#xff08;GUI&#xff09;应用程序&#xff0c;现在我们来介绍另外一个用于创建GUI的神器——pyQt5&#xff0c;它可以用于创建跨平台的桌面应用程序。PyQt5 实现了一个 Python模块集&#xff0c;有 620 个类&#xff0c;60…
阅读更多...
乐意购项目前端开发 #1

乐意购项目前端开发 #1

一、创建vue项目 1. vue create 项目名 2. 运行项目 npm install npm run dev3.使用Git管理项目 创建远程仓库 leyigou 在项目文件终端执行以下代码 git init # git 初始化#这个要使用自己的仓库 git remote add origin gitgitee.com:xie-weijia/leyigou.git # 添加远程仓…
阅读更多...
[Docker] 基本名词

[Docker] 基本名词

镜像(iamge)&#xff1a; Docker 镜像就好比是一个模板&#xff0c;可以通过这个模板来创建容器服务&#xff0c; 容器&#xff08;container&#xff09;: Docker利用容器技术&#xff0c;独立运行一个或则多个应用&#xff0c;通过镜像来创建的。 启动&#xff0c;停止&a…
阅读更多...
docker应用：vocechat

docker应用：vocechat

简介&#xff1a;VoceChat是一款超轻量级的Rust聊天应用程序、API和SDK&#xff0c;优先考虑私人托管。使用VoceChat建立您自己的聊天功能&#xff01;作为一款非常好用的通讯应用程序&#xff0c;它可以让你与朋友、家人和同事进行即时消息聊天&#xff0c;支持图片视频的分享…
阅读更多...
Linux 压缩与解压缩

Linux 压缩与解压缩

参考资料 linux 压缩和解压缩命令gz、tar、zip、bz2tar命令 – 压缩和解压缩文件 目录 一. gzip命令1.1 压缩1.1.1 -k 压缩后保留源文件1.1.2 -l 查看压缩文件中的文件信息1.1.3 -r 递归压缩文件夹中的所有文件 1.2 解压缩 二. zip命令2.1 zip 压缩2.1.1 -r 压缩文件夹2.1.2 压…
阅读更多...
温和去油去黑头，只需敷上一刻钟的泥膜就够了

温和去油去黑头，只需敷上一刻钟的泥膜就够了

冬季天气干燥&#xff0c;很多朋友脸部更容易出油&#xff0c;连带着黑头也变多了。这是因为干燥的环境会刺激皮脂腺分泌&#xff0c;导致皮肤油脂分泌过多&#xff0c;容易堵塞毛孔形成黑头。因此&#xff0c;在冬季特别需要注意控油去黑头的工作。 控油去黑头需要清洁毛孔&am…
阅读更多...
mysql原理--undo日志1

mysql原理--undo日志1

1.事务回滚的需求 我们说过 事务 需要保证 原子性 &#xff0c;也就是事务中的操作要么全部完成&#xff0c;要么什么也不做。但是偏偏有时候事务执行到一半会出现一些情况&#xff0c;比如&#xff1a; (1). 事务执行过程中可能遇到各种错误&#xff0c;比如服务器本身的错误&…
阅读更多...
并发编程之并发容器

并发编程之并发容器

目录 并发容器 CopyOnWriteArrayList 应用场景 常用方法 读多写少场景使用CopyOnWriteArrayList举例 CopyOnWriteArrayList原理 CopyOnWriteArrayList 的缺陷 扩展迭代器fail-fast与fail-safe机制 ConcurrentHashMap 应用场景 常用方法 并发场景下线程安全举例 Con…
阅读更多...
第 380 场 LeetCode 周赛题解

第 380 场 LeetCode 周赛题解

A 最大频率元素计数 模拟&#xff1a;先统计元素的频率&#xff0c;然后求由最大频率的元素的总频率 class Solution { public:int maxFrequencyElements(vector<int> &nums) {unordered_map<int, int> cnt;for (auto x: nums)cnt[x];int mx 0, s 0;for (aut…
阅读更多...
【如何在 GitHub上面找项目】【转载】

【如何在 GitHub上面找项目】【转载】

很多的小伙伴&#xff0c;经常会有这样的困惑&#xff0c;我看了很多技术的学习文档、书籍、甚至视频&#xff0c;我想动手实践&#xff0c;于是我打开了GitHub&#xff0c;想找个开源项目&#xff0c;进行学习&#xff0c;获取项目实战经验。这个时候很多小伙伴就会面临这样的…
阅读更多...
【Docker篇】使用Docker操作镜像

【Docker篇】使用Docker操作镜像

文章目录 &#x1f6f8;镜像&#x1f33a;基本操作⭐docker --help⭐docker pull [ 参数 ]⭐docker images⭐docker save -- 导出⭐docker rmi -- 删除⭐docker load -- 导入 &#x1f6f8;镜像 镜像是指在计算机领域中&#xff0c;通过复制和创建一个与原始对象相似的副本的过…
阅读更多...
mysql原理--undo日志2

mysql原理--undo日志2

1.概述 上一章我们主要唠叨了为什么需要 undo日志 &#xff0c;以及 INSERT 、 DELETE 、 UPDATE 这些会对数据做改动的语句都会产生什么类型的 undo日志 &#xff0c;还有不同类型的 undo日志 的具体格式是什么。本章会继续唠叨这些 undo日志 会被具体写到什么地方&#xff0c…
阅读更多...
软件测试|Pydantic详细介绍与基础入门

软件测试|Pydantic详细介绍与基础入门

简介 Pydantic 是一个强大的 Python 库&#xff0c;用于数据验证和解析&#xff0c;特别是用于处理 JSON 数据。它的主要目标是使数据验证和解析变得简单、直观和可维护。本文将介绍 Pydantic 的基础知识&#xff0c;包括如何定义模型、验证数据以及处理错误。 什么是 Pydant…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023