echarts中热力图和日历组件的结合

最新推荐文章于 2025-11-17 03:34:14 发布

原创最新推荐文章于 2025-11-17 03:34:14 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #calendar #heatmap

学习笔记专栏收录该内容

49 篇文章

订阅专栏

本文介绍如何在ECharts中结合热力图和日历组件，展示连续三个月的数据分布，通过颜色变化直观反映数值大小。配置了垂直布局的日历，设置了自定义颜色映射，并对上月和上上月数据进行可视化。

echarts中热力图和日历组件的结合

function getVirtulData(year, month) { //随机生成月份的值
	var date = +echarts.number.parseDate(year + '-' + month + '-01');
	var end = +echarts.number.parseDate(year + '-' + (month+1) + '-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() * 800)
		]);
	}
	return data;
}
let lastM; //上个月
let lastLM; //上上个月
if (month < 2) {
	lastM = 12;
	lastLM = 11; 
}else if (month < 3) {
	lastM = 1;
	lastLM = 12;
} else {
	lastM = month - 1;
	lastLM = month - 2;
}
const option = {   //以下为option的配置
		visualMap: {      
			min: 0,
			max: 800,
			calculable: true,
			orient: 'vertical',
			right: 10,
			top: '25%',
			color: ['#0088ff', '#fff']     //数值范围对应的颜色范围
	},
	calendar: [{                   //calendar若为数组，则是有多个日历，每个对象是一个日历
		orient: 'vertical',
		top: 35,
		left: 100,
		right: 100,
		range: year + '-' + month,       //range可以是一个月也可以是1年，一年的话每个月的日历会连在一起，因为年是整体
		itemStyle: {
			normal: {
				borderWidth: 0.5
			}
		},
		yearLabel: {
			show: false
		},
		monthLabel: {
			show: true,
			nameMap: 'cn',
			fontWeight: 'bold',
			fontSize: 18,
			vertical: 'middle',
			margin: 10
		},
		dayLabel: {
			nameMap: 'cn'
		}
	},{
		orient: 'vertical',
		top: 170,
		left: 100,
		right: 100,
		range: year + '-' + lastM,
		itemStyle: {
		normal: {
		borderWidth: 0.5
		}
		},
		yearLabel: {
		show: false
		},
		monthLabel: {
		show: true,
		nameMap: 'cn',
		fontWeight: 'bold',
		fontSize: 18,
		vertical: 'middle',
		margin: 10
		},
		dayLabel: {
		show: false
	}
	}, {
	orient: 'vertical',
	top: 305,
	left: 100,
	right: 100,
	range: year + '-' + lastLM,
	itemStyle: {
	normal: {
	borderWidth: 0.5
	}
	},
	yearLabel: {
	show: false
	},
	monthLabel: {
	show: true,
	nameMap: 'cn',
	fontWeight: 'bold',
	fontSize: 18,
	vertical: 'middle',
	margin: 10
	},
	dayLabel: {
	show: false
	}
	}],
series: [{                               //并不一定对应calendar中的各个
	type: 'heatmap',
	coordinateSystem: 'calendar',
	calendarIndex: 0,           //此属性是决定对应calendar数组中的哪个日历，相当于数组的index
	data: getVirtulData(year, month)
},{
	type: 'heatmap',
	coordinateSystem: 'calendar',
	calendarIndex: 1,
	data: getVirtulData(year, lastM)
},{
	type: 'heatmap',
	coordinateSystem: 'calendar',
	calendarIndex: 2,
	data: getVirtulData(year, lastLM)
}]
};