使用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();}
}

---

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