Echars 折线图自动向右平移显示数据(数据量大的时候适应)

最新推荐文章于 2024-05-05 03:26:10 发布

万德佛

最新推荐文章于 2024-05-05 03:26:10 发布

阅读量2.2k

点赞数 2

分类专栏：前端 echarts 文章标签： echarts 数据可视化

本文链接：https://blog.csdn.net/qq_39251440/article/details/119741368

版权

前端同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

echarts

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Echars 折线图 自动向右平移显示数据(数据量大的时候适应)</title>
	</head>
	<body>
		<!-- Dom容器 -->
		<div id="myCharts" style="width: 600px;height:400px;"></div>
	</body>

	<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script>
	<script type="text/javascript">
		var timer = null;
		function showEchars(){
			// X轴数据
			var xAxisData = ["08~09", "09~10", "10~11", "11~12", "12~13", "13~14", "14~15", "15~16", "17~18", "18~19", "19~20",
				"20~21", "21~22", "22~23", "23~00", "00~01", "01~02", "02~03", "03~04", "04~05", "05~06", "06~07", "07~08"
			];
			// 需要渲染的series数据
			var seriesData = [90, 80, 80, 90, 70, 80, 99, 100, 79, 90, 100, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90];
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('myCharts'));
			// 指定图表的配置项和数据
			var option = {
				tooltip: {
					trigger: 'axis',
				},
				dataZoom: [{
					type: 'slider',
					show: false,
					realtime: true,
					startValue: 0,
					endValue: 30, // 初始显示index0-30的数据,可根据你的数据量设置
					filterMode: 'none',
				}, ],
				xAxis: {
					show: true,
					boundaryGap: false,
					data: xAxisData
				},
				yAxis: [{
					type: 'value'
				}, ],
				"dataZoom": [{
					"show": true,
					"height": 12,
					"xAxisIndex": [
						0
					],
					bottom: '2%',
					"start": 0,
					"end": 100,
					handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
					handleSize: '110%',
					handleStyle: {
						color: "#d3dee5",
			
					},
					textStyle: {
						color: "#fff"
					},
					borderColor: "#90979c"
				}, {
					"type": "inside",
					"show": true,
					"height": 15,
					"start": 1,
					"end": 35
				}],
				series: [{
					type: 'line',
					itemStyle: {
						color: '#188df0',
					},
					areaStyle: {
						// 渐变色
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#188df0',
							},
							{
								offset: 1,
								color: '#83bff6',
							},
						]),
					},
					data: seriesData
				}, ],
			};
			
			// 使用刚指定的配置项和数据显示图表
			myChart.setOption(option);
			var startNumber = 0;
			// 有多少条数据
			var xAxisDatalen = xAxisData.length;
			// len的值,可以根据你的数量量设置,不要超过xAxisDatalen的值,不然不会动
			var len = 12; //这里请注意
			timer && clearInterval(timer);
			timer = setInterval(function() {
				if (startNumber === xAxisDatalen - len) {
					startNumber = 0;
				}
				myChart.dispatchAction({
					type: 'dataZoom',
					startValue: startNumber,
					endValue: startNumber + len,
				});
				startNumber++;
			}, 1000);
		}
		
		showEchars();
	</script>
</html>

万德佛

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Echars 折线图自动向右平移显示数据(数据量大的时候适应)

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Echars 折线图自动向右平移显示数据(数据量大的时候适应)</title> </head> <body>  <div id="myCharts" style="width: 600px;height:400px;"&gt.
复制链接

扫一扫