Echarts 日历热力图

最新推荐文章于 2024-02-01 15:06:12 发布

TravelerTD

最新推荐文章于 2024-02-01 15:06:12 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： Echarts Vue Java

本文链接：https://blog.csdn.net/SGamble/article/details/96376745

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

文章目录

数据库

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("/calendarYear")
public String calendarYear(){
    return DateUtil.getDateLastYear() + "+" + DateUtil.getDateNow();
}

前端

<html>
<head>
    <meta charset="utf-8">
    <title>calendar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="img/ico/qr_blue.ico" type="image/x-icon">
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/vue/2.5.16/vue.min.js"></script>
    <script src="js/axios/0.17.1/axios.min.js"></script>
    <!-- echarts -->
    <link rel="stylesheet" href="js/echarts/reset.css">
    <script src="js/echarts/esl.js"></script>
    <script src="js/echarts/config.js"></script>
</head>
<body>
<style>
    html, body, #main {
        width: 100%;
        height: 100%;
    }
</style>
<div id="main"></div>
<script>
    $(function () {
        var data4Vue = {
            uri2calendar: 'calendar',
            uri2calendarYear: 'calendarYear',
        };
        var vue = new Vue({
            el: '#layout',
            data: data4Vue,
            created: function () {
                this.calendar();
            },
            methods: {
                // 日历热力图
                calendar: function () {
                    var startDate;
                    var endDate;
                    var uri2Year = this.uri2calendarYear;
                    var uri2calendar = this.uri2calendar;
                    // 日期区间
                    axios.get(uri2Year).then(function (response) {
                        var data = response.data.split("+"); // 2018-07-12+2019-07-12
                        startDate = data[0];
                        endDate = data[1];
                    });
                    axios.get(uri2calendar).then(function (response) {
                        var dateLst=[];
                        var datas=[];
                        vue.data2chart = response.data;
                        dateLst = response.data;
                        var getData =  function() {
                            var data;
                            for (var i=0;i<dateLst.length;i++){
                                data = dateLst[i];
                                datas.push([data["date"],data["count"]]);
                            }
                            return datas;
                        };
                        require([
                            'daily/dist/echarts'
                        ], function (echarts) {
                            var chart = echarts.init(document.getElementById('main'));
                            chart.setOption({
                                title: {
                                    top: 30,
                                    left: 'center',
                                    text: startDate + " ~ " + endDate + ' 笔记记录',
                                    subtext: '十年饮水，难凉热血'
                                },
                                tooltip : {},
                                visualMap: {
                                    type: 'piecewise',
                                    // 数据段分区及样式
                                    pieces: [
                                        {min: 0, max: 1, label: '1', color: '#C6E48B'},
                                        {min: 1, max: 2, label: '2', color: '#91e47f'},
                                        {min: 2, max: 5, label: '3-5', color: '#a0d7ff'},
                                        {min: 5, max: 10, label: '6-10', color: '#ffa26b'},
                                        {min: 10, label: '10-max', color: '#ff1826'}
                                    ],
                                    orient: 'horizontal',
                                    left: 'center',
                                    top: 330,
                                    textStyle: {
                                        color: '#000'
                                    }
                                },
                                calendar: {
                                    top: 100,
                                    left: 'center',
                                    cellSize: [30],
                                    range: [startDate,endDate],
                                    monthLabel:{
                                        nameMap: 'cn'
                                    },
                                    dayLabel:{
                                        nameMap: ['7', '1', '2', '3', '4', '5', '6'],
                                        firstDay: 1
                                    }
                                },
                                series: {
                                    type: 'heatmap',
                                    coordinateSystem: 'calendar',
                                    data: getData()
                                }
                            });
                            $(window).resize(function() {
                                chart.resize();
                            });
                        });
                    });
                }
            }
        });
    });

</script>
</body>
</html>

TravelerTD

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
Echarts 日历热力图

利用 Echarts 实现统计笔记操作（新建/修改）的日历热力图，类似于 git 的 contributions 表。文章目录数据库后台mapperpojoservicecontroller前端数据库后台mapper<resultMap type="Calendar" id="calendarMap"> &...
复制链接

扫一扫