echarts日历自定义月份

最新推荐文章于 2023-11-04 00:04:26 发布

原创最新推荐文章于 2023-11-04 00:04:26 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

echarts 专栏收录该内容

4 篇文章

订阅专栏

该博客介绍了如何使用`calendar.monthLabel.formatter`接口来自定义日历组件中月份的显示格式，支持字符串模板和回调函数。示例展示了如何根据月份结合业务数据展示额外信息，如订单数量，以增强日历的可视化效果。

接口：

calendar.monthLabel.formatter | string, Function

[ default: null ]

用来格式化月份文本，支持字符串模板和回调函数两种形式。

示例：

/ 使用字符串模板，例如：2017-02
/*
    模板变量{nameMap} 月份原本名称 eg：'Feb'
    模板变量{yyyy}   四位数年份 eg: 2017
    模板变量{yy}   后两位数年份 eg: 17
    模板变量{MM}   两位数月份 eg: 02
    模板变量{M}   一位数月份 eg: 2
*/
formatter: '{yyyy}-{MM}'
// 使用回调函数
/*
    param.nameMap 月份原本名称 eg：'Feb'
    param.yyyy   四位数年份 eg: 2017
    param.yy   后两位数年份 eg: 17
    param.MM   两位数月份 eg: 02
    param.M   一位数月份 eg: 2
*/
formatter: function (param) {
    // ...
    return param.MM;
}

/*
 param.nameMap 月份原本名称 en：'Feb',cn :'二月'
param.yyyy   四位数年份 eg: 2017
param.yy   后两位数年份 eg: 17
param.MM   两位数月份 eg: 02
param.M   一位数月份 eg: 2
*/
option.calendar[0].monthLabel.formatter =  function (param) {
    var orderNums = _this.quantityByMonth.get(param.MM+'月') == 
                    undefined ? '0' : _this.quantityByMonth.get(param.MM+'月')
     return param.nameMap  + '  ' + orderNums +'万单';
}