echarts 日历热度图设置 calendar

Calendar Option

            option:  {
                color: this.$CHART_OPTION.COLOR,
                legend:{
                    top: 10,
                    left: 10
                },
                grid: {
                    top: 20,
                    bottom: 20,
                    left: 40,
                    right: 20,
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return `<div>${params.value[0]}</div>
                                <div>报警数量: ${params.value[1]}</div>`;
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                calendar: {
                    top: 70,
                    left: 'center',
                    orient: 'vertical',
                    cellSize: ['auto', 42], // 日历格子大小
                    dayLabel: {
                        color: 'white',
                        margin: 10, // 距日历本体的距离，向上
                        firstDay: 1,
                        nameMap: ['日', '一', '二', '三', '四', '五', '六'],
                    },
                    yearLabel: {
                        margin: 40, // 距日历本体的距离，向上
                        position: 'top',
                        show: true
                    },
                    monthLabel: {
                        position: 'top',
                        show: true
                    },
                    itemStyle: {
                        opacity: 0.2,
                        borderWidth: 0.5
                    },
                    range: '2022-01'
                },
/*                visualMap: {  // 样例
                    type: 'piecewise',
                    textStyle: {
                        color: 'white'
                    },
                    splitNumber: 99, // 拆分数量
                    min: 1, // 最小值
                    max: 100, // 最大值
                    orient: 'horizontal',
                    left: 'center', // 横向居中
                    bottom: 0
                },*/
                visualMap: { // 滑块形式的图例
                    min: 0,
                    max: 50,
                    textStyle: {
                        color: 'white'
                    },
                    calculable: true,
                    seriesIndex: [0],
                    orient: 'horizontal',
                    left: 'center',
                    bottom: 0,
                    inRange: {
                        color: [
                            'rgba(0,116,201,0.49)',
                            // this.$CHART_OPTION.COLOR.purple,
                            this.$CHART_OPTION.COLOR.main,
                            this.$CHART_OPTION.COLOR.yellow,
                            this.$CHART_OPTION.COLOR.orange,
                            this.$CHART_OPTION.COLOR.red,
                        ]
                    },
                },

                series: [
                    {
                        label: {
                            show: true,
                            formatter: function (params) {
                                return ( `${params.dataIndex + 1}日\n\n${params.value[1] || ''}`);
                            },
                        },
                        type: 'heatmap',
                        coordinateSystem: 'calendar',
                        data: []
                    }
                ]
            }