echarts 日历图calender

最新推荐文章于 2024-06-22 17:46:34 发布
最新推荐文章于 2024-06-22 17:46:34 发布
阅读量5k 收藏 23
点赞数 4
分类专栏： ECharts 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/119356185
版权 
1.主要配置
	 var option = {
        visualMap: {	方便控制日历图每个单元的显示样式
        	...
        },
        calendar: {
        	id:'',
			range: '2017'	某一年				
				'2017-02'	某个月
				['2017-01-02', '2017-02-23']	某个区间
				['2017-01', '2017-02']
			cellSize,	单元格宽高
			dayLabel:{	日期相关
				firstDay:0,	从周日开始,1从周一开始
				position:'start'|'end'	星期的位置,在星期轴的开头还是结尾。
				nameMap 	星期显示的效果
					'en'	等同于['S', 'M', 'T', 'W', 'T', 'F', 'S']
					'cn'	等同于['日', '一', '二', '三', '四', '五', '六']
					['S', '一', 'T', '三', '', '五', 'S']	自定义
			},
			monthLabel:{
				nameMap
					'en'	等同于['Jan', 'Feb', 'Mar',...]
					'cn'	等同于['一月', '二月', '三月',...]
					['自定义',...]
			},
			yearLabel:{
				...
			}
        }
    };
	
	多个日历图
		calendar:[{
			top:n,
			...
		},{
			top:m,
			...
		}],
		series: [{
			coordinateSystem: 'calendar',
        	...
		},{
			coordinateSystem: 'calendar',
        	calendarIndex: 1,
        	...
		}]
		
2、日期转换函数
	import * as echarts from 'echarts';
	
	function getVirtulData(year) {
	    year = year || '2017';
	    var date = +echarts.number.parseDate(year + '-01-01');
	    var end = +echarts.number.parseDate(year + '-12-31');
	    var dayTime = 3600 * 24 * 1000;
	    var data = [];
	    for (var time = date; time <= end; time += dayTime) {
	        data.push([
	            echarts.format.formatTime('yyyy-MM-dd', time),
	            Math.floor(Math.random() * 10000)	 每个日期对应的数据value
	        ]);
	    }
	    
	    return data;
	}
	输入年份会返回[["2017-01-01", 8539],["2017-01-02", 3610],...]

3、和热力图结合
		visualMap: {
	        min: 0,
	        max: 10000,
	        type: 'piecewise',
			...
	    },
	    calendar: {
	        range: '2016',
			...
	    },
	    series: {
	        type: 'heatmap',
	        coordinateSystem: 'calendar',
	        data: getVirtulData(2016)
	    }
	    
4、和散点图结合
	 calendar: {
        range: ['2016-01-01', '2016-06-30'],
     },
     series:[{
        type: 'scatter',
        coordinateSystem: 'calendar',
        data: getVirtulData(2016)
     }]
 
 5、和关系图graph结合
 	var graphData = [
	    [
	       '2017-02-01',
	        260
	    ],
	    [
	        '2017-02-04',
	        200
	    ],...
	];
	
	var links = graphData.map(function (item, idx) {
	    return {
	        source: idx,
	        target: idx + 1
	    };
	});
	links.pop();
	
    calendar: {
        range: ['2017-02', '2017-03-31']
    },
    series: [{
    	type: 'graph',
        edgeSymbol: ['none', 'arrow'],
        coordinateSystem: 'calendar',
        links: links,
        data: graphData,
    }]
    
6、日历图中设置自定义内容如(文字)等
	基本思路是通过散点等有坐标系能够直接关联上calendar坐标系的,然后将圆图表样式隐藏,设置自定义样式
	var dateList = [
	    ['2017-1-1', '初四'],
	    ['2017-1-2', '初五'],
	    ...]
	    
	  calendar: [{
        range: '2017-03'
      },
      series:[{
      	type: 'scatter',
        coordinateSystem: 'calendar',
        symbolSize: 1,
        label:{
        	formatter: function (params) {
        		return ...
        	}
        },
        data:dateList
      }]
      
7、和饼图结合
	因为饼图没有坐标系,所以无法直接定位,先通过散点等等有坐标系能够直接关联上calendar坐标系的,然后隐藏样式
	然后遍历散点的数据,通过convertToPixel变成像素坐标后,再往series里添加饼图,通过center来定位饼图到每个格子里
		function getPieSeries(scatterData, chart) {
		    return scatterData.map(function (item, index) {
		        var center = chart.convertToPixel('calendar', item);
		        return {
		            id: index + 'pie',
		            type: 'pie',
		            center: center,
		            data: [...]
		        };
		    });
		}
		
		myChart.setOption({
	        series: getPieSeries(scatterData, myChart)
	    });
		
	    calendar: {
	        range: ['2017-02']
	    },
	    series: [{
	        id: 'label',
	        type: 'scatter',
	        coordinateSystem: 'calendar',
	        symbolSize: 1,
	        data: scatterData
	    }]

效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

代码示例:
和热力图结合:

function getVirtulData(year) {
    year = year || '2017';
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate((+year + 1) + '-01-01');
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time < end; time += dayTime) {
        data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 10000)
        ]);
    }
    return data;
}

option = {
    title: {
        top: 30,
        left: 'center',
        text: '2016年某人每天的步数'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 10000,
        type: 'piecewise',
        orient: 'horizontal',
        left: 'center',
        top: 65
    },
    calendar: {
        top: 120,
        left: 30,
        right: 30,
        cellSize: ['auto', 13],
        range: '2016',
        itemStyle: {
            borderWidth: 0.5
        },
        yearLabel: {show: false}
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: getVirtulData(2016)
    }
};

和散点图结合:

function getVirtulData(year) {
    year = year || '2017';
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate((+year + 1) + '-01-01');
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time < end; time += dayTime) {
        data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 10000)
        ]);
    }
    return data;
}

var data = getVirtulData(2016);

option = {
    backgroundColor: '#404a59',

    title: {
        top: 30,
        text: '2016年某人每天的步数',
        subtext: '数据纯属虚构',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '30',
        left: '100',
        data: ['步数', 'Top 12'],
        textStyle: {
            color: '#fff'
        }
    },
    calendar: [{
        top: 100,
        left: 'center',
        range: ['2016-01-01', '2016-06-30'],
        splitLine: {
            show: true,
            lineStyle: {
                color: '#000',
                width: 4,
                type: 'solid'
            }
        },
        yearLabel: {
            formatter: '{start}  1st',
            textStyle: {
                color: '#fff'
            }
        },
        itemStyle: {
            color: '#323c48',
            borderWidth: 1,
            borderColor: '#111'
        }
    }, {
        top: 340,
        left: 'center',
        range: ['2016-07-01', '2016-12-31'],
        splitLine: {
            show: true,
            lineStyle: {
                color: '#000',
                width: 4,
                type: 'solid'
            }
        },
        yearLabel: {
            formatter: '{start}  2nd',
            textStyle: {
                color: '#fff'
            }
        },
        itemStyle: {
            color: '#323c48',
            borderWidth: 1,
            borderColor: '#111'
        }
    }],
    series: [
        {
            name: '步数',
            type: 'scatter',
            coordinateSystem: 'calendar',
            data: data,
            symbolSize: function (val) {
                return val[1] / 500;
            },
            itemStyle: {
                color: '#ddb926'
            }
        },
        {
            name: '步数',
            type: 'scatter',
            coordinateSystem: 'calendar',
            calendarIndex: 1,
            data: data,
            symbolSize: function (val) {
                return val[1] / 500;
            },
            itemStyle: {
                color: '#ddb926'
            }
        },
        {
            name: 'Top 12',
            type: 'effectScatter',
            coordinateSystem: 'calendar',
            calendarIndex: 1,
            data: data.sort(function (a, b) {
                return b[1] - a[1];
            }).slice(0, 12),
            symbolSize: function (val) {
                return val[1] / 500;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            itemStyle: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
            },
            zlevel: 1
        },
        {
            name: 'Top 12',
            type: 'effectScatter',
            coordinateSystem: 'calendar',
            data: data.sort(function (a, b) {
                return b[1] - a[1];
            }).slice(0, 12),
            symbolSize: function (val) {
                return val[1] / 500;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            itemStyle: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
            },
            zlevel: 1
        }
    ]
};

和关系图graph结合:

var graphData = [
    [
       '2017-02-01',
        260
    ],
    [
        '2017-02-04',
        200
    ],
    [
        '2017-02-09',
        279
    ],
    [
        '2017-02-13',
        847
    ],
    [
        '2017-02-18',
        241
    ],
    [
        '2017-02-23',
        411
    ],
    [
        '2017-03-14',
        985
    ]
];

var links = graphData.map(function (item, idx) {
    return {
        source: idx,
        target: idx + 1
    };
});
links.pop();

function getVirtulData(year) {
    year = year || '2017';
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate((+year + 1) + '-01-01');
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time < end; time += dayTime) {
        data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 1000)
        ]);
    }
    return data;
}


option = {
    tooltip: {},
    calendar: {
        top: 'middle',
        left: 'center',
        orient: 'vertical',
        cellSize: 40,
        yearLabel: {
            margin: 50,
            textStyle: {
                fontSize: 30
            }
        },
        dayLabel: {
            firstDay: 1,
            nameMap: 'cn'
        },
        monthLabel: {
            nameMap: 'cn',
            margin: 15,
            fontSize: 20,
            color: '#999'
        },
        range: ['2017-02', '2017-03-31']
    },
    visualMap: {
        min: 0,
        max: 1000,
        type: 'piecewise',
        left: 'center',
        bottom: 20,
        inRange: {
            color: ['#5291FF', '#C7DBFF']
        },
        seriesIndex: [1],
        orient: 'horizontal'
    },
    series: [{
        type: 'graph',
        edgeSymbol: ['none', 'arrow'],
        coordinateSystem: 'calendar',
        links: links,
        symbolSize: 15,
        calendarIndex: 0,
        itemStyle: {
            color: 'yellow',
            shadowBlur: 9,
            shadowOffsetX: 1.5,
            shadowOffsetY: 3,
            shadowColor: '#555'
        },
        lineStyle: {
            color: '#D10E00',
            width: 1,
            opacity: 1
        },
        data: graphData,
        z: 20
    }, {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: getVirtulData(2017)
    }]
};

日历图中设置自定义内容如(文字)等:

var dateList = [
    ['2017-1-1', '初四'],
    ['2017-1-2', '初五'],
    ['2017-1-3', '初六'],
    ['2017-1-4', '初七'],
    ['2017-1-5', '初八', '小寒'],
    ['2017-1-6', '初九'],
    ['2017-1-7', '初十'],
    ['2017-1-8', '十一'],
    ['2017-1-9', '十二'],
    ['2017-1-10', '十三'],
    ['2017-1-11', '十四'],
    ['2017-1-12', '十五'],
    ['2017-1-13', '十六'],
    ['2017-1-14', '十七'],
    ['2017-1-15', '十八'],
    ['2017-1-16', '十九'],
    ['2017-1-17', '二十'],
    ['2017-1-18', '廿一'],
    ['2017-1-19', '廿二'],
    ['2017-1-20', '廿三', '大寒'],
    ['2017-1-21', '廿四'],
    ['2017-1-22', '廿五'],
    ['2017-1-23', '廿六'],
    ['2017-1-24', '廿七'],
    ['2017-1-25', '廿八'],
    ['2017-1-26', '廿九'],
    ['2017-1-27', '三十'],
    ['2017-1-28', '正月'],
    ['2017-1-29', '初二'],
    ['2017-1-30', '初三'],
    ['2017-1-31', '初四'],
    ['2017-2-1', '初五'],
    ['2017-2-2', '初六'],
    ['2017-2-3', '初七', '立春'],
    ['2017-2-4', '初八'],
    ['2017-2-5', '初九'],
    ['2017-2-6', '初十'],
    ['2017-2-7', '十一'],
    ['2017-2-8', '十二'],
    ['2017-2-9', '十三'],
    ['2017-2-10', '十四'],
    ['2017-2-11', '十五'],
    ['2017-2-12', '十六'],
    ['2017-2-13', '十七'],
    ['2017-2-14', '十八'],
    ['2017-2-15', '十九'],
    ['2017-2-16', '二十'],
    ['2017-2-17', '廿一'],
    ['2017-2-18', '廿二', '雨水'],
    ['2017-2-19', '廿三'],
    ['2017-2-20', '廿四'],
    ['2017-2-21', '廿五'],
    ['2017-2-22', '廿六'],
    ['2017-2-23', '廿七'],
    ['2017-2-24', '廿八'],
    ['2017-2-25', '廿九'],
    ['2017-2-26', '二月'],
    ['2017-2-27', '初二'],
    ['2017-2-28', '初三'],
    ['2017-3-1', '初四'],
    ['2017-3-2', '初五'],
    ['2017-3-3', '初六'],
    ['2017-3-4', '初七'],
    ['2017-3-5', '初八', '驚蟄'],
    ['2017-3-6', '初九'],
    ['2017-3-7', '初十'],
    ['2017-3-8', '十一'],
    ['2017-3-9', '十二'],
    ['2017-3-10', '十三'],
    ['2017-3-11', '十四'],
    ['2017-3-12', '十五'],
    ['2017-3-13', '十六'],
    ['2017-3-14', '十七'],
    ['2017-3-15', '十八'],
    ['2017-3-16', '十九'],
    ['2017-3-17', '二十'],
    ['2017-3-18', '廿一'],
    ['2017-3-19', '廿二'],
    ['2017-3-20', '廿三', '春分'],
    ['2017-3-21', '廿四'],
    ['2017-3-22', '廿五'],
    ['2017-3-23', '廿六'],
    ['2017-3-24', '廿七'],
    ['2017-3-25', '廿八'],
    ['2017-3-26', '廿九'],
    ['2017-3-27', '三十'],
    ['2017-3-28', '三月'],
    ['2017-3-29', '初二'],
    ['2017-3-30', '初三'],
    ['2017-3-31', '初四'],
    ['2017-4-1', '初五'],
    ['2017-4-2', '初六'],
    ['2017-4-3', '初七'],
    ['2017-4-4', '初八', '清明'],
    ['2017-4-5', '初九'],
    ['2017-4-6', '初十'],
    ['2017-4-7', '十一'],
    ['2017-4-8', '十二'],
    ['2017-4-9', '十三'],
    ['2017-4-10', '十四'],
    ['2017-4-11', '十五'],
    ['2017-4-12', '十六'],
    ['2017-4-13', '十七'],
    ['2017-4-14', '十八'],
    ['2017-4-15', '十九'],
    ['2017-4-16', '二十'],
    ['2017-4-17', '廿一'],
    ['2017-4-18', '廿二'],
    ['2017-4-19', '廿三'],
    ['2017-4-20', '廿四', '穀雨'],
    ['2017-4-21', '廿五'],
    ['2017-4-22', '廿六'],
    ['2017-4-23', '廿七'],
    ['2017-4-24', '廿八'],
    ['2017-4-25', '廿九'],
    ['2017-4-26', '四月'],
    ['2017-4-27', '初二'],
    ['2017-4-28', '初三'],
    ['2017-4-29', '初四'],
    ['2017-4-30', '初五'],
    ['2017-5-1', '初六'],
    ['2017-5-2', '初七'],
    ['2017-5-3', '初八'],
    ['2017-5-4', '初九'],
    ['2017-5-5', '初十', '立夏'],
    ['2017-5-6', '十一'],
    ['2017-5-7', '十二'],
    ['2017-5-8', '十三'],
    ['2017-5-9', '十四'],
    ['2017-5-10', '十五'],
    ['2017-5-11', '十六'],
    ['2017-5-12', '十七'],
    ['2017-5-13', '十八'],
    ['2017-5-14', '十九'],
    ['2017-5-15', '二十'],
    ['2017-5-16', '廿一'],
    ['2017-5-17', '廿二'],
    ['2017-5-18', '廿三'],
    ['2017-5-19', '廿四'],
    ['2017-5-20', '廿五'],
    ['2017-5-21', '廿六', '小滿'],
    ['2017-5-22', '廿七'],
    ['2017-5-23', '廿八'],
    ['2017-5-24', '廿九'],
    ['2017-5-25', '三十'],
    ['2017-5-26', '五月'],
    ['2017-5-27', '初二'],
    ['2017-5-28', '初三'],
    ['2017-5-29', '初四'],
    ['2017-5-30', '初五'],
    ['2017-5-31', '初六'],
    ['2017-6-1', '初七'],
    ['2017-6-2', '初八'],
    ['2017-6-3', '初九'],
    ['2017-6-4', '初十'],
    ['2017-6-5', '十一', '芒種'],
    ['2017-6-6', '十二'],
    ['2017-6-7', '十三'],
    ['2017-6-8', '十四'],
    ['2017-6-9', '十五'],
    ['2017-6-10', '十六'],
    ['2017-6-11', '十七'],
    ['2017-6-12', '十八'],
    ['2017-6-13', '十九'],
    ['2017-6-14', '二十'],
    ['2017-6-15', '廿一'],
    ['2017-6-16', '廿二'],
    ['2017-6-17', '廿三'],
    ['2017-6-18', '廿四'],
    ['2017-6-19', '廿五'],
    ['2017-6-20', '廿六'],
    ['2017-6-21', '廿七', '夏至'],
    ['2017-6-22', '廿八'],
    ['2017-6-23', '廿九'],
    ['2017-6-24', '六月'],
    ['2017-6-25', '初二'],
    ['2017-6-26', '初三'],
    ['2017-6-27', '初四'],
    ['2017-6-28', '初五'],
    ['2017-6-29', '初六'],
    ['2017-6-30', '初七'],
    ['2017-7-1', '初八'],
    ['2017-7-2', '初九'],
    ['2017-7-3', '初十'],
    ['2017-7-4', '十一'],
    ['2017-7-5', '十二'],
    ['2017-7-6', '十三'],
    ['2017-7-7', '十四', '小暑'],
    ['2017-7-8', '十五'],
    ['2017-7-9', '十六'],
    ['2017-7-10', '十七'],
    ['2017-7-11', '十八'],
    ['2017-7-12', '十九'],
    ['2017-7-13', '二十'],
    ['2017-7-14', '廿一'],
    ['2017-7-15', '廿二'],
    ['2017-7-16', '廿三'],
    ['2017-7-17', '廿四'],
    ['2017-7-18', '廿五'],
    ['2017-7-19', '廿六'],
    ['2017-7-20', '廿七'],
    ['2017-7-21', '廿八'],
    ['2017-7-22', '廿九', '大暑'],
    ['2017-7-23', '閏六',],
    ['2017-7-24', '初二'],
    ['2017-7-25', '初三'],
    ['2017-7-26', '初四'],
    ['2017-7-27', '初五'],
    ['2017-7-28', '初六'],
    ['2017-7-29', '初七'],
    ['2017-7-30', '初八'],
    ['2017-7-31', '初九'],
    ['2017-8-1', '初十'],
    ['2017-8-2', '十一'],
    ['2017-8-3', '十二'],
    ['2017-8-4', '十三'],
    ['2017-8-5', '十四'],
    ['2017-8-6', '十五'],
    ['2017-8-7', '十六', '立秋'],
    ['2017-8-8', '十七'],
    ['2017-8-9', '十八'],
    ['2017-8-10', '十九'],
    ['2017-8-11', '二十'],
    ['2017-8-12', '廿一'],
    ['2017-8-13', '廿二'],
    ['2017-8-14', '廿三'],
    ['2017-8-15', '廿四'],
    ['2017-8-16', '廿五'],
    ['2017-8-17', '廿六'],
    ['2017-8-18', '廿七'],
    ['2017-8-19', '廿八'],
    ['2017-8-20', '廿九'],
    ['2017-8-21', '三十'],
    ['2017-8-22', '七月'],
    ['2017-8-23', '初二', '處暑'],
    ['2017-8-24', '初三'],
    ['2017-8-25', '初四'],
    ['2017-8-26', '初五'],
    ['2017-8-27', '初六'],
    ['2017-8-28', '初七'],
    ['2017-8-29', '初八'],
    ['2017-8-30', '初九'],
    ['2017-8-31', '初十'],
    ['2017-9-1', '十一'],
    ['2017-9-2', '十二'],
    ['2017-9-3', '十三'],
    ['2017-9-4', '十四'],
    ['2017-9-5', '十五'],
    ['2017-9-6', '十六'],
    ['2017-9-7', '十七', '白露'],
    ['2017-9-8', '十八'],
    ['2017-9-9', '十九'],
    ['2017-9-10', '二十'],
    ['2017-9-11', '廿一'],
    ['2017-9-12', '廿二'],
    ['2017-9-13', '廿三'],
    ['2017-9-14', '廿四'],
    ['2017-9-15', '廿五'],
    ['2017-9-16', '廿六'],
    ['2017-9-17', '廿七'],
    ['2017-9-18', '廿八'],
    ['2017-9-19', '廿九'],
    ['2017-9-20', '八月'],
    ['2017-9-21', '初二'],
    ['2017-9-22', '初三'],
    ['2017-9-23', '初四', '秋分'],
    ['2017-9-24', '初五'],
    ['2017-9-25', '初六'],
    ['2017-9-26', '初七'],
    ['2017-9-27', '初八'],
    ['2017-9-28', '初九'],
    ['2017-9-29', '初十'],
    ['2017-9-30', '十一'],
    ['2017-10-1', '十二'],
    ['2017-10-2', '十三'],
    ['2017-10-3', '十四'],
    ['2017-10-4', '十五'],
    ['2017-10-5', '十六'],
    ['2017-10-6', '十七'],
    ['2017-10-7', '十八'],
    ['2017-10-8', '十九', '寒露'],
    ['2017-10-9', '二十'],
    ['2017-10-10', '廿一'],
    ['2017-10-11', '廿二'],
    ['2017-10-12', '廿三'],
    ['2017-10-13', '廿四'],
    ['2017-10-14', '廿五'],
    ['2017-10-15', '廿六'],
    ['2017-10-16', '廿七'],
    ['2017-10-17', '廿八'],
    ['2017-10-18', '廿九'],
    ['2017-10-19', '三十'],
    ['2017-10-20', '九月'],
    ['2017-10-21', '初二'],
    ['2017-10-22', '初三'],
    ['2017-10-23', '初四', '霜降'],
    ['2017-10-24', '初五'],
    ['2017-10-25', '初六'],
    ['2017-10-26', '初七'],
    ['2017-10-27', '初八'],
    ['2017-10-28', '初九'],
    ['2017-10-29', '初十'],
    ['2017-10-30', '十一'],
    ['2017-10-31', '十二'],
    ['2017-11-1', '十三'],
    ['2017-11-2', '十四'],
    ['2017-11-3', '十五'],
    ['2017-11-4', '十六'],
    ['2017-11-5', '十七'],
    ['2017-11-6', '十八'],
    ['2017-11-7', '十九', '立冬'],
    ['2017-11-8', '二十'],
    ['2017-11-9', '廿一'],
    ['2017-11-10', '廿二'],
    ['2017-11-11', '廿三'],
    ['2017-11-12', '廿四'],
    ['2017-11-13', '廿五'],
    ['2017-11-14', '廿六'],
    ['2017-11-15', '廿七'],
    ['2017-11-16', '廿八'],
    ['2017-11-17', '廿九'],
    ['2017-11-18', '十月'],
    ['2017-11-19', '初二'],
    ['2017-11-20', '初三'],
    ['2017-11-21', '初四'],
    ['2017-11-22', '初五', '小雪'],
    ['2017-11-23', '初六'],
    ['2017-11-24', '初七'],
    ['2017-11-25', '初八'],
    ['2017-11-26', '初九'],
    ['2017-11-27', '初十'],
    ['2017-11-28', '十一'],
    ['2017-11-29', '十二'],
    ['2017-11-30', '十三'],
    ['2017-12-1', '十四'],
    ['2017-12-2', '十五'],
    ['2017-12-3', '十六'],
    ['2017-12-4', '十七'],
    ['2017-12-5', '十八'],
    ['2017-12-6', '十九'],
    ['2017-12-7', '二十', '大雪'],
    ['2017-12-8', '廿一'],
    ['2017-12-9', '廿二'],
    ['2017-12-10', '廿三'],
    ['2017-12-11', '廿四'],
    ['2017-12-12', '廿五'],
    ['2017-12-13', '廿六'],
    ['2017-12-14', '廿七'],
    ['2017-12-15', '廿八'],
    ['2017-12-16', '廿九'],
    ['2017-12-17', '三十'],
    ['2017-12-18', '十一月'],
    ['2017-12-19', '初二'],
    ['2017-12-20', '初三'],
    ['2017-12-21', '初四'],
    ['2017-12-22', '初五', '冬至'],
    ['2017-12-23', '初六'],
    ['2017-12-24', '初七'],
    ['2017-12-25', '初八'],
    ['2017-12-26', '初九'],
    ['2017-12-27', '初十'],
    ['2017-12-28', '十一'],
    ['2017-12-29', '十二'],
    ['2017-12-30', '十三'],
    ['2017-12-31', '十四']
];

var heatmapData = [];
var lunarData = [];
for (var i = 0; i < dateList.length; i++) {
    heatmapData.push([
        dateList[i][0],
        Math.random() * 300
    ]);
    lunarData.push([
        dateList[i][0],
        1,
        dateList[i][1],
        dateList[i][2]
    ]);
}


option = {
    tooltip: {
        formatter: function (params) {
            return '降雨量: ' + params.value[1].toFixed(2);
        }
    },

    visualMap: {
        show: false,
        min: 0,
        max: 300,
        calculable: true,
        seriesIndex: [2],
        orient: 'horizontal',
        left: 'center',
        bottom: 20,
        inRange: {
            color: ['#e0ffff', '#006edd'],
            opacity: 0.3
        },
        controller: {
            inRange: {
                opacity: 0.5
            }
        }
    },

    calendar: [{
        left: 'center',
        top: 'middle',
        cellSize: [70, 70],
        yearLabel: {show: false},
        orient: 'vertical',
        dayLabel: {
            firstDay: 1,
            nameMap: 'cn'
        },
        monthLabel: {
            show: false
        },
        range: '2017-03'
    }],

    series: [{
        type: 'scatter',
        coordinateSystem: 'calendar',
        symbolSize: 1,
        label: {
            show: true,
            formatter: function (params) {
                var d = echarts.number.parseDate(params.value[0]);
                return d.getDate() + '\n\n' + params.value[2] + '\n\n';
            },
            color: '#000'
        },
        data: lunarData
    }, {
        type: 'scatter',
        coordinateSystem: 'calendar',
        symbolSize: 1,
        label: {
            show: true,
            formatter: function (params) {
                return '\n\n\n' + (params.value[3] || '');
            },
            fontSize: 14,
            fontWeight: 700,
            color: '#a00'
        },
        data: lunarData
    }, {
        name: '降雨量',
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: heatmapData
    }]
};

和饼图结合:

var cellSize = [80, 80];
var pieRadius = 30;

function getVirtulData() {
    var date = +echarts.number.parseDate('2017-02-01');
    var end = +echarts.number.parseDate('2017-03-01');
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time < end; time += dayTime) {
        data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 10000)
        ]);
    }
    return data;
}

function getPieSeries(scatterData, chart) {
    return scatterData.map(function (item, index) {
        var center = chart.convertToPixel('calendar', item);
        return {
            id: index + 'pie',
            type: 'pie',
            center: center,
            label: {
                normal: {
                    formatter: '{c}',
                    position: 'inside'
                }
            },
            radius: pieRadius,
            data: [
                {name: '工作', value: Math.round(Math.random() * 24)},
                {name: '娱乐', value: Math.round(Math.random() * 24)},
                {name: '睡觉', value: Math.round(Math.random() * 24)}
            ]
        };
    });
}

function getPieSeriesUpdate(scatterData, chart) {
    return scatterData.map(function (item, index) {
        var center = chart.convertToPixel('calendar', item);
        return {
            id: index + 'pie',
            center: center
        };
    });
}

var scatterData = getVirtulData();

option = {
    tooltip : {},
    legend: {
        data: ['工作', '娱乐', '睡觉'],
        bottom: 20
    },
    calendar: {
        top: 'middle',
        left: 'center',
        orient: 'vertical',
        cellSize: cellSize,
        yearLabel: {
            show: false,
            fontSize: 30
        },
        dayLabel: {
            margin: 20,
            firstDay: 1,
            nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        },
        monthLabel: {
            show: false
        },
        range: ['2017-02']
    },
    series: [{
        id: 'label',
        type: 'scatter',
        coordinateSystem: 'calendar',
        symbolSize: 1,
        label: {
            show: true,
            formatter: function (params) {
                return echarts.format.formatTime('dd', params.value[0]);
            },
            offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
            fontSize: 14
        },
        data: scatterData
    }]
};

var pieInitialized;
setTimeout(function () {
    pieInitialized = true;
    myChart.setOption({
        series: getPieSeries(scatterData, myChart)
    });
}, 10);

app.onresize = function () {
    if (pieInitialized) {
        myChart.setOption({
            series: getPieSeriesUpdate(scatterData, myChart)
        });
    }
};
神奇大叔
关注
  • 4
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python数据可视化 Pyecharts 制作 Calendar 日历热图
Mr数据杨
03-09 3万+
大家好，我是Mr数据杨，想象一下，这里的"Calendar"就像我们每个人的生活指南，如同古代将领们依赖战略地图一样。"基本设置"就像在出征前的各项准备，诸葛亮出征前仔细研究兵法，我们也要准备好编程的基础工具。然后“坐标轴设置”无异于郭嘉为曹操绘制的战场布局图，我们也要通过它设定程序的运行路径。“日历坐标系组件配置项”，这就像三国各路谋士们为各自的主公配置最佳的军队阵容，以确保最佳的战斗效果。我们在配置日历坐标系统时，也需要确保数据的准确性和整体的兼容性。
echarts简单日历
gfcat博客
05-09 7009
请大家对照echarts3.5.2版本给出的日历图官方示例对照着看会更好理解一些，我是根据那个改编的， var planlist; var date = new Date; var str =date.getFullYear()+”/”+(date.getMonth()+1)+”/”+date.getDate(); //当前日期function cal(){ $.ajax({
ecahrts日历记录数据，切换日期
weixin_46972395的博客
09-15 1006
ecahrts日历记录防疫轨迹
echarts自定义x轴-分时天月年自定义
09-27
完全小白就不要看了，容易看迷，涉及到公司的一些东西，里面代码有删减，但是整理一下肯定是能用的，方法抽出来了，可以借鉴一下适当修改应该都能用。这个实现的功能就是echarts x轴自定义时间段显示，自适应分时天月年显示，其他类似根据时间合并也可以用
echarts Y轴展示时间片段，series data数据 也是时间片段，鼠标放上去 提示框显示对应的时间片段
最新发布
让心在跳动
06-22 633
2、echarts Y轴展示时间片段，如：['00:00','03:00','05:15']3、X轴展示日期，如：['xx年xx月xx日']2、 第二种通过 formatter 方法来展示。1、第一种通过 type类型设置time 来展示。1、折线图，展示每天对应的一个时间片段。注意 getYaxis 方法。没有的时候 索引要+1。数据处理 ---- （重点）Y轴要设置为整数 "echarts 整体代码。
Echarts：有趣的calendar-实现日历图
前端御书房
11-20 2328
其中比较有趣的就是calendar，calendar是一个坐标系，这个坐标系与一般的直角坐标系不同，日历坐标系是根据日历的布局来显示数据，显示的具体的形状由series中设置的类型决定，对于日历坐标系的应用一些网站已经使用，github上的贡献统计就有根据每天的上传的代码显示不同的颜色，csdn中的成就页面中也有显示。Echarts是一个开源的可视化图表库，支持丰富的图表，官网中还有大量示例可以选择使用、参考。就类似于上图的效果，今天就来实现一下。然后，创建数据，数据比较多使用函数创建。
Echarts 定制化日历图
c.j.h_code的博客
07-16 1198
最近在做可视化，发现日历图挺有意思，分享一波吧！！！将它拉下备用后面在此基础解释并改造，如下代码运行结果如图：下面开始改造代码了！！！
echarts案例之日历
i-cat的博客
10-26 1079
巧妙搞定日历之间的间隔~
echarts-柱状图
六月心悸
09-17 1834
功能： 1.从json中提取数据 2.按年度显示不同数据 2.1 每次只显示一个图例的图表 设置： selectedMode:'single', legend: {       x: 'right',        selectedMode:'single',       data:['2011','2012','2013','2014','2015','total
Android自定义日历Calender代码实现
09-01
在Android开发中，自定义日历控件是一个常见的需求，特别是在构建涉及到日期选择或签到功能的应用时。本文将深入探讨如何实现一个自定义的日历控件，即`CalendarViewAdapter`，它基于`BaseAdapter`，并展示了如何...
Jquery Easyui日历组件Calender使用详解（23）
10-20
主要为大家详细介绍了Jquery Easyui日历组件Calender的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
mfc_calender.rar_MFC日历_calender c++_mfc 日历_日历
09-22
总结起来，"mfc_calender.rar"是一个MFC日历应用的源代码包，它展示了如何使用C++和MFC库创建一个功能丰富的日历控件。开发者通过自定义界面和实现各种日期操作，实现了动态且美观的日历功能。对于希望学习MFC或者...
android Calender 日历记事软件代码
03-21
Android3.0以上系统 提供了CalenderView 日历控件。本人就是利用此控件进行开发，实现了基本的日历记事功能，点击日历中的某一日，可显示这一天的记事列表，亦可对当日新建记事，删除，编辑等。界面简洁干净，绝对...
日历插件示例art-calender-test
09-24
在本文中，我们将深入探讨日历插件的使用，特别是以"art-calender-test"为例。日历插件是Web开发中的一个重要工具，它能够帮助用户直观地查看和管理日期相关的事件，常用于网站的预约系统、日程管理、时间表展示等...
极致呈现系列之：Echarts日历坐标系的时光流转
九仞山的专栏
06-27 814
详细介绍了Echarts日历坐标系的使用方法
echarts 日历热度图设置 calendar
学习笔记
01-06 1964
echarts 日历热度图设置 calendar Calendar Option option: { color: this.$CHART_OPTION.COLOR, legend:{ top: 10, left: 10 }, grid: {
炫酷日历图-Pyecharts进阶指南与实战技巧
热门推荐
一键难忘的博客
01-30 1万+
Pyecharts是一个基于Echarts的Python库，它提供了简单易用的API，使得绘制各种图表变得十分方便。Echarts本身是一款由百度开发的数据可视化库，支持多种图表类型，包括我们今天要讲解的日历图。通过本篇博客，我们介绍了如何绘制动态日历图和结合数据分析更深入地理解图表。通过不断挑战自己，尝试不同类型的日历图和更多的数据分析手法，你可以逐渐掌握Pyecharts在日历图可视化方面的强大功能，为数据展示和分析提供更加全面的支持。希望这些进阶内容对你的学习和实践有所帮助。
使用Echarts 日历热力图
KBK2020的博客
07-03 618
实现效果：使用 Echarts日历热力图。
echarts-日历图
王春红的博客
04-20 2285
Echarts实现日历图
java中calender类打印日历
03-16
使用Java中的Calendar类可以打印日历。具体步骤如下： 1. 创建一个Calendar对象，可以使用getInstance()方法获取当前时间的Calendar对象。 2. 设置Calendar对象的年份和月份，可以使用set()方法设置。 3. 获取该月的第一天是星期几，可以使用get()方法获取。 4. 打印日历，可以使用循环遍历该月的每一天，使用System.out.print()方法打印。 5. 注意格式化输出，可以使用String.format()方法格式化输出。 示例代码如下： ``` import java.util.Calendar; public class CalendarDemo { public static void main(String[] args) { // 获取当前时间的Calendar对象 Calendar calendar = Calendar.getInstance(); // 设置年份和月份 calendar.set(Calendar.YEAR, 2022); calendar.set(Calendar.MONTH, Calendar.JANUARY); // 获取该月的第一天是星期几 int firstDayOfWeek = calendar.get(Calendar.DAY_OF_WEEK); // 打印日历 System.out.println("日\t一\t二\t三\t四\t五\t六"); // 打印该月的每一天 for (int i = 1; i <= calendar.getActualMaximum(Calendar.DAY_OF_MONTH); i++) { if (i == 1) { // 打印该月的第一天前面的空格 for (int j = 1; j < firstDayOfWeek; j++) { System.out.print("\t"); } } System.out.print(String.format("%d\t", i)); if ((i + firstDayOfWeek - 1) % 7 == 0) { // 每打印7天换行 System.out.println(); } } } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值