Echarts 日历热力图

最新推荐文章于 2025-10-16 15:37:58 发布

原创

最新推荐文章于 2025-10-16 15:37:58 发布 · 3.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #Vue #Java

本文介绍如何使用Echarts实现统计笔记操作（新建/修改）的日历热力图，包括前后端开发步骤与代码示例。

利用 Echarts 实现统计笔记操作（新建/修改）的日历热力图，类似于 git 的 contributions 表。

文章目录

- 数据库
- 后台
- - mapper
  - pojo
  - service
  - controller
- 前端

数据库

mark

后台

mapper

<!-- 天/笔记数 日历热力图 -->
<resultMap type="Calendar" id="calendarMap">
    <result property="date" column="date"/>
    <result property="count" column="count"/>
</resultMap>

<!-- 查询 热力图数据 -->
<select id="calendar" resultMap="calendarMap">
    SELECT DATE_FORMAT(gmt_create,'%Y-%m-%d') as date,count(*) as count from note
    WHERE gmt_create >= #{start} and gmt_create &lt; #{end} GROUP BY date;
</select>

pojo

public class Calendar {
   
   
    private String date;
    private String count;
}

service

/**
 * 天/笔记数 - 日历热力图
 * @return
 */
public List<Calendar> calendar() {
   
   
    String start = DateUtil.getDateLastYear(); // 2018-07-12
    String end = DateUtil.getDateNow(); // 2019-07-12
    return chartDao.calendar(start,end);
}

controller

@GetMapping("/calendar")
public List<Calendar> calendar(){
   
   
    List<Calendar> data = chartService.calendar();
    return data;
}

// 2018-07-12+2019-07-12
@GetMapping