通過生日查詢各年齡段數量通過餅狀圖顯示

數據庫表t_member中 birthday 字段為date類型

 

需求:根據年齡段（可以指定幾個年齡段，例如0-18、18-30、30-45、45以上）展示各個年齡段的占比，通過餅形圖來展示(Echarts)

 

實現:最重要的就是sql語句:

<select id="findMemberAgeCount" resultType="map">
    SELECT (CASE
    WHEN a.age IS NULL THEN 'unknown'
    WHEN a.age &lt; 18 THEN '0-18歲'  #then后面的為前端顯示數據,也就是Echarts顯示數據
    WHEN a.age BETWEEN 18 AND 30 THEN '18-30歲'
    WHEN a.age BETWEEN 31 AND 45 THEN '30-45歲'
    WHEN a.age > 45 THEN '45歲以上'
    END) as name,
    COUNT(*) 'value'  #name和value需要這樣寫,和Controller層數據對應
    FROM (SELECT NOW() AS "時間",birthday,TIMESTAMPDIFF(YEAR, birthday, CURDATE()) AS age FROM t_member  )a
    GROUP BY name
</select>

---

Controller層,service,dao以及dao.xml中的方法都是:findMemberAgeCount  

Controller層如下()其它層非常簡單,省略)

@RequestMapping("/getMemberAgeReport")
public Result getMemberAgeReport(){
    try {
        List<Map<String,Object>> list = memberService.findMemberAgeCount();
        Map<String,Object> map = new HashMap<>();
        map.put("ageCount",list);

        List<String> memberAge = new ArrayList<>();

        for (Map<String, Object> maplist : list) {
            String name = (String) maplist.get("name");
            memberAge.add(name);

        }

        map.put("memberAge",memberAge);
        return new Result(true,MessageConstant.GET_MEMBERAGE_COUNT_REPORT_SUCCESS,map);
    }catch (Exception e){
        e.printStackTrace();
        return new Result(false,MessageConstant.GET_MEMBERAGE_COUNT_REPORT_FAIL);
    }
}

---

注意細節:前端使用vue:
　　ajax請求:  axios.get("/report/getMemberAgeReport.do")
　　
　　封裝是數據:通過分析得出需要封裝成 List<Map<String,Object>>

legend: {
    orient: 'vertical',
    left: 'left',
    data: res.data.data.memberAge
},
series : [
    {
        name: '會員年齡占比',
        type: 'pie',
        radius : '55%',
        center: ['50%', '60%'],
        data:res.data.data.ageCount,
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }

---