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-03
    private String dateList;
​
    //营业额，以逗号分隔，例如：406.0,1520.0,75.0
    private 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 {
​
    @Autowired
    private 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 {
​
    @Autowired
    private OrderMapper orderMapper;
    @Autowired
    private UserMapper userMapper;
​
​
    @Autowired
    private 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
            //数据格式封装map
            Map 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-03
    private String dateList;
​
    //用户总量，以逗号分隔，例如：200,210,220
    private String totalUserList;
​
    //新增用户，以逗号分隔，例如：20,21,10
    private 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方法：

 @Autowired
    private 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.mfbz.cn/a/320370.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Flutter开发进阶之并发操作数据库

Flutter开发进阶之并发操作数据库

Flutter开发进阶之并发操作数据库 尽管 Flutter 本身不包含任何数据库功能&#xff0c;但可以使用各种第三方库和插件来在 Flutter 应用程序中实现数据库功能&#xff1b; 以下将使用sqflite作为例子&#xff0c;sqflite允许在 Flutter 应用程序中执行 SQL 查询&#xff0c;创…
阅读更多...
（Java企业 / 公司项目）分布式事务Seata详解（含Seata+Nacos组合使用）（二）

（Java企业 / 公司项目）分布式事务Seata详解（含Seata+Nacos组合使用）（二）

一. Seata Server配置Nacos 什么是配置中心?配置中心可以说是一个"大货仓",内部放置着各种配置文件,你可以通过自己所需进行获取配置加载到对应的客户端.比如Seata Client端(TM,RM),Seata Server(TC),会去读取全局事务开关,事务会话存储模式等信息.Seata的配置中心…
阅读更多...
ElasticSearch _update_by_query

ElasticSearch _update_by_query

根据查询条件进行数据更新 UPDATE job_call SET admin_id 0 WHERE admin_id 283; kibana.png 1.其中红色框的位置为query的内容&#xff0c;对应为SQL语句中的WHERE admin_id 283 2.划红色线的位置为修改内容&#xff0c;对应SQL中的SET admin_id 0。如果是更新多个字段s…
阅读更多...
【2023 我的编程之旅】

【2023 我的编程之旅】

前言 转眼 2024 年都过去 14 天了。回顾 2023 有太多技术上的思考以及人生的感悟&#xff0c;接下来趁着 CSDN 官方活动&#xff0c;顺便记录下来。 技术的价值 与现在的年轻人一心只想搞钱不同&#xff0c;刚毕业的时候&#xff0c;我的梦想是进入一家有实力的科技企业&…
阅读更多...
Codeforces Bye 2023! - D - Mathematical Problem - 题解

Codeforces Bye 2023! - D - Mathematical Problem - 题解

目录 Mathematical Problem 题目大意&#xff1a; 思路解析&#xff1a; 代码实现&#xff1a; Mathematical Problem 题目大意&#xff1a; 第 31 中学的数学家们接到了以下任务&#xff1a; 给你一个多数 n &#xff0c;你需要找出 n 个不同的数&#xff0c;它们都是整…
阅读更多...
Linux 内核学习 3 - 虚拟内存和物理内存

Linux 内核学习 3 - 虚拟内存和物理内存

虚拟内存其实是 CPU 和操作系统使用的一个障眼法&#xff0c;联手给进程编织了一个假象&#xff0c;让进程误以为自己独占了全部的内存空间&#xff1a; 在 32 位系统中&#xff0c;进程以为自己独占了 3G 的内存空间。 在 64 位系统中&#xff0c;进程以为自己独占了 128T 的…
阅读更多...
【MySQL】数据处理之增删改

【MySQL】数据处理之增删改

文章目录 一、增加&#xff08;插入&#xff09;INSERT INTO...VALUES(...,...)VALUES的方式添加情况一&#xff1a;为表的所有字段按默认顺序插入数据情况二&#xff1a;为表的指定字段插入数据情况三&#xff1a;同时插入多条记录 将查询结果插入到表中 二、修改&#xff08;…
阅读更多...
开源知识库zyplayer-doc部署指南

开源知识库zyplayer-doc部署指南

1.前置条件 docker已经安装 mysql已经安装且数据库zyplayer-doc存在 服务器ip:192.168.168.99/ 数据库账户:root,密码:123456 2.拉取镜像 docker pull zyplayer/zyplayer-doc:latest 3.启动 docker run -d \--restart unless-stopped \--name zyplayer-doc \-p 8083:8083 …
阅读更多...
C语言常用库函数

C语言常用库函数

1.C语言标准库函数 C语言标准库函数由15个头文件组成。 1.数学函数 数学计算是计算机最擅长的运算&#xff0c;计算机大部分运算方法都是基于数学计算执行的。C语言提供了很多用于数学计算的库函数&#xff0c;合理利用这些库函数&#xff0c;将对程序的编写和运行起到事半功…
阅读更多...
Python相对导入和绝对导入

Python相对导入和绝对导入

目录结构&#xff1a; 在 en_de_model_CDDD.py 文件有两种导入方式可以导入utils.py&#xff0c;分别是 相对导入&#xff1a; from ...public_utils.utils import canonicalize_smiles 绝对导入&#xff1a; from public_utils.utils import canonicalize_smiles 这里推荐使…
阅读更多...
大量的视频如何批量随机分割的方法：批量剪辑不求人

大量的视频如何批量随机分割的方法：批量剪辑不求人

在处理大量视频文件时&#xff0c;经常要进行随机分割&#xff0c;满足不同的需求。制作短视频、片段集锦等&#xff0c;批量随机分割视频都是一个高效的方法。下面来看云炫AI智剪如何操作的吧。 分割后的视频缩略图展示&#xff0c;被分割的视频自动分类保存在对应的文件夹中。…
阅读更多...
软件测试|Pydantic BaseModel使用详解

软件测试|Pydantic BaseModel使用详解

简介 当我们在Python中编写应用程序时&#xff0c;通常需要处理和验证数据。Pydantic 是一个流行的库&#xff0c;它可以帮助我们定义数据模型并自动进行数据验证。在Pydantic中&#xff0c;BaseModel是一个核心概念&#xff0c;它用于定义数据模型和验证输入数据。在这篇文章…
阅读更多...
第六站:C++面向对象关键字解释说明

第六站:C++面向对象关键字解释说明

this指针: 是一个特殊的指针,放回这个对象本身,this指针是属于实例对象,不能访问静态方法(不属于某一个实例对象,属于共有的,大众的,由类直接调用) 第一种用法: void Human::setName(string name1) {this->name name1; } void Human::setAge(int age1) {this->age a…
阅读更多...
拯救者y9000p安装linux、windows双系统。

拯救者y9000p安装linux、windows双系统。

首先需要准备启动盘 我用的是Win32DiskImager来做的。资源使用的是ubuntu-20.04.6-desktop-amd64.iso。别用低版本&#xff0c;失败很多次之后的教训。 磁盘管理-磁盘分区-右键-压缩卷 这边分区出来之后&#xff0c;不要分配。安装时候会自动分配的。 重启之后F2进去BIOS设置…
阅读更多...
张载为往圣继绝学，唯一的错是不够强大

张载为往圣继绝学，唯一的错是不够强大

“自古雄才多磨难&#xff0c;从来纨绔少伟男。” 张载&#xff0c;人称“横渠先生”。他在横渠镇&#xff0c;授徒讲学&#xff0c;恢复古礼&#xff0c;试验井田&#xff0c;写书《正蒙》。张载讲学关中&#xff0c;弟子多为关中人&#xff0c;其学派被称作关学。 张载自学…
阅读更多...
git-生成证书、公钥、私钥、error setting certificate verify locations解决方法

git-生成证书、公钥、私钥、error setting certificate verify locations解决方法

解决方法 方法1-配置证书、公钥、私钥打开Git Bash设置名称和邮箱执行&#xff0c;~/.ssh执行&#xff0c;ssh-keygen -t rsa -C "这是你的邮箱"&#xff0c;如图&#xff1a;进入文件夹可以看到用记事本之类的软件打开id_rsa.pub文件&#xff0c;并且复制全部内容。…
阅读更多...
Python自动化测试框架【生成测试报告】

Python自动化测试框架【生成测试报告】

如何才能让用例自动运行完之后&#xff0c;生成一张直观可看易懂的测试报告呢&#xff1f; 小编使用的是unittest的一个扩展HTMLTestRunner 环境准备 使用之前&#xff0c;我们需要下载HTMLTestRunner.py文件 点击HTMLTestRunner后进入的是一个写满代码的网页&#xff0c;小…
阅读更多...
并发编程之并发容器

并发编程之并发容器

目录 并发容器 CopyOnWriteArrayList 应用场景 常用方法 读多写少场景使用CopyOnWriteArrayList举例 CopyOnWriteArrayList原理 CopyOnWriteArrayList 的缺陷 扩展迭代器fail-fast与fail-safe机制 ConcurrentHashMap 应用场景 常用方法 并发场景下线程安全举例 Con…
阅读更多...
软件测试|教你使用Python下载图片

软件测试|教你使用Python下载图片

前言 我一直觉得Windows系统默认的桌面背景不好看&#xff0c;但是自己又没有好的资源可以进行替换&#xff0c;突然我一个朋友提醒了我&#xff0c;网络上的图片这么多&#xff0c;你甚至可以每天换很多个好看的背景&#xff0c;但是如果让我手动去设置的话&#xff0c;我觉得…
阅读更多...
编程高手必备：Python字典操作与示例全解析

编程高手必备：Python字典操作与示例全解析

编程高手必备&#xff1a;Python字典操作与示例全解析 引言Python字典基础字典操作技巧代码示例实际应用案例实际应用案例结语 引言 在编程世界中&#xff0c;高效地处理和组织数据是每位程序员必备的技能。Python&#xff0c;作为一种广受欢迎的编程语言&#xff0c;不仅因其…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站