echarts折线图x轴显示时间轴方法

最新推荐文章于 2025-03-12 14:06:54 发布

FUSI14

最新推荐文章于 2025-03-12 14:06:54 发布

阅读量1.6k

点赞数 3

文章标签： echarts 前端 javascript html5 json

本文链接：https://blog.csdn.net/lzy0811one/article/details/142142106

版权

x轴以时间形式展示，上层为“月-日”形式，下方为“年”形式，如上图所示。

只需要将xAxis.axisLabel的返回值写为函数形式：

xAxis: {
	type: 'time', // 使用时间轴
	boundaryGap: false,
	axisLabel: {
		formatter: function(value) {
		    var date = new Date(value);
		    var monthDay = (date.getMonth() + 1) + '-' + date.getDate(); // 月-日
		    var year = date.getFullYear(); // 年
		    return monthDay + '\n' + year; // 双行显示，\n 换行
	    }
	}
},

根据上述方式也可以写出其它格式的时间轴，只需修改函数的返回值即可。

数据格式可参考下方完整代码：

<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8">
		<title>time line</title>
		<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js">
		</script>
	</head>
	<body style="height: 100%;">
		<div id="line_time" style="height: 100%;width: 100%;">

		</div>
	</body>
	<script>
		// 初始化 ECharts 实例
		var chart_cpu = echarts.init(document.getElementById('line_time'));

		// 配置项
		var option = {
			tooltip: {
				trigger: 'axis'
			},
			xAxis: {
				type: 'time', // 使用时间轴
				boundaryGap: false,
				axisLabel: {
					formatter: function(value) {
						var date = new Date(value);
						var monthDay = (date.getMonth() + 1) + '-' + date.getDate(); // 月-日
						var year = date.getFullYear(); // 年
						return monthDay + '\n' + year; // 双行显示，\n 换行
					}
				}
			},
			yAxis: {
				type: 'value',
			},
			// 数据请在这里修改
			series: [{
				symbol: "none",
				type: 'line',
				smooth: true, // 平滑效果
				data: [
					['2027-09-01', 20],
					['2027-09-02', 30],
					['2027-09-03', 22],
					['2027-09-04', 33],
					['2027-09-05', 11],
					['2027-09-06', 11],
					['2027-09-07', 33],
				],
				lineStyle: {
					type: 'solid',
					width: 6
				},
			}],
			/** 配置图标离容器上下左右的距离 */
			// grid: {
			// 	top: "10%",
			// 	right: "8%",
			// 	left: "12%",
			// 	bottom: "15%",
			// },
			responsive: true // 自适应父元素大小
		};

		// 使用配置项和数据生成图表
		chart_cpu.setOption(option);

		// 当窗口大小改变时，自适应图表大小
		window.addEventListener('resize', function() {
			chart_cpu.resize();
		});
	</script>
</html>