后台獲取數據實現實時折線圖

　　折線圖用的是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>