Apache ECharts

Apache ECharts介绍：

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

官网地址：https://echarts.apache.org/zh/index.html

Apache ECharts入门程序：

进入官网，按照官方给的步骤：

<!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>

 

营业额统计：

业务规则及接口设计：

  • 营业额指订单状态为已完成的订单金额合计
  • 基于可视化报表的折线图展示营业额数据，X轴为日期，Y轴为营业额
  • 根据时间选择区间，展示每天的营业额数据

 

 前端想展示数据，也要设计接口从后端获取数据。

返回数据这一块，因为是前端来展示数据，所以我们提供的数据是要依照前端的规则。

 具体代码实现：

Controll层：

@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("营业额统计");TurnoverReportVO turnoverReportVO = reportService.turnoverStatistics(begin,end);return Result.success(turnoverReportVO);}

这里有个小细节，就是查询统计营业额，前端传的参数是日期的起始时间和结束时间，

格式是yyyy-MM-dd这种形式，所以，我们也要用这种形式来进行接收。

@DateTimeFormat(pattern = "yyyy-MM-dd")，就用到了这个方法。

 Service层：

package com.sky.service.impl;import com.sky.entity.Orders;
import com.sky.mapper.OrderMapper;
import com.sky.service.ReportService;
import com.sky.vo.TurnoverReportVO;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import javax.validation.constraints.Min;
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;@Service
public class ReportServiceImpl implements ReportService {@Autowiredprivate OrderMapper orderMapper;@Overridepublic TurnoverReportVO turnoverStatistics(LocalDate begin, LocalDate end) {//封装TurnoverReportVO的dateList对象List<LocalDate> datelist = new ArrayList<>();datelist.add(begin);while(!begin.equals(end)){//将日期加到list集合中begin = begin.plusDays(1);datelist.add(begin);}String datejoin = StringUtils.join(datelist, ",");//封装TurnoverReportVO的turnoverList对象List<Double> turnoverlist = new ArrayList<>();for (LocalDate localDate : datelist) {//查询date日期对应的营业额数据，营业额是指：状态为“已完成”的订单金额合计LocalDateTime beginTime = LocalDateTime.of(localDate, LocalTime.MIN);LocalDateTime endTime = LocalDateTime.of(localDate,LocalTime.MAX);//select sum(amount) from orders where order_time > ? and order_time < ? and status = 5Map map = new HashMap();map.put("begin",beginTime);map.put("end",endTime);map.put("status", Orders.COMPLETED);Double turnover = orderMapper.TurnoverOfSum(map);turnover = turnover==null?0.0:turnover;turnoverlist.add(turnover);}for (Double v : turnoverlist) {System.out.println("今日份营业额："+ v);}//封装TurnoverReportVO对象TurnoverReportVO turnoverReportVO = new TurnoverReportVO();turnoverReportVO.setDateList(datejoin);turnoverReportVO.setTurnoverList(StringUtils.join(turnoverlist,","));return  turnoverReportVO;}
}
思路：

我们观察TurnoverReportVO对象里面有两个值，dateList，turnoverList

一个是日期列表，一个是营业额列表。

我们观察前端页面也能看成

横坐标：是日期   纵坐标：是营业额。

 所以我们Service层的思路就很简单了

1：封装dateList对象

创建一个LocalDate的列表，然后通过LocalDate提供的库函数plusDay，将日期由begin一直加到end，并且TurnoverReportVO对象中的dateList对象是一个String，所以我们再调用String.utils的方法对这个列表进行逗号分割。

2：封装turnoverList对象

我们已经有了每一天的日期了，我们需要每一天的营业额（当然这里也不一定是每一天的，我们前端界面是可以选择的，有可能是一周，也有可能是一个月）。

这个turnoverList对象的封装就需要查询数据库了

select sum（amout） from orders where order_time > ? and order_time < ? and status = 5

我们创建一个map对象里面有beginTime，endTime，status，然后传到mapper层，查询数据中的数据。

3：最后再封装TurnoverReportVO对象返回。

Mapper层及注解：

/*** 动态查询营业额* @param map* @return*/Double TurnoverOfSum(Map map);
<select id="TurnoverOfSum" resultType="java.lang.Double">select sum(amount) from sky_take_out.orders<where><if test="begin != null">and order_time &gt; #{begin}</if><if test="end != null">and order_Time &lt; #{end}</if><if test="status != null"> and status = #{status} </if></where></select>

用户统计：

业务规则及接口设计：

业务规则：

  • 基于可视化报表的折线图展示用户数据，X轴为日期，Y轴为用户数
  • 根据时间选择区间，展示每天的用户总量和新增用户量数据

 

用户统计和上面的不同点就是我们的返回值有三个列表：

  • dateList
  • newUserList
  • totalUserList

 具体代码实现：

整体的思路和上面的营业额统计差不多

Controll层：

/*** 用户数量统计* @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){log.info("用户数量统计");UserReportVO userReportVO = reportService.userStatistics(begin,end);return Result.success(userReportVO);}

Service层：

    /*** 用户数量统计* @param begin* @param end* @return*/@Overridepublic UserReportVO userStatistics(LocalDate begin, LocalDate end) {//封装UserReportVO的dateList对象List<LocalDate> dateList = new ArrayList<>();while (!begin.equals(end)){dateList.add(begin);begin = begin.plusDays(1);}String datejoin = StringUtils.join(dateList, ",");//封装UserReportVO的totalUserList对象//select count(id) from user where create_time < endTime//封装UserReportVO的newUserList对象//select count(id) from user where create_time > beginTime and create_time < endTimeList<Integer> totalUserList =  new ArrayList<>();List<Integer> newUserList = 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.UserofSum(map);map.put("begin",beginTime);Integer newUser = userMapper.UserofSum(map);totalUserList.add(totalUser);newUserList.add(newUser);}String totaluserjoin = StringUtils.join(totalUserList, ",");String newluserjoin = StringUtils.join(newUserList, ",");UserReportVO userReportVO = new UserReportVO();userReportVO.setDateList(datejoin);userReportVO.setTotalUserList(totaluserjoin);userReportVO.setNewUserList(newluserjoin);return userReportVO;}

这里Service层的业务就是封装三个列表

要想封装这个用户，我们需要去调userMapper

我们想要知道总共的用户的sql是：

//select count(id) from user where create_time < endTime

截至到这个end时间时候的用户数量。

而新增用户的sql是：

//select count(id) from user where create_time > beginTime and create_time < endTime

我们要给这个新增确定一个日期范围。 

userMapper及注解：

Integer UserofSum(Map map);
<select id="UserofSum" resultType="java.lang.Integer">select count(id) from sky_take_out.user<where><if test="begin != null">and create_time > #{begin}</if><if test="end != null">and create_time &lt; #{end}</if></where></select>

 订单统计：

业务规则及接口设计：

业务规则：

  • 有效订单指状态为 “已完成” 的订单
  • 基于可视化报表的折线图展示订单数据，X轴为日期，Y轴为订单数量
  • 根据时间选择区间，展示每天的订单总数和有效订单数
  • 展示所选时间区间内的有效订单数、总订单数、订单完成率，订单完成率 = 有效订单数 / 总订单数 * 100%

具体的代码实现： 

Controll层：

    /*** 订单统计* @param begin* @param end* @return*/@GetMapping("/ordersStatistics")@ApiOperation("订单统计")public Result<OrderReportVO> orderStatistics(@DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate begin,@DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end){log.info("订单统计");OrderReportVO orderReportVO = reportService.ordersStatistics(begin,end);return Result.success(orderReportVO);}

Service层：

/*** 订单统计* @param begin* @param end* @return*/@Overridepublic OrderReportVO ordersStatistics(LocalDate begin, LocalDate end) {//封装OrderReportVO的dateList对象List<LocalDate> dateList = new ArrayList<>();while (!begin.equals(end)){dateList.add(begin);begin = begin.plusDays(1);}String datejoin = StringUtils.join(dateList, ",");//封装OrderReportVO的orderCountList对象//封装OrderReportVO的validOrderCountList对象List<Integer> orderCountList = new ArrayList<>();List<Integer> validOrderCountList = 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("begin",beginTime);map.put("end",endTime);Integer totalorders = orderMapper.OrdersofSum(map);map.put("status",Orders.COMPLETED);Integer validorders = orderMapper.OrdersofSum(map);orderCountList.add(totalorders);validOrderCountList.add(validorders);}String totaljoin = StringUtils.join(orderCountList, ",");String validjoin = StringUtils.join(validOrderCountList,",");//计算时间区间内的订单总数量Integer totalOrderCount = orderCountList.stream().reduce(Integer::sum).get();//计算时间区间内的有效订单数量Integer validOrderCount = validOrderCountList.stream().reduce(Integer::sum).get();//计算订单完成率Double orderCompletionRate  = 0.0;if(totalOrderCount!=0){orderCompletionRate = validOrderCount.doubleValue()/totalOrderCount.doubleValue();}OrderReportVO orderReportVO = new OrderReportVO();orderReportVO.setDateList(datejoin);orderReportVO.setOrderCountList(totaljoin);orderReportVO.setValidOrderCountList(validjoin);orderReportVO.setTotalOrderCount(totalOrderCount);orderReportVO.setValidOrderCount(validOrderCount);orderReportVO.setOrderCompletionRate(orderCompletionRate);return orderReportVO;}

Mapper层及注解：

     /*** 订单统计* @param map* @return*/Integer OrdersofSum(Map map);
<select id="OrdersofSum" resultType="java.lang.Integer">select count(id) from sky_take_out.orders<where><if test="begin != null">and order_time > #{begin}</if><if test="end != null">and order_Time &lt; #{end}</if><if test="status != null">and status=#{status}</if></where></select>

销量排名统计（TOP10）：

业务规则及接口设计：

业务规则：

  • 根据时间选择区间，展示销量前10的商品（包括菜品和套餐）
  • 基于可视化报表的柱状图降序展示商品销量
  • 此处的销量为商品销售的份数

具体的代码实现：

 Controll层：

/*** TOP10销量统计* @param begin* @param end* @return*/@GetMapping("/top10")@ApiOperation("TOP10销量统计")public Result<SalesTop10ReportVO> Top10Statostics(@DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate begin,@DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end){log.info("TOP10销量统计");SalesTop10ReportVO salesTop10ReportVO = reportService.Top10Statostics(begin,end);return Result.success(salesTop10ReportVO);}

Service层：

    /*** TOP10销量统计* @param begin* @param end* @return*/@Overridepublic SalesTop10ReportVO Top10Statostics(LocalDate begin, LocalDate end) {LocalDateTime beginTime = LocalDateTime.of(begin,LocalTime.MIN);LocalDateTime endTime = LocalDateTime.of(end,LocalTime.MAX);System.out.println("开始时间是："+beginTime);System.out.println("结束时间是："+endTime);List<GoodsSalesDTO> goodsSalesDTOList = orderMapper.GetTop10(beginTime,endTime);List<String> names = goodsSalesDTOList.stream().map(GoodsSalesDTO::getName).collect(Collectors.toList());String nameList = StringUtils.join(names, ",");List<Integer> numbers = goodsSalesDTOList.stream().map(GoodsSalesDTO::getNumber).collect(Collectors.toList());String numberList = StringUtils.join(numbers, ",");SalesTop10ReportVO salesTop10ReportVO = new SalesTop10ReportVO();salesTop10ReportVO.setNameList(nameList);salesTop10ReportVO.setNumberList(numberList);return salesTop10ReportVO;}

这题的从sql语句开始分析比较简单

select od.name,sum(od.number) number from order_detail od,orders o
where od.order_id = o.id and o.status = 5 and o.order_time < 2024-05-04 and o.order_time > 2024-05-10
group by od.name
order by number desc
limit 0,10

根据传入的时间范围来获取数据。

Mapper层及注解：

    /*** TOP10销量统计* @param beginTime* @param endTime* @return*/List<GoodsSalesDTO> GetTop10(LocalDateTime beginTime, LocalDateTime endTime);
<select id="GetTop10" resultType="com.sky.dto.GoodsSalesDTO">select od.name,sum(od.number) numberfrom sky_take_out.order_detail od,sky_take_out.orders owhere od.order_id = o.id and o.status = 5<if test="beginTime != null">and o.order_time > #{beginTime}</if><if test="endTime != null">and o.order_Time &lt; #{endTime}</if>group by od.nameorder by number desclimit 0,10</select>

结果展示：

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

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

相关文章

基于STC12C5A60S2系列1T 8051单片机实现一主单片机与一从单片机进行双向串口通信功能

基于STC12C5A60S2系列1T 8051单片机实现一主单片机与一从单片机进行双向串口通信功能

基于STC12C5A60S2系列1T 8051单片机实现一主单片机与一从单片机进行双向串口通信功能 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机串口通信介绍STC12C5A60S2系列1T 8051单片机串口通信的结构基于STC12C5A60S2系列1T 8051单片机串口通信的特殊功能寄存器…
阅读更多...
Django项目运行报错：ModuleNotFoundError: No module named ‘MySQLdb‘

Django项目运行报错：ModuleNotFoundError: No module named ‘MySQLdb‘

解决方法&#xff1a; 在__init__.py文件下&#xff0c;新增下面这段代码 import pymysql pymysql.install_as_MySQLdb() 注意&#xff1a;确保你的 python 有下载 pymysql 库&#xff0c;没有的话可以使用 pip install pymysql安装 原理&#xff1a;用pymysql来代替mysqlL…
阅读更多...
深度学习：基于人工神经网络ANN的降雨预测

深度学习：基于人工神经网络ANN的降雨预测

前言 系列专栏:【深度学习&#xff1a;算法项目实战】✨︎ 本专栏涉及创建深度学习模型、处理非结构化数据以及指导复杂的模型&#xff0c;如卷积神经网络(CNN)、递归神经网络 (RNN)&#xff0c;包括长短期记忆 (LSTM) 、门控循环单元 (GRU)、自动编码器 (AE)、受限玻尔兹曼机(…
阅读更多...
docker搭建redis6.0（docker rundocker compose演示）

docker搭建redis6.0（docker rundocker compose演示）

文章讲了&#xff1a;docker下搭建redis6.0.20遇到一些问题&#xff0c;以及解决后的最佳实践方案 文章实现了&#xff1a; docker run搭建redisdocker compose搭建redis 搭建一个redis’的过程中遇到很多问题&#xff0c;先简单说一下搭建的顺序 找一个redis.conf文件&…
阅读更多...
LangChain：大模型框架的深度解析与应用探索

LangChain：大模型框架的深度解析与应用探索

在数字化的时代浪潮中&#xff0c;人工智能技术正以前所未有的速度蓬勃发展&#xff0c;而大模型作为其中的翘楚&#xff0c;以生成式对话技术逐渐成为推动行业乃至整个社会进步的核心力量。再往近一点来说&#xff0c;在公司&#xff0c;不少产品都戴上了人工智能的帽子&#…
阅读更多...
maven mirrorOf的作用

maven mirrorOf的作用

在工作中遇到了一个问题导致依赖下载不了&#xff0c;最后发现是mirror的问题&#xff0c;决定好好去看一下mirror的配置&#xff0c;以及mirrorOf的作用&#xff0c;以前都是直接复制过来使用&#xff0c;看了之后才明白什么意思。 过程 如果你设置了镜像&#xff0c;镜像会匹…
阅读更多...
Doris【部署 01】Linux部署MPP数据库Doris稳定版（下载+安装+连接+测试）

Doris【部署 01】Linux部署MPP数据库Doris稳定版（下载+安装+连接+测试）

本次安装测试的为稳定版2.0.8官方文档 https://doris.apache.org/zh-CN/docs/2.0/get-starting/quick-start 这个简短的指南将告诉你如何下载 Doris 最新稳定版本&#xff0c;在单节点上安装并运行它&#xff0c;包括创建数据库、数据表、导入数据及查询等。 Linux部署稳定版Do…
阅读更多...
蓝桥杯单片机之模块代码《多样点灯方式》

蓝桥杯单片机之模块代码《多样点灯方式》

过往历程 历程1&#xff1a;秒表 历程2&#xff1a;按键显示时钟 历程3&#xff1a;列矩阵按键显示时钟 历程4&#xff1a;行矩阵按键显示时钟 历程5&#xff1a;新DS1302 历程6&#xff1a;小数点精确后两位ds18b20 历程7&#xff1a;35定时器测量频率 历程8&#xff…
阅读更多...
基于fastapi sqladmin开发，实现可动态配置admin

基于fastapi sqladmin开发，实现可动态配置admin

1. 功能介绍&#xff1a; 1. 支持动态创建表、类&#xff0c;属性&#xff0c;唯一约束、外键&#xff0c;索引&#xff0c;关系&#xff0c;无需写代码&#xff0c;快速创建业务对象&#xff1b; 2. 支持配置admin显示参数&#xff0c;支持sqladmin原生参数设置&#xff0c;动…
阅读更多...
Android 实现背景图片不被拉伸的效果 9-patch图片 .9图

Android 实现背景图片不被拉伸的效果 9-patch图片 .9图

今天碰到个需求&#xff0c;要求不同手机分辨率背景照片不能被拉伸&#xff0c;除了调用系统方法计算当前屏幕大小这个方法外还有一个就是9-patch图片&#xff0c;可以实现除了icon剩下的部位被缩放。 方法&#xff1a;资源文件右击找到9-patch&#xff0c;转为XXX.9.png照片 …
阅读更多...
手把手微调大模型【附：一镜到底视频教程】

手把手微调大模型【附：一镜到底视频教程】

前言 近期有很多小伙伴来问是否有大模型微调教程&#xff0c;其实目前网上有很多教程&#xff0c;但是据了解&#xff0c;由于网上教程质量参差不齐&#xff0c;导致很多小伙伴尤其是初学者&#xff0c;一坑未出又入一坑&#xff0c;有种从入门到放弃的感觉。于是乎&#xff0…
阅读更多...
Golang | Leetcode Golang题解之第75题颜色分类

Golang | Leetcode Golang题解之第75题颜色分类

题目&#xff1a; 题解&#xff1a; func sortColors(nums []int) {p0, p2 : 0, len(nums)-1for i : 0; i < p2; i {for ; i < p2 && nums[i] 2; p2-- {nums[i], nums[p2] nums[p2], nums[i]}if nums[i] 0 {nums[i], nums[p0] nums[p0], nums[i]p0}} }
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023