折线图用的是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>