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