qq刷赞网站推广软件,用什么软件做网站模板,做网站推广一年多少钱,学产品设计专业后悔了Apache ECharts
介绍 Apache ECharts 介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库#xff0c;提供直观#xff0c;生动#xff0c;可交互#xff0c;可个性化定制的数据可视化图表。 官网地址#xff1a;Apache ECharts 入门案例
Apache Echarts官方…Apache ECharts
介绍 Apache ECharts 介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库提供直观生动可交互可个性化定制的数据可视化图表。 官网地址Apache ECharts 入门案例
Apache Echarts官方提供的快速入门快速上手 - 使用手册 - Apache ECharts 实现步骤 引入echarts.js 文件(当天资料已提供)为 ECharts 准备一个设置宽高的 DOM初始化echarts实例指定图表的配置项和数据使用指定的配置项和数据显示图表 代码开发
!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: 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重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据然后响应给前端来展示图表。 营业额统计
需求分析和设计 产品原型 营业额统计是基于折现图来展现并且按照天来展示的。实际上就是某一个时间范围之内的每一天的营业额。同时不管光标放在哪个点上那么它就会把具体的数值展示出来。 并且还需要注意日期并不是固定写死的是由上边时间选择器来决定。比如选择是近7天、或者是近30日或者是本周就会把相应这个时间段之内的每一天日期通过横坐标展示。 业务规则 营业额指订单状态为已完成的订单金额合计基于可视化报表的折线图展示营业额数据X轴为日期Y轴为营业额根据时间选择区间展示每天的营业额数据 接口设计
代码开发
根据接口定义设计对应的VO 根据接口定义创建ReportController
创建ReportService接口声明getTurnover方法
创建ReportServiceImpl实现类实现getTurnover方法
Service
Slf4j
public class ReportServiceImpl implements ReportService {Autowiredprivate OrderMapper orderMapper;/*** 根据时间区间统计营业额* param begin* param end* return*/public TurnoverReportVO getTurnover(LocalDate begin, LocalDate end) {ListLocalDate dateList new ArrayList();dateList.add(begin);while (!begin.equals(end)){begin begin.plusDays(1);//日期计算获得指定日期后1天的日期dateList.add(begin);}ListDouble turnoverList 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(status, Orders.COMPLETED);map.put(begin,beginTime);map.put(end, endTime);Double 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();}
}
在OrderMapper接口声明sumByMap方法
在OrderMapper.xml文件中编写动态SQL
select idsumByMap resultTypejava.lang.Doubleselect sum(amount) from orderswhereif teststatus ! nulland status #{status}/ifif testbegin ! nulland order_time gt; #{begin}/ifif testend ! nulland order_time lt; #{end}/if/where
/select
用户统计
需求分析和设计 产品原型 所谓用户统计实际上统计的是用户的数量。通过折线图来展示上面这根蓝色线代表的是用户总量下边这根绿色线代表的是新增用户数量是具体到每一天。所以说用户统计主要统计两个数据一个是总的用户数量另外一个是新增用户数量。 业务规则 基于可视化报表的折线图展示用户数据X轴为日期Y轴为用户数根据时间选择区间展示每天的用户总量和新增用户量数据 接口设计 代码开发
根据用户统计接口的返回结果设计VO
根据接口定义在ReportController中创建userStatistics方法
在ReportService接口中声明getUserStatistics方法
/*** 根据时间区间统计用户数量* param begin* param end* return*/
UserReportVO getUserStatistics(LocalDate begin, LocalDate end);
在ReportServiceImpl实现类中实现getUserStatistics方法 /*** 根据时间区间统计用户数量* param begin* param end* return*/
public UserReportVO getUserStatistics(LocalDate begin, LocalDate end) {ListLocalDate dateList new ArrayList();dateList.add(begin);while (!begin.equals(end)){begin begin.plusDays(1);dateList.add(begin);}ListInteger newUserList new ArrayList(); //新增用户数ListInteger totalUserList new ArrayList(); //总用户数for (LocalDate date : dateList) {LocalDateTime beginTime LocalDateTime.of(date, LocalTime.MIN);LocalDateTime endTime LocalDateTime.of(date, LocalTime.MAX);//新增用户数量 select count(id) from user where create_time ? and create_time ?Integer newUser getUserCount(beginTime, endTime);//总用户数量 select count(id) from user where create_time ?Integer totalUser getUserCount(null, endTime);newUserList.add(newUser);totalUserList.add(totalUser);}return UserReportVO.builder().dateList(StringUtils.join(dateList,,)).newUserList(StringUtils.join(newUserList,,)).totalUserList(StringUtils.join(totalUserList,,)).build();
}
在ReportServiceImpl实现类中创建私有方法getUserCount
在UserMapper接口中声明countByMap方法 在UserMapper.xml文件中编写动态SQL
select idcountByMap resultTypejava.lang.Integerselect count(id) from userwhereif testbegin ! nulland create_time gt; #{begin}/ifif testend ! nulland create_time lt; #{end}/if/where
/select订单统计
需求分析和设计 产品原型 订单统计通过一个折现图来展现折线图上有两根线这根蓝色的线代表的是订单总数而下边这根绿色的线代表的是有效订单数指的就是状态是已完成的订单就属于有效订单分别反映的是每一天的数据。上面还有3个数字分别是订单总数、有效订单、订单完成率它指的是整个时间区间之内总的数据。 业务规则 有效订单指状态为 “已完成” 的订单基于可视化报表的折线图展示订单数据X轴为日期Y轴为订单数量根据时间选择区间展示每天的订单总数和有效订单数展示所选时间区间内的有效订单数、总订单数、订单完成率订单完成率 有效订单数 / 总订单数 * 100% 接口设计 代码开发
根据订单统计接口的返回结果设计VO 在ReportController中根据订单统计接口创建orderStatistics方法
在ReportService接口中声明getOrderStatistics方法
在ReportServiceImpl实现类中实现getOrderStatistics方法
/*** 根据时间区间统计订单数量* param begin* param end* return*/
public OrderReportVO getOrderStatistics(LocalDate begin, LocalDate end) {ListLocalDate dateList new ArrayList();dateList.add(begin);while (!begin.equals(end)){begin begin.plusDays(1);dateList.add(begin);}//每天订单总数集合ListInteger orderCountList new ArrayList();//每天有效订单数集合ListInteger validOrderCountList new ArrayList();for (LocalDate date : dateList) {LocalDateTime beginTime LocalDateTime.of(date, LocalTime.MIN);LocalDateTime endTime LocalDateTime.of(date, LocalTime.MAX);//查询每天的总订单数 select count(id) from orders where order_time ? and order_time ?Integer orderCount getOrderCount(beginTime, endTime, null);//查询每天的有效订单数 select count(id) from orders where order_time ? and order_time ? and status ?Integer validOrderCount getOrderCount(beginTime, endTime, Orders.COMPLETED);orderCountList.add(orderCount);validOrderCountList.add(validOrderCount);}//时间区间内的总订单数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;}return OrderReportVO.builder().dateList(StringUtils.join(dateList, ,)).orderCountList(StringUtils.join(orderCountList, ,)).validOrderCountList(StringUtils.join(validOrderCountList, ,)).totalOrderCount(totalOrderCount).validOrderCount(validOrderCount).orderCompletionRate(orderCompletionRate).build();
}
在ReportServiceImpl实现类中提供私有方法getOrderCount
在OrderMapper接口中声明countByMap方法
在OrderMapper.xml文件中编写动态SQL
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 产品原型 业务规则 • 根据时间选择区间展示销量前 10 的商品包括菜品和套餐 • 基于可视化报表的柱状图降序展示商品销量 • 此处的销量为商品销售的份数 接口设计
代码开发
根据销量排名接口的返回结果设计VO 在ReportController中根据销量排名接口创建top10方法
/*** 销量排名统计* param begin* param end* return*/
GetMapping(/top10)
ApiOperation(销量排名统计)
public ResultSalesTop10ReportVO top10(DateTimeFormat(pattern yyyy-MM-dd) LocalDate begin,DateTimeFormat(pattern yyyy-MM-dd) LocalDate end){return Result.success(reportService.getSalesTop10(begin,end));
}
在ReportService接口中声明getSalesTop10方法
/*** 查询指定时间区间内的销量排名top10* param begin* param end* return*/
SalesTop10ReportVO getSalesTop10(LocalDate begin, LocalDate end);
在ReportServiceImpl实现类中实现getSalesTop10方法
/*** 查询指定时间区间内的销量排名top10* param begin* param end* return*/
public SalesTop10ReportVO getSalesTop10(LocalDate begin, LocalDate end) {LocalDateTime beginTime LocalDateTime.of(begin, LocalTime.MIN);LocalDateTime endTime LocalDateTime.of(end, LocalTime.MAX);ListGoodsSalesDTO goodsSalesDTOList orderMapper.getSalesTop10(beginTime, endTime);String nameList StringUtils.join(goodsSalesDTOList.stream().map(GoodsSalesDTO::getName).collect(Collectors.toList()),,);String numberList StringUtils.join(goodsSalesDTOList.stream().map(GoodsSalesDTO::getNumber).collect(Collectors.toList()),,);return SalesTop10ReportVO.builder().nameList(nameList).numberList(numberList).build();
}
在OrderMapper接口中声明getSalesTop10方法
/*** 查询商品销量排名* param begin* param end*/
ListGoodsSalesDTO getSalesTop10(LocalDateTime begin, LocalDateTime end);
在OrderMapper.xml文件中编写动态SQL
select idgetSalesTop10 resultTypecom.sky.dto.GoodsSalesDTOselect od.name name,sum(od.number) number from order_detail od ,orders owhere od.order_id o.idand o.status 5if testbegin ! nulland order_time gt; #{begin}/ifif testend ! nulland order_time lt; #{end}/ifgroup by nameorder by number desclimit 0, 10
/select 上一节
订单状态定时处理、来单提醒和客户催单day10-CSDN博客
下一节
