学习calendar组件ECharts Gallery

20:11:45图表已生成
代码
var data = [
    ['2020-12-1', '十七', ''],
    ['2020-12-2', '十八', ''],
    ['2020-12-3', '十九', ''],
    ['2020-12-4', '二十', ''],
    ['2020-12-5', '廿一', ''],
    ['2020-12-6', '廿二', ''],
    ['2020-12-7', '廿三', '大雪'],
    ['2020-12-8', '廿四', ''],
    ['2020-12-9', '廿五', ''],
    ['2020-12-10', '廿六', ''],
    ['2020-12-11', '廿七', ''],
    ['2020-12-12', '廿八', ''],
    ['2020-12-13', '廿九', ''],
    ['2020-12-14', '三十', ''],
    ['2020-12-15', '冬月初一', ''],
    ['2020-12-16', '初二', ''],
    ['2020-12-17', '初三', ''],
    ['2020-12-18', '初四', ''],
    ['2020-12-19', '初五', ''],
    ['2020-12-20', '初六', ''],
    ['2020-12-21', '初七', '冬至'],
    ['2020-12-22', '初八', ''],
    ['2020-12-23', '初九', ''],
    ['2020-12-24', '初十', ''],
    ['2020-12-25', '十一', ''],
    ['2020-12-26', '十二', ''],
    ['2020-12-27', '十三', ''],
    ['2020-12-28', '十四', ''],
    ['2020-12-29', '十五', ''],
    ['2020-12-30', '十六', '二九'],
    ['2020-12-31', '十七', ''],
    ['2021-1-1', '十八', ''],
    ['2021-1-2', '十九', ''],
    ['2021-1-3', '二十', ''],
    ['2021-1-4', '廿一', ''],
    ['2021-1-5', '廿二', '小寒'],
    ['2021-1-6', '廿三', ''],
    ['2021-1-7', '廿四', ''],
    ['2021-1-8', '廿五', '三九'],
    ['2021-1-9', '廿六', ''],
    ['2021-1-10', '廿七', ''],
    ['2021-1-11', '廿八', ''],
    ['2021-1-12', '廿九', ''],
    ['2021-1-13', '腊月初一', ''],
    ['2021-1-14', '初二', ''],
    ['2021-1-15', '初三', ''],
    ['2021-1-16', '初四', ''],
    ['2021-1-17', '初五', '四九'],
    ['2021-1-18', '初六', ''],
    ['2021-1-19', '初七', ''],
    ['2021-1-20', '初八', '大寒'],
    ['2021-1-21', '初九', ''],
    ['2021-1-22', '初十', ''],
    ['2021-1-23', '十一', ''],
    ['2021-1-24', '十二', ''],
    ['2021-1-25', '十三', ''],
    ['2021-1-26', '十四', '五九'],
    ['2021-1-27', '十五', ''],
    ['2021-1-28', '十六', ''],
    ['2021-1-29', '十七', ''],
    ['2021-1-30', '十八', ''],
    ['2021-1-31', '十九', ''],
    ['2021-2-1', '二十', ''],
    ['2021-2-2', '廿一', ''],
    ['2021-2-3', '廿二', '立春'],
    ['2021-2-4', '廿三', '小年(六九)'],
    ['2021-2-5', '廿四', ''],
    ['2021-2-6', '廿五', ''],
    ['2021-2-7', '廿六', ''],
    ['2021-2-8', '廿七', ''],
    ['2021-2-9', '廿八', ''],
    ['2021-2-10', '廿九', ''],
    ['2021-2-11', '三十', '除夕'],
    ['2021-2-12', '正月初一', ''],
    ['2021-2-13', '初二', '七九'],
    ['2021-2-14', '初三', ''],
    ['2021-2-15', '初四', ''],
    ['2021-2-16', '初五', ''],
    ['2021-2-17', '初六', ''],
    ['2021-2-18', '初七', '雨水'],
    ['2021-2-19', '初八', ''],
    ['2021-2-20', '初九', ''],
    ['2021-2-21', '初十', ''],
    ['2021-2-22', '十一', '八九'],
    ['2021-2-23', '十二', ''],
    ['2021-2-24', '十三', ''],
    ['2021-2-25', '十四', ''],
    ['2021-2-26', '十五', ''],
    ['2021-2-27', '十六', ''],
    ['2021-2-28', '十七', ''],
    
    ['2021-3-1', '十八'],
    ['2021-3-2', '十九'],
    ['2021-3-3', '二十','九九'],
    ['2021-3-4', '二十一'],
    ['2021-3-5', '二十二','惊蛰'],
    ['2021-3-6', '二十三'],
    ['2021-3-7', '二十四'],
    ['2021-3-8', '二十五'],
    ['2021-3-9', '二十六'],
    ['2021-3-10', '二十七'],
    ['2021-3-11', '二十八'],
    ['2021-3-12', '二十九'],
    ['2021-3-13', '杏月初一'],
    ['2021-3-14', '初二'],
    ['2021-3-15', '初三'],
    ['2021-3-16', '初四'],
    ['2021-3-17', '初五'],
    ['2021-3-18', '初六'],
    ['2021-3-19', '初七'],
    ['2021-3-20', '初八','春分'],
    ['2021-3-21', '初九'],
    ['2021-3-22', '初十'],
    ['2021-3-23', '十一'],
    ['2021-3-24', '十二'],
    ['2021-3-25', '十三'],
    ['2021-3-26', '十四'],
    ['2021-3-27', '十五'],
    ['2021-3-28', '十六'],
    ['2021-3-29', '十七'],
    ['2021-3-30', '十八'],
    ['2021-3-31', '十九']
];
var myDate = new Date();
var day = myDate.getDate();
var month = myDate.getMonth();

var data1 = [];
var data2 = [];
var data3 = [];
var heatmapData = [];
var cdata = [];
for (var i = 0; i < data.length; i++) {
    heatmapData.push([
        data[i][0],
        200
    ]);
    data1.push([data[i][0], 0, 300]);
    cdata.push([data[i][0], 1, data[i][1], data[i][2]]);
}
data2=data2.concat(data1.slice(31, 34),data1.slice(72, 79));
// data3=data3.concat(data1.slice(28, 29),data1.slice(63, 65))

if (month == 11) {
    data1 = data1.slice(day - 1, day);
}
if (month == 0) {
    data1 = data1.slice(31 + day - 1, 31 + day);
}

if (month == 1) {
    data1 = data1.slice(62 + day - 1, 62 + day);
}

option = {
/*
    visualMap: {
        show: false,
        min: 0,
        max: 300,
        calculable: true,
        orient: 'vertical',
        left: '10%',
        bottom: 20,
        inRange: {
            color: ['#ffffff', '#deab8a'],
            opacity: 0.2
        },
        controller: {
            inRange: {
                opacity: 0.5
            }
        }
    },
*/
title:{
    text:'数九',
    subtext:'从冬天的冬至逢壬日算起（冬至后逢第一个壬日开始叫“交九”，\n意思是寒冷的开始），每九天为一"九"，第一个九天叫做"一九"，\n第二个九天叫"二九"，依此类推，数到"九九"八十一天，"九尽桃\n花开"，天气就暖和了。一般“三九”时最冷，是一年中最冷的一\n段时间；到了“九九”时，便寒气尽消，春深日暖了。\n\n数九歌谣：一九二九不出手，三九四九冰上走，五九六九沿河看柳，\n七九河开，八九燕来，九九加一九，耕牛遍地走。',
    subtextStyle:{
        color:'#708090',
        
    },
    top:'10%',
    left:'56%',
},

    calendar: {
        top: '10%',
        left: '10%',
        orient: 'vertical',
        cellSize: [60, 35],
        yearLabel: {
            margin: 40,
            textStyle: {
                fontSize: 20
            }
        },
        dayLabel: {
            firstDay: 1,
            nameMap: 'cn'
        },
        monthLabel: {
            nameMap: 'cn',
            margin: 10,
            textStyle: {
                fontSize: 20,
                color: '#999'
            }
        },
        range: ['2020-12', '2021-03-31']
    },
    series: [{
            name: '公历',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
                normal: {
                    show: true,
                    formatter: function(params) {
                        var d = echarts.number.parseDate(params.value[0]);
                        return d.getDate() + '\n\n';
                    },
                    textStyle: {
                        fontSize: 10,
                        fontWeight: 700,
                        color: '#000'
                    }
                }
            },
            data: cdata
        }, {
            name: '农历',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
                normal: {
                    show: true,
                    formatter: function(params) {
                        return '\n' + params.value[2] + '\n';
                    },
                    textStyle: {
                        fontSize: 10,
                        fontWeight: 500,
                        color: '#00a'
                    }
                }
            },
            data: cdata
        }, {
            name: '节气',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
                normal: {
                    show: true,
                    formatter: function(params) {
                        return '\n\n' + (params.value[3] || '');
                    },
                    textStyle: {
                        fontSize: 10,
                        fontWeight: 500,
                        color: '#a00'
                    }
                }
            },
            data: cdata
        }, {
            name: '当天',
            type: 'effectScatter',
            zlevel: 2,
            coordinateSystem: 'calendar',
            symbolSize: 1,
            //symbol:'diamond',
            showEffectOn: 'render',
            rippleEffect: {
                period: 6,
                scale: 56.8,
                brushType: 'stroke'
            },
            itemStyle: {
                normal: {
                    color: '#e151d1',//e151d1
                    opacity: 0.5
                }
            },
            data: data1
        }, {
            name: '长假',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            symbol: 'rect',

            label: {
                normal: {
                    show: true,
                    formatter: '{a|休}',
                    rich: {
                        a: {
                            align: 'left',
                            verticalAlign: 'top',
                            lineHeight: 66,
                            width: 50,
                            height: 40,
                            fontSize: 10,
                            fontWeight: 800,
                            color: '#e00',
                            textBorderColor: '#eee'
                        }
                    }
                }
            },
            data: data2
        },
         {
            name: '周末上班',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            symbol: 'rect',

            label: {
                normal: {
                    show: true,
                    formatter: '{a|班}',
                    rich: {
                        a: {
                            align: 'left',
                            verticalAlign: 'top',
                            lineHeight: 66,
                            width: 50,
                            height: 40,
                            fontSize: 10,
                            fontWeight: 800,
                            color: '#11264f',
                            textBorderColor: '#eee'
                        }
                    }
                }
            },
            data: data3
        },
/*
        {
            name:'背景色',
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: heatmapData
        }
*/
    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
