Apache Echarts介绍与入门

介绍

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

官网地址：https://echarts.apache.org/zh/index.html

入门案例

Apache Echarts官方提供的快速入门：https://echarts.apache.org/handbook/zh/get-started/

入门案例的html代码：

          ECharts                              // 基于准备好的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);      

结果如图：

总结：使用Echarts，重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据，然后响应给前端来展示图表。

应用

使用Apache Echarts 可视化商店的营业额，业务规则：

• 营业额指订单状态为已完成的订单金额合计
• 基于可视化报表的折线图展示营业额数据，X轴为日期，Y轴为营业额
• 根据时间选择区间，展示每天的营业额数据

  接口设计：

  根据接口定义设计对应的VO：

  Controller相关代码：

  package com.sky.controller.admin;import com.sky.result.Result;import com.sky.service.ReportService;import com.sky.vo.TurnoverReportVO;import io.swagger.annotations.Api;import io.swagger.annotations.ApiOperation;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.format.annotation.DateTimeFormat;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.time.LocalDate;import java.time.LocalDateTime;/** * ClassName: ReportController * PackageName: com.sky.controller.admin * Description: 数据统计相关接口 * * @Author Xiyan Zhong * @Create 2024/3/1 上午11:19 * @Version 1.0 */@RestController@RequestMapping("/admin/report")@Api(tags = "数据统计相关接口")@Slf4jpublic class ReportController {    @Autowired    private ReportService reportService;    /**     * 营业额统计     * @param begin     * @param end     * @return     */    @GetMapping("/turnoverStatistics")    @ApiOperation("营业额统计")    public Result 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接口：

  package com.sky.service;import com.sky.vo.TurnoverReportVO;import java.time.LocalDate;/** * ClassName: ReportService * PackageName: com.sky.service * Description: * * @Author Xiyan Zhong * @Create 2024/3/1 上午11:27 * @Version 1.0 */public interface ReportService {    /**     * 统计指定区间内的营业额数据     * @param begin     * @param end     * @return     */    TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate end);}

  Service实现类：

  package com.sky.service.impl;import com.sky.entity.Orders;import com.sky.mapper.OrderMapper;import com.sky.service.ReportService;import com.sky.vo.TurnoverReportVO;import lombok.extern.slf4j.Slf4j;import org.apache.commons.lang3.StringUtils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import java.time.LocalDate;import java.time.LocalDateTime;import java.time.LocalTime;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;/** * ClassName: ReportServiceImpl * PackageName: com.sky.service.impl * Description: * * @Author Xiyan Zhong * @Create 2024/3/1 上午11:30 * @Version 1.0 */@Service@Slf4jpublic class ReportServiceImpl implements ReportService {    @Autowired    private OrderMapper orderMapper;    /**     * 统计指定区间内的营业额数据     * @param begin     * @param end     * @return     */    @Override    public TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate end) {        // 当前集合用于存放从begin到end范围内的每天日期        List dateList = new ArrayList();        dateList.add(begin);        while (!begin.equals(end)){            // 日期计算，计算指定日期的后一天对应的日期            begin = begin.plusDays(1);            dateList.add(begin);        }        // 存放每天的营业额        List turnoverList = new ArrayList();        for (LocalDate date : dateList) {            // 查询date日期对应的营业额数据，营业额是指：状态为“已完成”的订单金额合计            LocalDateTime beginTime = LocalDateTime.of(date, LocalTime.MIN);            LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);            // select sum(amount) from orders where order_time > beginTime and order_time  
  Mapper相关代码：
   
  package com.sky.mapper;import java.util.Map;/** * ClassName: OrderMapper * PackageName: com.sky.mapper * Description: * * @Author Xiyan Zhong * @Create 2024/1/5 上午9:48 * @Version 1.0 */@Mapperpublic interface OrderMapper {    /**     * 根据动态条件统计营业额数据     * @param map     * @return     */    Double sumByMap(Map map);}
   
  通过xml实现数据库的查询：
   
              select sum(amount) from orders                     and order_time ">>= #{begin}             and order_time <= #{end}             and status = #{status}            
   
  实现效果：