網(wǎng)站資訊建設(shè)考研培訓(xùn)
Apache ECharts
介紹
Apache ECharts 介紹
Apache ECharts 是一款基于 Javascript 的數(shù)據(jù)可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。
官網(wǎng)地址：Apache ECharts
入門案例
Apache Echarts官方提供的快速入門：快速上手 - 使用手冊 - Apache ECharts
實(shí)現(xiàn)步驟：
- 引入echarts.js 文件(當(dāng)天資料已提供)
- 為 ECharts 準(zhǔn)備一個設(shè)置寬高的 DOM
- 初始化echarts實(shí)例
- 指定圖表的配置項(xiàng)和數(shù)據(jù)
- 使用指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
代碼開發(fā)
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入剛剛下載的 ECharts 文件 --><script src="echarts.js"></script></head><body><!-- 為 ECharts 準(zhǔn)備一個定義了寬高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data: ['銷量']},xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script></body>
</html>總結(jié)：使用Echarts，重點(diǎn)在于研究當(dāng)前圖表所需的數(shù)據(jù)格式。通常是需要后端提供符合格式要求的動態(tài)數(shù)據(jù)，然后響應(yīng)給前端來展示圖表。
營業(yè)額統(tǒng)計
需求分析和設(shè)計
產(chǎn)品原型
營業(yè)額統(tǒng)計是基于折現(xiàn)圖來展現(xiàn)，并且按照天來展示的。實(shí)際上，就是某一個時間范圍之內(nèi)的每一天的營業(yè)額。同時，不管光標(biāo)放在哪個點(diǎn)上，那么它就會把具體的數(shù)值展示出來。
并且還需要注意日期并不是固定寫死的，是由上邊時間選擇器來決定。比如選擇是近7天、或者是近30日，或者是本周，就會把相應(yīng)這個時間段之內(nèi)的每一天日期通過橫坐標(biāo)展示。
業(yè)務(wù)規(guī)則：
- 營業(yè)額指訂單狀態(tài)為已完成的訂單金額合計
- 基于可視化報表的折線圖展示營業(yè)額數(shù)據(jù)，X軸為日期，Y軸為營業(yè)額
- 根據(jù)時間選擇區(qū)間，展示每天的營業(yè)額數(shù)據(jù)
接口設(shè)計：
代碼開發(fā)
根據(jù)接口定義設(shè)計對應(yīng)的VO：
根據(jù)接口定義創(chuàng)建ReportController：
創(chuàng)建ReportService接口，聲明getTurnover方法：
創(chuàng)建ReportServiceImpl實(shí)現(xiàn)類，實(shí)現(xiàn)getTurnover方法
@Service
@Slf4j
public class ReportServiceImpl implements ReportService {@Autowiredprivate OrderMapper orderMapper;/*** 根據(jù)時間區(qū)間統(tǒng)計營業(yè)額* @param begin* @param end* @return*/public TurnoverReportVO getTurnover(LocalDate begin, LocalDate end) {List<LocalDate> dateList = new ArrayList<>();dateList.add(begin);while (!begin.equals(end)){begin = begin.plusDays(1);//日期計算，獲得指定日期后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);//查詢營業(yè)額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);}//數(shù)據(jù)封裝return TurnoverReportVO.builder().dateList(StringUtils.join(dateList,",")).turnoverList(StringUtils.join(turnoverList,",")).build();}
}在OrderMapper接口聲明sumByMap方法：
在OrderMapper.xml文件中編寫動態(tài)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 >= #{begin}</if><if test="end != null">and order_time <= #{end}</if></where>
</select>用戶統(tǒng)計
需求分析和設(shè)計
產(chǎn)品原型：
所謂用戶統(tǒng)計，實(shí)際上統(tǒng)計的是用戶的數(shù)量。通過折線圖來展示，上面這根藍(lán)色線代表的是用戶總量，下邊這根綠色線代表的是新增用戶數(shù)量，是具體到每一天。所以說用戶統(tǒng)計主要統(tǒng)計兩個數(shù)據(jù)，一個是總的用戶數(shù)量，另外一個是新增用戶數(shù)量。
業(yè)務(wù)規(guī)則：
- 基于可視化報表的折線圖展示用戶數(shù)據(jù)，X軸為日期，Y軸為用戶數(shù)
- 根據(jù)時間選擇區(qū)間，展示每天的用戶總量和新增用戶量數(shù)據(jù)
接口設(shè)計：
代碼開發(fā)
根據(jù)用戶統(tǒng)計接口的返回結(jié)果設(shè)計VO：
根據(jù)接口定義，在ReportController中創(chuàng)建userStatistics方法：
在ReportService接口中聲明getUserStatistics方法：
/*** 根據(jù)時間區(qū)間統(tǒng)計用戶數(shù)量* @param begin* @param end* @return*/
UserReportVO getUserStatistics(LocalDate begin, LocalDate end);在ReportServiceImpl實(shí)現(xiàn)類中實(shí)現(xiàn)getUserStatistics方法
/*** 根據(jù)時間區(qū)間統(tǒng)計用戶數(shù)量* @param begin* @param end* @return*/
public UserReportVO getUserStatistics(LocalDate begin, LocalDate end) {List<LocalDate> dateList = new ArrayList<>();dateList.add(begin);while (!begin.equals(end)){begin = begin.plusDays(1);dateList.add(begin);}List<Integer> newUserList = new ArrayList<>(); //新增用戶數(shù)List<Integer> totalUserList = new ArrayList<>(); //總用戶數(shù)for (LocalDate date : dateList) {LocalDateTime beginTime = LocalDateTime.of(date, LocalTime.MIN);LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);//新增用戶數(shù)量 select count(id) from user where create_time > ? and create_time < ?Integer newUser = getUserCount(beginTime, endTime);//總用戶數(shù)量 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實(shí)現(xiàn)類中創(chuàng)建私有方法getUserCount：
在UserMapper接口中聲明countByMap方法：
?在UserMapper.xml文件中編寫動態(tài)SQL：
<select id="countByMap" resultType="java.lang.Integer">select count(id) from user<where><if test="begin != null">and create_time >= #{begin}</if><if test="end != null">and create_time <= #{end}</if></where>
</select>
訂單統(tǒng)計
需求分析和設(shè)計
產(chǎn)品原型：
訂單統(tǒng)計通過一個折現(xiàn)圖來展現(xiàn)，折線圖上有兩根線，這根藍(lán)色的線代表的是訂單總數(shù)，而下邊這根綠色的線代表的是有效訂單數(shù)，指的就是狀態(tài)是已完成的訂單就屬于有效訂單，分別反映的是每一天的數(shù)據(jù)。上面還有3個數(shù)字，分別是訂單總數(shù)、有效訂單、訂單完成率，它指的是整個時間區(qū)間之內(nèi)總的數(shù)據(jù)。
業(yè)務(wù)規(guī)則：
- 有效訂單指狀態(tài)為 “已完成” 的訂單
- 基于可視化報表的折線圖展示訂單數(shù)據(jù)，X軸為日期，Y軸為訂單數(shù)量
- 根據(jù)時間選擇區(qū)間，展示每天的訂單總數(shù)和有效訂單數(shù)
- 展示所選時間區(qū)間內(nèi)的有效訂單數(shù)、總訂單數(shù)、訂單完成率，訂單完成率 = 有效訂單數(shù) / 總訂單數(shù) * 100%
?接口設(shè)計：
代碼開發(fā)
根據(jù)訂單統(tǒng)計接口的返回結(jié)果設(shè)計VO：
在ReportController中根據(jù)訂單統(tǒng)計接口創(chuàng)建orderStatistics方法：
在ReportService接口中聲明getOrderStatistics方法：
在ReportServiceImpl實(shí)現(xiàn)類中實(shí)現(xiàn)getOrderStatistics方法
/*** 根據(jù)時間區(qū)間統(tǒng)計訂單數(shù)量* @param begin* @param end* @return*/
public OrderReportVO getOrderStatistics(LocalDate begin, LocalDate end) {List<LocalDate> dateList = new ArrayList<>();dateList.add(begin);while (!begin.equals(end)){begin = begin.plusDays(1);dateList.add(begin);}//每天訂單總數(shù)集合List<Integer> orderCountList = new ArrayList<>();//每天有效訂單數(shù)集合List<Integer> validOrderCountList = new ArrayList<>();for (LocalDate date : dateList) {LocalDateTime beginTime = LocalDateTime.of(date, LocalTime.MIN);LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);//查詢每天的總訂單數(shù) select count(id) from orders where order_time > ? and order_time < ?Integer orderCount = getOrderCount(beginTime, endTime, null);//查詢每天的有效訂單數(shù) 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);}//時間區(qū)間內(nèi)的總訂單數(shù)Integer totalOrderCount = orderCountList.stream().reduce(Integer::sum).get();
//時間區(qū)間內(nèi)的總有效訂單數(shù)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實(shí)現(xiàn)類中提供私有方法getOrderCount：
在OrderMapper接口中聲明countByMap方法：
在OrderMapper.xml文件中編寫動態(tài)SQL：
<select id="countByMap" resultType="java.lang.Integer">select count(id) from orders<where><if test="status != null">and status = #{status}</if><if test="begin != null">and order_time >= #{begin}</if><if test="end != null">and order_time <= #{end}</if></where>
</select>銷量排名Top10
產(chǎn)品原型：
業(yè)務(wù)規(guī)則：
? 根據(jù)時間選擇區(qū)間，展示銷量前 10 的商品（包括菜品和套餐）? 基于可視化報表的柱狀圖降序展示商品銷量? 此處的銷量為商品銷售的份數(shù)
接口設(shè)計：
代碼開發(fā)
根據(jù)銷量排名接口的返回結(jié)果設(shè)計VO：
在ReportController中根據(jù)銷量排名接口創(chuàng)建top10方法：
/*** 銷量排名統(tǒng)計* @param begin* @param end* @return*/
@GetMapping("/top10")
@ApiOperation("銷量排名統(tǒng)計")
public Result<SalesTop10ReportVO> top10(@DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate begin,@DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end){return Result.success(reportService.getSalesTop10(begin,end));
}在ReportService接口中聲明getSalesTop10方法：
/*** 查詢指定時間區(qū)間內(nèi)的銷量排名top10* @param begin* @param end* @return*/
SalesTop10ReportVO getSalesTop10(LocalDate begin, LocalDate end);在ReportServiceImpl實(shí)現(xiàn)類中實(shí)現(xiàn)getSalesTop10方法：
/*** 查詢指定時間區(qū)間內(nèi)的銷量排名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);List<GoodsSalesDTO> 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*/
List<GoodsSalesDTO> getSalesTop10(LocalDateTime begin, LocalDateTime end);在OrderMapper.xml文件中編寫動態(tài)SQL：
<select id="getSalesTop10" resultType="com.sky.dto.GoodsSalesDTO">select od.name name,sum(od.number) number from order_detail od ,orders owhere od.order_id = o.idand o.status = 5<if test="begin != null">and order_time >= #{begin}</if><if test="end != null">and order_time <= #{end}</if>group by nameorder by number desclimit 0, 10
</select>上一節(jié)：
訂單狀態(tài)定時處理、來單提醒和客戶催單（day10）-CSDN博客