网站设计专业就业方向有哪些,哪些网站可以做引流,php wordpress xmlrpc,wordpress php5.4支持今日首先介绍前端技术Apache ECharts#xff0c;说明后端需要准备的数据#xff0c;然后讲解具体统计功能的实现#xff0c;包括营业额统计、用户统计、订单统计、销量排名。
一、ECharts
是什么
ECharts是一款基于 Javascript 的数据可视化图表库。我们用它来展示图表数…今日首先介绍前端技术Apache ECharts说明后端需要准备的数据然后讲解具体统计功能的实现包括营业额统计、用户统计、订单统计、销量排名。
一、ECharts
是什么
ECharts是一款基于 Javascript 的数据可视化图表库。我们用它来展示图表数据。
入门案例
步骤
1). 引入echarts.js 文件
2). 为 ECharts 准备一个设置宽高的 DOM
3). 初始化echarts实例
4). 指定图表的配置项和数据
5). 使用指定的配置项和数据显示图表
代码
js文件在黑马对应项目自取。
测试用的html代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleECharts/title!-- 引入刚刚下载的 ECharts 文件 --script srcecharts.js/script/headbody!-- 为 ECharts 准备一个定义了宽高的 DOM --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {title: {text: 班级出勤人数},tooltip: {},legend: {data: [人数]},xAxis: {type: category,data: [星期1, 星期2, 星期3, 星期4, 星期5]},yAxis: {type: value},series: [{name: 人数,type: line,data: [160, 71, 66, 73, 68],smooth: true}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script/body
/html
结果页面如下 然后我们打开ECharts官网Apache ECharts 选择一个图案来试着改一下。
首先进入官网点击所有示例。 然后点击一个自己喜欢的样式 复制左边的代码到原代码的option位置 复制后代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleECharts/title!-- 引入刚刚下载的 ECharts 文件 --script srcecharts.js/script/headbody!-- 为 ECharts 准备一个定义了宽高的 DOM --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {title: {text: Stacked Area Chart},tooltip: {trigger: axis,axisPointer: {type: cross,label: {backgroundColor: #6a7985}}},legend: {data: [Email, Union Ads, Video Ads, Direct, Search Engine]},toolbox: {feature: {saveAsImage: {}}},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},xAxis: [{type: category,boundaryGap: false,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]}],yAxis: [{type: value}],series: [{name: Email,type: line,stack: Total,areaStyle: {},emphasis: {focus: series},data: [120, 132, 101, 134, 90, 230, 210]},{name: Union Ads,type: line,stack: Total,areaStyle: {},emphasis: {focus: series},data: [220, 182, 191, 234, 290, 330, 310]},{name: Video Ads,type: line,stack: Total,areaStyle: {},emphasis: {focus: series},data: [150, 232, 201, 154, 190, 330, 410]},{name: Direct,type: line,stack: Total,areaStyle: {},emphasis: {focus: series},data: [320, 332, 301, 334, 390, 330, 320]},{name: Search Engine,type: line,stack: Total,label: {show: true,position: top},areaStyle: {},emphasis: {focus: series},data: [820, 932, 901, 934, 1290, 1330, 1320]}]
};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script/body
/html
页面展示结果如下 总结
传输的两列数据分别是下标和数据。在如下位置 二、营业额统计
查看接口文档 分析
控制层
控制层只要接收数据传给业务层返回VO已经有设计好的TurnoverReportVO了就可以。重点在业务层和持久层。
业务层
具体要处理得到两类或者说两列数据包括
日期列表营业额列表
所以步骤便是
获取日期列表获取日期对应的营业额的列表封装返回
持久层
那么持久层需要的操作就在第2步即
根据日期查找当日营业额
之后几个案例都是大差不差的层次结构除了数据的种类要求不同。 具体代码
控制层
RestController
Slf4j
Api(tags 统计相关)
RequestMapping(/admin/report)
public class ReportController {Autowiredprivate ReportService reportService;GetMapping(/turnoverStatistics)public Result turnoverStatistics(DateTimeFormat(pattern yyyy-MM-dd) LocalDate begin,DateTimeFormat(pattern yyyy-MM-dd) LocalDate end) {TurnoverReportVO turnoverReportVO reportService.turnoverStatistics(begin, end);return Result.success(turnoverReportVO);}
}
业务层
Service
public class ReportServiceImpl implements ReportService {Autowiredprivate OrdersMapper ordersMapper;Overridepublic TurnoverReportVO turnoverStatistics(LocalDate begin, LocalDate end) {// 1. 获取日期列表ListLocalDate list getDateList(begin, end);// 2. 查询每日营业额ListDouble result new ArrayList();Double turnover;LocalDateTime dayBegin;LocalDateTime dayEnd;if (list ! null list.size() 0) {dayBegin LocalDateTime.of(list.get(0), LocalTime.MIN); // 知识点2和3dayEnd LocalDateTime.of(list.get(0), LocalTime.MAX); // 知识点2和3} else {return new TurnoverReportVO();}for (LocalDate localDate : list) {MapString, Object map new HashMap();map.put(status, Orders.COMPLETED);map.put(begin, dayBegin);map.put(end, dayEnd);turnover ordersMapper.sumByMap(map); // 知识点4result.add(turnover null ? 0 : turnover);dayBegin dayBegin.plusDays(1);dayEnd dayEnd.plusDays(1);}// 3. 返回TurnoverReportVO turnoverReportVO new TurnoverReportVO();turnoverReportVO.setDateList(StringUtils.join(list, ,));turnoverReportVO.setTurnoverList(StringUtils.join(result, ,));return turnoverReportVO;}private ListLocalDate getDateList(LocalDate begin, LocalDate end) {ListLocalDate list new ArrayList();while (begin.compareTo(end) 0) { // 知识点1list.add(begin);begin begin.plusDays(1);}return list;}
}
4个知识点
这里体现了4个知识点
日期之间用compareTo比较LocalDate和LocalTime组合成LocalDateTime用LocalDateTime的of方法LocalTime.MIN与LocalTime.MAX用Map封装数据交给mapper查找。
持久层
直接上xml文件了
elect idsumByMap resultTypejava.lang.Doubleselect sum(amount)from orderswhereif teststatus!null and status!status #{status}/ifif testbegin!null and end!nulland order_time between #{begin} and #{end}/if/where
/select 三、用户统计
接口文档 分析所需数据
由于三层的架构都大差不差所以直接介绍所需数据的不同。
日期列表新增用户数列表总用户数列表
具体代码
控制层
GetMapping(/userStatistics)
public Result userStatistics(DateTimeFormat(pattern yyyy-MM-dd) LocalDate begin,DateTimeFormat(pattern yyyy-MM-dd) LocalDate end) {UserReportVO userReportVO reportService.userStatistics(begin, end);return Result.success(userReportVO);
}
业务层
Override
public UserReportVO userStatistics(LocalDate begin, LocalDate end) {// 1. 获取日期列表ListLocalDate dateList getDateList(begin, end);// 2. 获取用户数量列表ListInteger newUserList new ArrayList();ListInteger totalUserList new ArrayList();LocalDateTime dayBegin;LocalDateTime dayEnd;if (dateList ! null dateList.size() 0) {dayBegin LocalDateTime.of(dateList.get(0), LocalTime.MIN);dayEnd LocalDateTime.of(dateList.get(0), LocalTime.MAX);} else {return new UserReportVO();}Integer totalUser;Integer newUser;for (LocalDate localDate : dateList) {MapString, Object map new HashMap();map.put(end, dayEnd);totalUser userMapper.countByMap(map);totalUserList.add(totalUser null ? 0 : totalUser);map.put(begin, dayBegin);newUser userMapper.countByMap(map);newUserList.add(newUser null ? 0 : newUser);dayBegin dayBegin.plusDays(1);dayEnd dayEnd.plusDays(1);}// 3. 返回UserReportVO userReportVO new UserReportVO();userReportVO.setDateList(StringUtils.join(dateList, ,));userReportVO.setNewUserList(StringUtils.join(newUserList, ,));userReportVO.setTotalUserList(StringUtils.join(totalUserList, ,));return userReportVO;
}
3个注意的点
第一点获取日期列表可以抽取出来供营业额统计、用户统计共同调用。 小tips抽取函数的快捷键是 ctrl alt m 哦。 第二点持久层的两次查找可以巧妙的用一个函数来完成的。用动态sql的if判断分为有begin时间的判断和没有begin时间的判断进行处理。具体看下面持久层代码。 第三点两个统计都要判断持久层查到的结果是不是null是的话要归为0哦。 持久层
select idcountByMap resultTypejava.lang.Integerselect count(*) from userwhereif testend!nulland create_time lt; #{end}/ifif testbegin!nulland create_time gt; #{begin}/if/where
/select
四、订单统计
接口文档 所需数据
日期列表所有订单每日总数列表所有订单总数有效订单每日总数列表有效订单总数订单完成率
具体代码
控制层
GetMapping(/ordersStatistics)
public Result ordersStatistics(DateTimeFormat(pattern yyyy-MM-dd) LocalDate begin,DateTimeFormat(pattern yyyy-MM-dd) LocalDate end) {OrderReportVO orderReportVO reportService.ordersStatistics(begin, end);return Result.success(orderReportVO);
}
业务层
Override
public OrderReportVO ordersStatistics(LocalDate begin, LocalDate end) {OrderReportVO orderReportVO new OrderReportVO();// 1. 日期列表ListLocalDate dateList getDateList(begin, end);if (dateList null) {return orderReportVO;}// 2. 订单数列表ListInteger totalOrderList new ArrayList();// 3. 有效订单数列表ListInteger validOrderList new ArrayList();// 4. 订单总数Integer totalOrderCount 0;// 5. 有效订单总数Integer validOrderCount 0;for (LocalDate localDate : dateList) {Map map new HashMap();map.put(begin, LocalDateTime.of(localDate, LocalTime.MIN));map.put(end, LocalDateTime.of(localDate, LocalTime.MAX));Integer total ordersMapper.countByMap(map);total total null ? 0 : total;map.put(status, Orders.COMPLETED);Integer valid ordersMapper.countByMap(map);valid valid null ? 0 : valid;totalOrderList.add(total);validOrderList.add(valid);totalOrderCount total;validOrderCount valid;}// 6. 订单完成率Double completionR 0.0;if (totalOrderCount ! null) {completionR validOrderCount * 1.0 / totalOrderCount;}orderReportVO.setDateList(StringUtils.join(dateList, ,));orderReportVO.setOrderCountList(StringUtils.join(totalOrderList, ,));orderReportVO.setValidOrderCountList(StringUtils.join(validOrderList, ,));orderReportVO.setTotalOrderCount(totalOrderCount);orderReportVO.setValidOrderCount(validOrderCount);orderReportVO.setOrderCompletionRate(completionR);return orderReportVO;
}
1个注意的巩固知识点
还是用动态sql来巧妙的满足一个函数查询两种不同的数据即status的if判断是否查询。
持久层
select idcountByMap resultTypejava.lang.Integerselect count(id) from orderswhereif teststatus ! nulland status #{status}/ifif testbegin ! nulland order_time gt; #{begin}/ifif testend ! nulland order_time lt; #{end}/if/where
/select
没啥好说的算一个巩固练习。
五、销量排名top10
接口文档 所需数据
商品名列表销量列表
具体代码
控制层
GetMapping(/top10)
public Result top10(DateTimeFormat(pattern yyyy-MM-dd) LocalDate begin,DateTimeFormat(pattern yyyy-MM-dd) LocalDate end) {SalesTop10ReportVO salesTop10ReportVO reportService.top10(begin, end);return Result.success(salesTop10ReportVO);
}
业务层
Override
public SalesTop10ReportVO top10(LocalDate begin, LocalDate end) {ListGoodsSalesDTO goodsSalesDTOS ordersMapper.countSaleTop10(LocalDateTime.of(begin, LocalTime.MIN), LocalDateTime.of(end, LocalTime.MAX));if (goodsSalesDTOS null) {return new SalesTop10ReportVO();}ListString nameList new ArrayList();ListInteger numberList new ArrayList();for (GoodsSalesDTO goodsSalesDTO : goodsSalesDTOS) {nameList.add(goodsSalesDTO.getName());numberList.add(goodsSalesDTO.getNumber());} // 思考这里可不可以简写SalesTop10ReportVO salesTop10ReportVO new SalesTop10ReportVO();salesTop10ReportVO.setNameList(StringUtils.join(nameList, ,));salesTop10ReportVO.setNumberList(StringUtils.join(numberList, ,));return salesTop10ReportVO;
}
2个注意的点
第一个下面持久层的多表查询。
第二个查询到DTO后对象数据到两列数据的转换。
法一普通方法老老实实用两个List添加。法二流方法。值得练习公司中可能会见到、用到很多资深程序员必备。
练习用流的写法完成查询数据到两个列表数据的转换
尝试用流的写法完成。
答案如下
Override
public SalesTop10ReportVO top10(LocalDate begin, LocalDate end) {ListGoodsSalesDTO goodsSalesDTOS ordersMapper.countSaleTop10(LocalDateTime.of(begin, LocalTime.MIN), LocalDateTime.of(end, LocalTime.MAX));if (goodsSalesDTOS null) {return new SalesTop10ReportVO();}// ListString nameList new ArrayList();
// ListInteger numberList new ArrayList();
// for (GoodsSalesDTO goodsSalesDTO : goodsSalesDTOS) {
// nameList.add(goodsSalesDTO.getName());
// numberList.add(goodsSalesDTO.getNumber());
// }// 注意这里的写法ListString nameList goodsSalesDTOS.stream().map(GoodsSalesDTO::getName).collect(Collectors.toList());ListInteger numberList goodsSalesDTOS.stream().map(GoodsSalesDTO::getNumber).collect(Collectors.toList());// 注意上面的写法SalesTop10ReportVO salesTop10ReportVO new SalesTop10ReportVO();salesTop10ReportVO.setNameList(StringUtils.join(nameList, ,));salesTop10ReportVO.setNumberList(StringUtils.join(numberList, ,));return salesTop10ReportVO;
}
持久层
select idcountSaleTop10 resultTypecom.sky.dto.GoodsSalesDTOselect t2.name, sum(t2.number) as numberfrom orders as t1inner join order_detail as t2on t1.id t2.order_idwhere t1.status 5and t1.order_time #{begin}and t1.order_time lt; #{end}group by t2.nameorder by number desc limit 0, 10;
/select
复习
1.ECharts最少需要准备几列数据
2.LocalDateTime的比较以及比较接口讲解的复习
3.日期时间的拼接、时间在一天的最大、最小值
4.Map封装数据进行查找的代码手法
5.统计中持久层查询为null的归0化处理
6.查找增量与总量时的简写mapper查询。
