提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

119Echarts - 热力图（Calendar Heatmap）

calendar 力图
2023-09-11 14:15:43 时间

效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
		<script src="dist/extension/dataTool.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			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,
					textStyle: {
						color: '#000'
					}
				},
				calendar: {
					top: 120,
					left: 30,
					right: 30,
					cellSize: ['auto', 13],
					range: '2016',
					itemStyle: {
						normal: {
							borderWidth: 0.5
						}
					},
					yearLabel: {
						show: false
					}
				},
				series: {
					type: 'heatmap',
					coordinateSystem: 'calendar',
					data: getVirtulData(2016)
				}
			};

			myChart.setOption(option);
		</script>
	</body>

</html>

相关文章