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

拼搏现实的明天。 2022-03-30 02:44 809阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70][]

附上代码供大家参考：

<!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>

[http_echarts.baidu.com]: http://echarts.baidu.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70]: /images/20220330/109622153820470c8c928cc041fc68c9.png