使用Echarts来实现数据可视化

目录

一.什么是ECharts?

二.如何使用Springboot来从后端给Echarts返回响应的数据?

eg:折线图:

①Controller层:

②service层:


一.什么是ECharts?

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

下面是官网地址:Examples - Apache ECharts

二.如何使用Springboot来从后端给Echarts返回响应的数据?

下面图片是Echarts的前端展示。 

因为我们如何渲染的代码是前端写的,而我们后端就需要给前端返回对应的数据就可以了。

在我们解释前先介绍些Java的知识点:

@DateTimeFormat(pattern = "yyyy-MM-dd") => 用来描述日期格式以便于正确封装进入我们的LocalDate。

类名.builder().属性(属性值).builder => 在pojo类上加上@builder注解,我们就可以使用这样的方式来构造类。

StringUtils.join(List,",") => 通过使用StringUtils内的join方法就可以将数据最后将集合元素以字符串的形式并以 , 分隔来拼接。

下面两个方法来精确时间的间隔,以便于我们精确每一种通过时间分隔数据的情况: 

LocalDateTime.of(date, LocalTime.MIN) => 通过这个方法可以返回 date 的零点零分零秒。

LocalDateTime.of(date,LocalTime.MAX) => 通过这个方法可以返回 date的23:59:59.999999999999。

begin = begin.plusDays(1) => 用来将begin时间的天数+1并返回,同理内部还有plusMonths()等方法来控制时间,方法内实参传的是整数就加,负数就减。

⑦List<String> ___ = ___List.stream().map(类::属性).collect(Collectors.toList());

=> 我们在List集合每个元素封装的是一个类,假如我们想把类内属性拆分成同一属性封装到一个集合内,我们就可以使用上面的方法。

List.stream().reduce(Integer::sum).get() => 计算集合内的数值和并返回

我们在写该代码的时候只需记住:

①明确后端需要返回哪些数据给前端,并定义一个pojo来封装返回结果

②使用前端拿到的数据,来在service层设计内部逻辑

eg:折线图:

折线图需要我们从后端返回两个数据:横坐标集合 与 纵坐标集合

我们以黑马苍穹外卖为例,我们想要展示横坐标的时间集合以及纵坐标根据时间对应的营业额统计,而我们前端返回的数据就是时间段,也就是开始时间begin以及结束时间end。

①Controller层:

@RestController
@RequestMapping("/admin/report")
@Api(tags = "数据统计相关接口")
@Slf4j
public class ReportController {@Autowiredprivate ReportService reportService;@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));}
}

②service层:

先将时间段封装到dateList集合中,然后使用增强for遍历dateList集合,用map集合封装筛选条件在使用mapper获取营业额统计,最后使用builder封装返回。

@Service
@Slf4j
public class ReportServiceImpl implements ReportService {@Autowiredprivate OrderMapper orderMapper;@Autowiredprivate UserMapper userMapper;@Autowiredprivate OrderDetailMapper orderDetailMapper;@Overridepublic TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate end) {List<LocalDate> dateList = new ArrayList<>();dateList.add(begin);while(!begin.equals(end)){begin = begin.plusDays(1);dateList.add(begin);}//存放每天的营业额List<Double> turnoverList = new ArrayList<>();for (LocalDate date : dateList) {//查询当前日期对应的营业额,营业额=>状态为“已完成”的订单金额合计LocalDateTime beginTime = LocalDateTime.of(date, LocalTime.MIN);//某年某月某日的零点零分零秒LocalDateTime endTime = LocalDateTime.of(date,LocalTime.MAX);//某年某月某日的23:59:59.999999999999//select sum(amount) from orders where order_time > beginTime and order_time < endTime and status = 5Map map = new HashMap();map.put("begin",beginTime);map.put("end",endTime);map.put("status", Orders.COMPLETED);//5Double turnover = orderMapper.sumByMap(map);turnover = turnover == null ? 0.0 : turnover;//判空turnoverList.add(turnover);}//封装返回结果return TurnoverReportVO.builder().dateList(StringUtils.join(dateList,","))//集合元素 以字符串的形式 并 以,分隔 来拼接.turnoverList(StringUtils.join(turnoverList,",")).build();}
}

好了,今天的内容就到这里,内容要是对你有帮助记得三连,感谢收看!!!

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

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

相关文章

javaScript中的对象

创建 this指向 命名规则 不符合变量名的命名规则和规范使用数组关联语法获取 遍历对象 使用for&#xff08;var key in 对象&#xff09; 删除属性 对象引用关系

Flutter大型项目架构:私有组件包管理

随着项目功能模块越来越多&#xff0c;怎么去管理这些私有组件包是一个不得不面对的问题&#xff0c;特别对于团队开发来讲&#xff0c;一些通用的公共组件往往会在多个项目间使用&#xff0c;多的有几十个&#xff0c;每个组件包都有有自己的版本&#xff0c;组件包之间还有依…

一篇文章带你入门爬虫并编写自己的第一个爬虫程序

一、引言 目前我们处在一个信息快速迭代更新的时代&#xff0c;海量的数据以大爆炸的形式出现在网络之中&#xff0c;相比起过去那个通过广播无线电、书籍报刊等传统媒介获取信息的方式&#xff0c;我们现在通过网络使用搜索引擎几乎可以获得任何我们需要的信息资源。 但与此同…

Vue前端工程

创建一个工程化的vue项目 npm init vuelatest 全默认回车就好了 登录注册校验 //定义数据模型 const registerDataref({username:,password:,rePassword: }) //校验密码的函数 const checkRePassword(rule,value,callback)>{if (value){callback(new Error(请再次输入密…

python基础知识点

最近系统温习了一遍python基础语法&#xff0c;把自己不熟知的知识点罗列一遍&#xff0c;便于查阅~~ python教程 Python 基础教程 | 菜鸟教程 1、python标识符 以单下划线开头 _foo 的代表不能直接访问的类属性&#xff0c;需通过类提供的接口进行访问&#xff0c;不能用 f…

c++STL容器中vector的使用,模拟实现及迭代器使用注意事项和迭代器失效问题

目录 前言&#xff1a; 1.vector的介绍及使用 1.2 vector的使用 1.2 1 vector的定义 1.2 2 vector iterator&#xff08;迭代器&#xff09;的使用 1.2.3 vector 空间增长问题 1.2.4 vector 增删查改 1.2.5vector 迭代器失效问题。 2.vector模拟实现 2.1 std::vect…

大彩触摸屏与单片机通讯

目录&#xff1a; 一、概述 1、触摸屏简介 2、安装软件 1&#xff09;设置VSPD软件 2&#xff09;设置VisualTFT软件 3&#xff09;设置串口软件 二、单片机发送指令给触摸屏 1、发送文本 2、显示与隐藏控件 1&#xff09;通过指令助手生成指令 2&#xff09;隐藏…

实现Obsidian PC端和手机端(安卓)同步

步骤 1&#xff1a;在PC端设置Obsidian 安装Obsidian和Git&#xff1a;确保你的PC上已经安装了Obsidian和Git。你可以从Obsidian官网和Git官网下载并安装。 克隆GitHub代码库&#xff1a;在PC上打开命令行&#xff08;例如Windows的命令提示符或Mac/Linux的终端&#xff09;&a…

Redis 初步认识

目录 1. 概述 2. 数据结构 3. 使用方式 4. 优势 1. 概述 Redis &#xff08;Remote Directory Server&#xff09;是一个开源的基于内存的数据存储系统&#xff1b; 可以用作数据库缓存和消息队列等各种场景&#xff0c;也是目前最热门的 NoSQL 数据库之一&#xff1b; 早…

LeetCode3. 无重复字符的最长子串(java实现)

今天分享的题目是LeetCode3. 无重复字符的最长子串&#xff0c;来看题目描述&#xff1a; 无重复的最长子串&#xff0c;题目有可能有些小伙伴没读太懂&#xff0c;其实就是找到不重复的最长子串&#xff0c;比如eg3&#xff0c;pwwk&#xff0c;那么w出现了两次就不符合要求。…

Spring源码- context:component-scan base-package标签的作用源码解析

1.扫描包路径下所有的类加载解析成bean定义信息 ClassPathBeanDefinitionScanner .doScan方法调用路径 doScan:276, ClassPathBeanDefinitionScanner (org.springframework.context.annotation) parse:95, ComponentScanBeanDefinitionParser (org.springframework.context.a…

C语言第九天笔记

数组的概念 什 么是数组 数组是 相同类型&#xff0c; 有序数据的集合。 数 组的特征 数组中的数据被称为数组的 元素&#xff0c;是同构的 数组中的元素存放在内存空间里 (char player_name[6]&#xff1a;申请在内存中开辟6块连续的基于char类 型的变量空间) 衍生概念&…

ClkLog:开源用户行为分析框架,让数据分析更轻松

ClkLog&#xff1a;开源用户行为分析框架&#xff0c;让数据分析更轻松 在数据驱动的时代&#xff0c;找到一个好用的用户行为分析工具真是难上加难。但是今天你有福了&#xff0c;开源免费的 ClkLog 就是你的不二选择&#xff01;本文将为你详细介绍 ClkLog 的功能特点、技术架…

【初阶数据结构篇】冒泡排序和快速排序(中篇)

文章目录 冒泡排序和快速排序前言代码位置冒泡排序快速排序递归法实现hoare版本挖坑法lomuto前后指针递归法复杂度分析 非递归法实现 冒泡排序和快速排序 前言 本篇以排升序为例 代码位置 gitee 冒泡排序 动图理解 作为第一个接触的排序算法&#xff0c;冒泡排序想必大…

OpenCV 图像处理 轮廓检测基本原理

文章目录 基本原理关键函数和参数注意事项 示例代码示例效果代码详解findContours 函数原型findContours函数变体 基本原理 轮廓发现是图像处理中的一个重要步骤&#xff0c;用于检测物体的边界和形状。 图像预处理&#xff1a; 轮廓发现通常在灰度图像上进行。因此&#xff0…

程序员转型AI大模型好转吗?成功率高吗?

前言 在程序员圈子中&#xff0c;技术转型近年来一直是热门话题。随着AI技术的迅猛发展&#xff0c;优秀人才短缺&#xff0c;程序员向AI大模型转型似乎成为了一条通往职场先机的路径。但是&#xff0c;这条转型之路是否容易走&#xff0c;成功率又如何呢&#xff1f; 一、程…

SSM大学生体质管理系统-计算机毕业设计源码75960

摘要 基于SSM的大学生体质管理系统是一款综合性平台&#xff0c;融合了在线课程、健康知识、体测报告等多项功能&#xff0c;旨在为广大大学生提供全方位的健康管理服务。通过在线课程和健康知识模块&#xff0c;用户可以随时学习健康知识&#xff0c;掌握科学的健康管理方法&a…

大屏自适应方案

1.npm下载 npm i autofit.js2.在项目中引入 import autofit from autofit.js3.init(&#xff09;初始化&#xff0c;注意&#xff1a;要在mounted&#xff08;&#xff09;里

通过阿里云OOS“快速设置”快速配置多地域运维任务

1. 介绍 什么是系统运维管理OOS? 系统运维管理OOS&#xff08;CloudOps Orchestration Service&#xff09;是阿里云提供的一项云上自动化运维服务&#xff0c;旨在帮助用户实现运维任务的自动化管理和执行。通过OOS&#xff0c;用户可以设计模板来详细定义执行任务的内容、…

微型丝杆弯曲:工件精度下降的隐形杀手!

微型丝杆作为精密机械部件&#xff0c;‌其弯曲或变形会对使用它进行加工的工件产生直接影响。在机械加工中&#xff0c;微型丝杆弯曲是一个不容忽视的问题&#xff0c;它会对工件造成多方面的损害。 1、加工精度受损&#xff1a;弯曲会直接导致工具的实际运动轨迹与程序设计的…