echarts纯option制作自定义日历

  1. type='custom' 

{
    "tooltip": {
        "position": "top",
        "formatter": function (p) { var format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]); return format + ': ' + p.data[1]; }
    },
    "calendar": [
        {
            "orient": "vertical",
            "dayLabel": {
                "firstDay": 1,
                "nameMap": []
            },
            "monthLabel": {
                "show": false
            },
            "yearLabel": {
                "show": false
            },
            "itemStyle": {
                "borderWidth": 15,
                "borderColor": "rgba(0,0,0,1)",
                "color": "#4D96E3"
            },
            "splitLine": {
                "show": false
            },
            "cellSize": [
                "50",
                "50"
            ],
            "range": "2021-11"
        }
    ],
    "series": [
        {
            "type": "custom",
            "coordinateSystem": "calendar",
            "renderItem": function (params, api) { const cellPoint = api.coord(api.value(0)); const cellWidth = params.coordSys.cellWidth; const cellHeight = params.coordSys.cellHeight; const value = api.value(1); if (isNaN(cellPoint[0]) || isNaN(cellPoint[1])) { return; } const group = { type: 'group', children: [ { type: 'text', style: { x: cellPoint[0], y: cellPoint[1] - cellHeight / 2 + 25, text: echarts.format.formatTime('dd', api.value(0)), fill: '#fff', width: '35', height: '35', textAlign: 'center', verticalAlign: 'center', textFont: api.font({ fontSize: 16 }), backgroundColor: api.value(2) ? '#41ABEB' : '#125791' } }, { type: 'text', style: { x: cellPoint[0] + 20, y: cellPoint[1] - cellHeight / 2 + 10, text: value, fill: '#fff', backgroundColor: !value ? '' : 'orange', width: '20', height: '20', fontSize: '14', textAlign: 'center', verticalAlign: 'center', borderWidth: '1' } } ] }; return group; },
            "dimensions": [
                null,
                {
                    "type": "ordinal"
                }
            ],
            "data": [
                [
                    "2021-11-01",
                    "3",
                    1
                ],
                [
                    "2021-11-02",
                    "3",
                    1
                ],
                [
                    "2021-11-03",
                    "3",
                    1
                ],
                [
                    "2021-11-04",
                    "3",
                    1
                ],
                [
                    "2021-11-05",
                    "",
                    1
                ],
                [
                    "2021-11-06",
                    "",
                    0
                ],
                [
                    "2021-11-07",
                    "",
                    1
                ],
                [
                    "2021-11-08",
                    "",
                    1
                ],
                [
                    "2021-11-09",
                    "",
                    1
                ],
                [
                    "2021-11-10",
                    "3",
                    0
                ],
                [
                    "2021-11-11",
                    "",
                    1
                ],
                [
                    "2021-11-12",
                    "",
                    1
                ],
                [
                    "2021-11-13",
                    "",
                    0
                ],
                [
                    "2021-11-14",
                    "",
                    1
                ],
                [
                    "2021-11-15",
                    "",
                    1
                ],
                [
                    "2021-11-16",
                    "",
                    1
                ],
                [
                    "2021-11-17",
                    "",
                    1
                ],
                [
                    "2021-11-18",
                    "",
                    0
                ],
                [
                    "2021-11-19",
                    "",
                    1
                ],
                [
                    "2021-11-20",
                    "",
                    1
                ],
                [
                    "2021-11-21",
                    "",
                    1
                ],
                [
                    "2021-11-22",
                    "",
                    0
                ],
                [
                    "2021-11-23",
                    "6",
                    1
                ],
                [
                    "2021-11-24",
                    "",
                    1
                ],
                [
                    "2021-11-25",
                    "",
                    1
                ],
                [
                    "2021-11-26",
                    "",
                    1
                ],
                [
                    "2021-11-27",
                    "",
                    0
                ],
                [
                    "2021-11-28",
                    "",
                    0
                ],
                [
                    "2021-11-29
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值