后台获取数据实现实时折线图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了后台获取数据实现实时折线图相关的知识,希望对你有一定的参考价值。

  折线图用的是echarts的折线图。框架用的ssm,连接oracle数据库,将数据实时显示在折线图上。

 

<div id="main" style="width: 95%; height: 60%; margin: auto;"></div>

 

<script>
function showEcharts() {
	              require(
		              [ ‘echarts‘, ‘echarts/chart/line‘ ],
								function(ec) {
									// 基于准备好的dom,初始化echarts图表
									var myChart = ec.init(document.getElementById(‘main‘));
									var option = {
										title : {
											text : ‘实时数据‘
										},
										tooltip : {
											trigger : ‘axis‘ //鼠标悬浮的时候出现数据
										},
										legend : {
											data : []
										// data:[‘最新成交价‘,‘最新事件‘]	 可以在这里写多个,然后在magicType中进行切换
										},
										toolbox : {
											show : true,
											feature : {
												mark : {
													show : false
												},
												dataView : {
													show : false,
													readOnly : false
												},
												magicType : {
													show : false,
													type : [ ‘line‘ ]
												},
												restore : {
													show : false
												},
												saveAsImage : {
													show : false
												}
											}
										},
										dataZoom : {
											show : false,
											start : 0,
											end : 100
										},
										xAxis : [
												{
													type : ‘category‘,
													boundaryGap : true,
													data : (function() {
														var now = new Date();
														var res = [];
														var len = 10; //x轴长度为10
														while (len--) {
															res.unshift(now.toLocaleTimeString().replace(
															/^\D*/,	‘‘));
															now = new Date(
																now - 100); //x轴加载时以一秒为单位
														}
														return res;
													})()
												}, ],
										yAxis : [ {
											type : ‘value‘,
											scale : true,
											name : ‘电压‘,
											scale : true,
											boundaryGap : [ 0.2, 0.2 ]
										} ],
										series : [
		 										{
													name : ‘预购队列‘,
													type : ‘bar‘,
													xAxisIndex : 1,
													yAxisIndex : 1,
													data : (function() {
														var res = [];
														var len = 10;
														while (len--) {
															res.push(Math.round(Math.random() * 1000));
														}
														return res;
													})()
												}, {
													name : ‘最新成交价‘,
													type : ‘line‘,
													data : (function() {
														var res = [];
														var len = 10;
														while (len--) {
															res.push(0); //刚加载时x轴的数据设为0
														}
														return res;
													})()
												} ]
									};
									;
									myChart.setOption(option);
										axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, ‘‘);

										// 动态数据接口 addData
										myChart.addData([ [ 0, // 系列索引
										1, // 新增数据
										true, // 新增数据是否从队列头部插入
										false // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
										], [ 1, // 系列索引
										$("#Battery_V").html(), //新增数据(这里是我在后台获取的数据)
										false, // 新增数据是否从队列头部插入
										false, // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
										axisData // 坐标轴标签
										] ]);
									}, 3000);
								});
					}
					require.config({
						paths : {
							echarts : ‘http://echarts.baidu.com/build/dist‘
						}
					});
				</script>

 

以上是关于后台获取数据实现实时折线图的主要内容,如果未能解决你的问题,请参考以下文章

echarts怎么做实时动态的折线图

iOS 中的实时折线图

前台js如何获取后台传过来的list数据?

d3.js带圆圈的实时折线图

如何使用websocket在网页上动态示实时数据的折线图

D3.JS 具有实时数据、平移和缩放的时间序列折线图