echarts的实时数据展示实现

最新推荐文章于 2025-06-17 22:50:31 发布

很有想法的小伙子

最新推荐文章于 2025-06-17 22:50:31 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/qq_40388552/article/details/85066963

echarts 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种实现数据实时更新的折线图方法，通过预设的时间序列数据展示图表随时间变化的效果，适用于监控系统或数据分析场景。

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

版权声明：本文为章鱼哥原创文章，若要转载，请注明出处 https://blog.youkuaiyun.com/qq_40388552/article/details/85066963
效果图：实现效果图数据实时更新，折线图随着时间不断变化
在这里插入图片描述
核心代码

//折线图数据
var data = [
	{ name: '2018/01/01 00:00:10', value: ['2018/01/01 00:00:10', 30] },
	{ name: '2018/01/01 00:10:10', value: ['2018/01/01 00:10:10', 35] },
	{ name: '2018/01/01 00:20:10', value: ['2018/01/01 00:20:10', 32] },
	{ name: '2018/01/01 00:30:10', value: ['2018/01/01 00:30:10', 40] },
	{ name: '2018/01/01 00:40:10', value: ['2018/01/01 00:40:10', 50] },
	{ name: '2018/01/01 00:50:10', value: ['2018/01/01 00:50:10', 38] },
	{ name: '2018/01/01 01:50:10', value: ['2018/01/01 01:50:10', 31] },
	{ name: '2018/01/01 02:50:10', value: ['2018/01/01 02:50:10', 45] },
	{ name: '2018/01/01 03:50:10', value: ['2018/01/01 03:50:10', 42] },
	{ name: '2018/01/01 04:50:10', value: ['2018/01/01 04:50:10', 46] },
	{ name: '2018/01/01 05:50:10', value: ['2018/01/01 05:50:10', 44] },
	{ name: '2018/01/01 06:50:10', value: ['2018/01/01 06:50:10', 38] },
	{ name: '2018/01/01 07:50:10', value: ['2018/01/01 07:50:10', 32] },
	{ name: '2018/01/01 10:50:10', value: ['2018/01/01 10:50:10', 45] },
	{ name: '2018/01/01 11:50:10', value: ['2018/01/01 11:50:10', 10] },
	{ name: '2018/01/01 12:50:10', value: ['2018/01/01 12:50:10', 56] },
	{ name: '2018/01/01 14:50:10', value: ['2018/01/01 14:50:10', 44] },
	{ name: '2018/01/01 15:50:10', value: ['2018/01/01 15:50:10', 38] },
	{ name: '2018/01/01 16:50:10', value: ['2018/01/01 16:50:10', 32] },
	
];
//x轴坐标数据
var xData = [
	{ name: '2018/01/01 00:00:00', value: ['2018/01/01 00:00:00', 0] },
	{ name: '2018/01/01 00:00:00', value: ['2018/01/01 23:59:59', 0] }
];
option = {
	xAxis: {
		type: 'time',
		splitNumber: 7, //可以通过它控制x轴显示的坐标轴的数量
		splitLine: {
			show: false
		}
	},
	yAxis: {
		type: 'value',
		//min: 1, //当每条数据之间相差很小，折线图波动不明显时，我们可以设置最小值。
		boundaryGap: [0, '100%'],
		splitLine: {
			show: false
		}
	},
	series: [{
			type: 'line',
			showSymbol: false,
			hoverAnimation: false,
			data: data
		},
		{
			type: 'line',
			showSymbol: false,
			data: xData,
			itemStyle: { normal: { opacity: 0 } },
			lineStyle: { normal: { opacity: 0 } }
		}
	]
};

这里的数据我是写死的，当然你用的话，是要接入真实数据的，接入数据的方式懒得写了，有什么需要问的，欢迎留言交流。