echarts加载动态数据

实时统计

[html] view plain copy

print?

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<jsp:include page="/WEB-INF/view/common/header.jsp" flush="true" />
<script type="text/javascript" charset="utf-8" src="/resources/echarts/esl.js"></script>
<div id="drawEcharts" style="height:400px;"></div>
<script type="text/javascript">
// 路径配置
require.config({
paths:{
'echarts' : '/resources/echarts/echarts',
'echarts/chart/bar' : '/resources/echarts/echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用折线图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('drawEcharts'));
var jsonNum=[13,12,12,15,20,18,8];
var jsonTime=[71,71,70.21,94,11,11,42];
var jsonDay=["1月23日","1月24日","1月25日","1月26日","1月27日","1月28日","1月29日"];
option = {
title : {
text: '在线直播人数',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['在线人数', '预购队列']
},
dataZoom : {
show : false,
start : 0,
end : 100
},
xAxis : [
{
type : 'category',
boundaryGap : true,
data : (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
}
return res;
})()
},
{
type : 'category',
boundaryGap : true,
data : (function (){
var res = [];
var len = 10;
while (len--) {
res.push(len + 1);
}
return res;
})()
}
],
yAxis : [
{
type : 'value',
scale: true,
name : '价格',
boundaryGap: [0.2, 0.2]
},
{
type : 'value',
scale: true,
name : '预购量',
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((Math.random()*10 + 5).toFixed(1) - 0);
}
return res;
})()
}
]
};
var lastData = 11;
var axisData;
clearInterval(timeTicket);
timeTicket = setInterval(function (){
lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
lastData = lastData.toFixed(1) - 0;
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
// 动态数据接口 addData
myChart.addData([
[
0, // 系列索引
Math.round(Math.random() * 1000), // 新增数据
true, // 新增数据是否从队列头部插入
false // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
],
[
1, // 系列索引
lastData, // 新增数据
false, // 新增数据是否从队列头部插入
false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
axisData // 坐标轴标签
]
]);
}, 2000);
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
<script type="text/javascript">var timeTicket;</script>
<jsp:include page="/WEB-INF/view/common/footer.jsp" flush="true" />

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。