echarts折线图展示最近七天的数据

最新推荐文章于 2025-07-08 11:38:16 发布

原创最新推荐文章于 2025-07-08 11:38:16 发布 · 9.9k 阅读

30 ·

CC 4.0 BY-SA版权

js 同时被 3 个专栏收录

26 篇文章

订阅专栏

canvas

5 篇文章

订阅专栏

echarts

4 篇文章

订阅专栏

本文介绍了如何利用Echarts库展示最近七天的数据，提供了代码示例，并鼓励读者通过官方文档深入学习Echarts的基础配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于echarts的基础配置建议大家去官网学习：http://echarts.baidu.com/

下面给大家展示下效果图：

附上代码供大家参考：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/echarts.js"></script>

	<body>
		<div id="main" style="width: 600px;height:400px;"></div>
	</body>

	<body>
	</body>

</html>
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例	
	var myChart = echarts.init(document.getElementById('main'));
	var arr = [];//用来存放最近七天的时间

	function getBeforeDate(n) {
		var n = n;
		console.log(n);//
		var d = new Date();
		var year = d.getFullYear();
		var mon = d.getMonth() + 1;
		var day = d.getDate();
		if(day <= n) {
			if(mon > 1) {
				mon = mon - 1;
			} else {
				year = year - 1;
				mon = 12;
			}
		}
		d.setDate(d.getDate() + n); //很重要，+n取得是前一天的时间
		year = d.getFullYear();
		mon = d.getMonth() + 1;
		day = d.getDate();
		s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
		return s;
	}

	for(var i = 0; i > -7; i--) {
		arr.push(getBeforeDate(i));

	}
	console.log(arr);
	option = {
		title: {
			text: '近期币值走势'
		},
		tooltip: {
			trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
		},
		xAxis: {
			type: 'category',//类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
			name: '日期',//坐标轴名称
			boundaryGap: false,
			data: arr.reverse(),
			nameGap: 7,//坐标轴名称与轴线之间的距离。
			axisTick: {//是否显示坐标轴刻度。
				inside: true//坐标轴刻度是否朝内，默认朝外。
			}
		},
		yAxis: {
			type: 'value',
			name: '元/币',
			splitLine: {
				show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
			},
			nameGap: 15,
			axisTick: {
				inside: true
			}
		},
		series: [{
			type: 'line',//线条
			name: '币值',//系列名称，用于tooltip的显示
			data: [0.2, 0.5, 0.8, 1, 1.5, 2],
			symbol: 'circle',//标记的类型：圆圈
			itemStyle: {
				normal: {
					shadowBlur: 50,//文字块的背景阴影长度。
					shadowColor: 'red',//文字块的背景阴影颜色。
					color: 'red',//图形的颜色
					lineStyle: {
						color: '#4d6dfd',//线的颜色
						width: 1//线的宽度
					}
				}
			}
		}],
	};
	// 使用刚指定的配置项和数据显示图表。	
	myChart.setOption(option);
</script>