首页 > 代码库 > 后台获取数据实现实时折线图
后台获取数据实现实时折线图
折线图用的是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 = http://www.mamicode.com/(new Date()).toLocaleTimeString().replace(/^/D*/, ‘‘);"#Battery_V").html(), //新增数据(这里是我在后台获取的数据) false, // 新增数据是否从队列头部插入 false, // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头 axisData // 坐标轴标签 ] ]); }, 3000); }); } require.config({ paths : { echarts : ‘http://echarts.baidu.com/build/dist‘ } }); </script>
后台获取数据实现实时折线图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。