一、 需求分析

会员信息是体检机构的核心数据，其会员数量和增长数量可以反映出机构的部分运营情况。通过折线图可以直观的反映出会员数量的增长趋势。本章节我们需要展示过去一年时间内每个月的会员总数据量。展示效果如下图：

二、 完善页面

会员数量折线图对应的页面为/pages/report_member.html。

2.1 导入ECharts库

第一步：将echarts.js文件复制到health_backend工程的plugins目录下

第二步：在report_member.html页面引入echarts.js文件

<script src="../plugins/echarts/echarts.js"></script>

2.2 参照官方实例导入折线图 

<div class="box">
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="chart1" style="height:600px;"></div>
</div>

<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart1 = echarts.init(document.getElementById('chart1'));
  //发送ajax请求获取动态数据
  axios.get("/report/getMemberReport.do").then((res)=>{
    myChart1.setOption(
      {
        title: {
          text: '会员数量'
        },
        tooltip: {},
        legend: {
          data:['会员数量']
        },
        xAxis: {
          data: res.data.data.months
        },
        yAxis: {
          type:'value'
        },
        series: [{
          name: '会员数量',
          type: 'line',
          data: res.data.data.memberCount
        }]
      });
  });
</script>

根据折线图对数据格式的要求，我们发送ajax请求，服务端需要返回如下格式的数据：

{
    "data":{
            "months":["2019.01","2019.02","2019.03","2019.04"],
            "memberCount":[3,4,8,10]
           },
    "flag":true,
    "message":"获取会员统计数据成功"
}

三、 后台代码

3.1 Controller

在health_backend工程中创建ReportController并提供getMemberReport方法

/**
 * 统计报表
 */
@RestController
@RequestMapping("/report")
public class ReportController {
    @Reference
    private MemberService memberService;
    /**
     * 会员数量统计
     * @return
     */
    @RequestMapping("/getMemberReport")
    public Result getMemberReport(){
        Calendar calendar = Calendar.getInstance();
        calendar.add(Calendar.MONTH,-12);//获得当前日期之前12个月的日期
​
        List<String> list = new ArrayList<>();
        for(int i=0;i<12;i++){
            calendar.add(Calendar.MONTH,1);
            list.add(new SimpleDateFormat("yyyy.MM").format(calendar.getTime()));
        }
​
        Map<String,Object> map = new HashMap<>();
        map.put("months",list);
​
        List<Integer> memberCount = memberService.findMemberCountByMonth(list);
        map.put("memberCount",memberCount);
​
        return new Result(true, MessageConstant.GET_MEMBER_NUMBER_REPORT_SUCCESS,map);
    }
}

3.2 服务接口

在MemberService服务接口中扩展方法findMemberCountByMonth

public List<Integer> findMemberCountByMonth(List<String> month);

3.3 服务实现类

在MemberServiceImpl服务实现类中实现findMemberCountByMonth方法

//根据月份统计会员数量
public List<Integer> findMemberCountByMonth(List<String> month) {
  List<Integer> list = new ArrayList<>();
  for(String m : month){
    m = m + ".31";//格式：2019.04.31
    Integer count = memberDao.findMemberCountBeforeDate(m);
    list.add(count);
  }
  return list;
}

3.4 Dao接口

在MemberDao接口中扩展方法findMemberCountBeforeDate

public Integer findMemberCountBeforeDate(String date);

3.5 Mapper映射文件

在MemberDao.xml映射文件中提供SQL语句

<!--根据日期统计会员数，统计指定日期之前的会员数-->
<select id="findMemberCountBeforeDate" parameterType="string" resultType="int">
    select count(id) from t_member where regTime &lt;= #{value}
</select>

总结

该功能旨在通过 ECharts 折线图直观展示过去一年每月会员总量，核心是前后端协同实现数据可视化。​
前端在 report_member.html 页面，先导入 ECharts 库，创建固定尺寸 DOM 容器初始化图表实例，再通过 Axios 发送 GET 请求到 /report/getMemberReport.do 接口获取数据，按折线图格式配置 option，将返回的 months（月份）和 memberCount（会员数）渲染到 x 轴与数据系列。​
后端 ReportController 的 getMemberReport 方法，先计算过去 12 个月并格式化月份，调用 MemberService 的 findMemberCountByMonth 方法；服务层将月份补全为 “yyyy.MM.31” 格式，调用 Dao 层 findMemberCountBeforeDate 查询每月底前总会员数；Dao 层通过 SQL 统计 regTime≤指定日期的会员数，最终返回符合前端需求的数据集，实现会员增长趋势可视化。