百度echarts 日历插件，点击变色，默认选中当前日期

本文原创，转载注明出处

思路：每个日历单元格都可以指定数据标记图形，默认圆形，这边设置成方形，即代码示例中的“symbol:'rect',”

然后，指定的日期需要高亮，那么将这个填充图形的宽度和高度设置成和日历单元格大小一样，即代码示例中 symbolSize

点击具体单元格的时候，设置指定的日期，然后重启加载日历插件，即代码示例中的 calander.on('click', function (params)

准备工作

1.到百度官网下载最新echarts.min.js，地址 http://echarts.baidu.com/dist/echarts-gl.min.js

代码示例：

/**
     * dateList 一个月的所有天数，示例[["2018-02-01", "十六"],["2018-02-02", "十七"],,["2018-02-02", "十八", "查看"], ... ,["2018-02-28", "十三"]]
     * currentMonth 日历要显示的月份，日历自动展示这个月份 示例：2018-02
     * currentDay 当前服务器时间，日历将会自动选中这一列 示例：2018-02-27
     */

function initcalander(dateList, currentMonth, currentDay) {

    var calander = echarts.init(document.getElementById("calander"));
   
        var heatmapData = [];
        var lunarData = [];
        for (var i = 0; i < dateList.length; i++) {
            heatmapData.push([
                dateList[i][0],
                Math.random() * 300
            ]);
            lunarData.push({
                value:[
                    dateList[i][0],
                    1,
                    dateList[i][1],
                    dateList[i][2]
                ],
                symbol:'rect', // 核心1，这边长方形来填充
                itemStyle:{
                    color : '#81D0F1'  // 填充色颜色
                }
            });
        }
        var option = {
            visualMap: {
                show: false,
                min: 0,
                max: 300,
                calculable: true,
                seriesIndex: [2],
                orient: 'horizontal',
                left: 'center',
                bottom: 0,
                inRange: {
                    color: ['#fff', '#fff']
                }
            },
            calendar: [{
                left: 'center',
                top: 'middle',
                cellSize: ['80', '70'], // 设置日历格的大小，可支持设置不同高宽
                yearLabel: {show: false}, // 显示年度
                orient: 'vertical', // 
                dayLabel: {
                    firstDay: 1, // 从1号开始
                    margin: 0, // 星期标签与轴线之间的距离
                    padding: [15,22,15,22],
                    backgroundColor: '#FAFAFA', // 可以是直接的颜色值，例如：'#123234', 'red', rgba(0,23,11,0.3)'
                    color : '#85807C',
                    nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] // cn或者en，也可以是数组
                },
                monthLabel: {
                    show: false,  // 显示月度
                    margin: 100 // 月份和y轴的间距
                },
                range: currentMonth, // 当前日历显示的月份
                itemStyle: {
                    borderColor:'#F0F0F0'
                },
                splitLine : {
                    show:false
                }
            }],


            series: [{
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: function(param, e,m){ // 核心2，把需要高亮的日期，宽度高度设置成和单元格宽度高度一样
                    if (e.value[0] == currentDay) {
                        return [80, 70]
                    } else {
                        return 1
                    }
                },
                label: {
                    normal: {
                        show: true,
                        formatter: function (params) {
                            var d = echarts.number.parseDate(params.value[0]);
                            return d.getDate() + '\n\n' + params.value[2] + '\n\n';
                        },
                        textStyle: {
                            color: '#000'
                        }
                    }
                },
                data: lunarData
            }, {
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: 1,
                label: {
                    normal: {
                        show: true,
                        formatter: function (params) {
                            return '\n\n\n' + (params.value[3] || '');
                        },
                        textStyle: {
                            fontSize: 14,
                            fontWeight: 600,
                            color: '#a00'
                        }
                    }
                },
                data: lunarData
            }, {
                type: 'heatmap',
                coordinateSystem: 'calendar',
                data: heatmapData
            }]
        };
        
        calander.on('click', function (params) {
        currentDay = params.value[0];
    calander.setOption(option);
   
        // 这边写自己的业务逻辑，例如当天日期的日程安排
       
        });
        calander.setOption(option);
        

    }

效果：

数据：

dateList ：

 [
["2018-02-01", "十六"],
 ["2018-02-02", "十七"],
 ["2018-02-03", "十八", "查看"],
 ["2018-02-04", "十九"],
 ["2018-02-05", "廿十"],
 ["2018-02-06", "廿一", "查看"],
 ["2018-02-07", "廿二"],
 ["2018-02-08", "廿三"],
 ["2018-02-09", "廿四", "查看"],
 ["2018-02-10", "廿五"],
 ["2018-02-11", "廿六"],
 ["2018-02-12", "廿七", "查看"],
 ["2018-02-13", "廿八"],
 ["2018-02-14", "廿九"],
 ["2018-02-15", "卅十", "查看"],
 ["2018-02-16", "初一"],
 ["2018-02-17", "初二"],
 ["2018-02-18", "初三", "查看"],
 ["2018-02-19", "初四"],
 ["2018-02-20", "初五"],
 ["2018-02-21", "初六", "查看"],
 ["2018-02-22", "初七"],
 ["2018-02-23", "初八"],
 ["2018-02-24", "初九", "查看"],
 ["2018-02-25", "初十"],
 ["2018-02-26", "十一"],
 ["2018-02-27", "十二", "查看"],
 ["2018-02-28", "十三"]

]

currentMonth : '2018-02'

currentDay  : '2018-02-27'