Echarts使用教程--标签式单文件引入
<#-- 页头 -->
<#assign currNav = "statistics">
<#assign pageTitle="每分钟最高在线观看人数查询">
<#include "/commons/header.ftl">
<div class="container">
<div class="row">
<div class="col-md-2">
<#assign sidebarNav = "viewers">
<#include "/commons/channelSidebar.ftl">
</div>
<div class="col-md-10">
<div class="panel panel-default">
<div class="panel-heading">
<#-- 统一头信息 -->
<#include "/commons/channelPanelHeading.ftl">
</div>
<div class="panel-body">
<form id="dateRangeForm" class="form-inline well well-sm" method="get">
<div class="form-group">
<input type="text" id="currentDay" name="currentDay" value="${currentDay!''}" placeholder="请选择日期" class="form-control datepicker">
</div>
<div class="form-group">
<input type="text" id="sessionId" name="sessionId" value="${sessionId!''}" placeholder="直播场次" class="form-control">
</div>
<div class="form-group">
<input type="text" id="param1" name="param1" value="${param1!''}" placeholder="自定义参数1" class="form-control">
</div>
<div class="form-group">
<input type="text" id="param2" name="param2" value="${param2!''}" placeholder="自定义参数2" class="form-control">
</div>
<button class="btn btn-primary">查询</button>
</form>
<div id="chartDiv" style="width: 100%; height: 340px;"></div>
<div id="infodiv" style="margin-top: 24px;"></div>
<table class="table table-striped">
<thead>
<tr>
<th>播放ID</th>
<th>播放时长</th>
<th>流量</th>
<th>直播场次</th>
<th>自定义参数1</th>
<th>观众IP</th>
<th>所在省份</th>
<th>所在城市</th>
<th>浏览器</th>
<th>是否为移动端</th>
</tr>
</thead>
<tbody>
<#if paginator.contents?has_content>
<#list paginator.contents as s>
<tr>
<td>${s.playId}</td>
<td>${s.playDuration}</td>
<td>${s.flowSize}</td>
<td>${s.sessionId!"-"}</td>
<td>${s.param1!"-"}</td>
<td>${s.ipAddress}</td>
<td>${s.province}</td>
<td>${s.city}</td>
<td>${s.browser}</td>
<td>${s.isMobile}</td>
</tr>
</#list>
</#if>
</tbody>
</table>
<#-- 分页链接 -->
<#if (paginator.totalPages > 1) >
<div class="col-md-8 col-md-offset-4">
${paginationHtml!""}
</div>
</#if>
</div> <!-- /panel-body -->
</div>
</div>
</div>
</div> <!-- /container -->
<#-- 页脚开始 -->
<#include "/commons/footerBegin.ftl">
<script type="text/javascript" src="/echarts/esl.js"></script>
<script src="/echarts/echarts-all.js"></script>
<script src="/datepicker/js/bootstrap-datepicker.js"></script>
<script>
$(function(){
$("input.datepicker").datepicker({format: "yyyy-mm-dd"}).on("changeDate", function(ev){
$("input.datepicker").datepicker("hide");
});
});
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('chartDiv'));
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['每分钟观看人数']
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataZoom : {
show : true,
realtime : true,
//orient: 'vertical', // 'horizontal'
//x: 0,
//y: 36,
//width: 400,
height: 20,
//backgroundColor: 'rgba(221,160,221,0.5)',
//dataBackgroundColor: 'rgba(138,43,226,0.5)',
//fillerColor: 'rgba(38,143,26,0.6)',
//handleColor: 'rgba(128,43,16,0.8)',
//xAxisIndex:[],
//yAxisIndex:[],
start : 40,
end : 60
},
xAxis : [
{
type : 'category',
name:'(时间/分钟)',
boundaryGap : false,
data : function (){
var list = [];
var n = 0;
while (n++ < 150) {
list.push(n);
}
return list;
}()
}
],
yAxis : [
{
name:'(观看人数/人)',
type : 'value'
}
],
series : [
{
name:'每分钟观看人数',
type:'line',
data:function (){
var list = [];
for (var i = 1; i <= 150; i++) {
list.push(Math.round(Math.random()* 30));
}
return list;
}()
}
],
calculable:false
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
<#-- 页脚结束 -->
<#include "/commons/footerEnd.ftl">
直播最高并发统计
<#-- 页头 -->
<#assign currNav = "statistics">
<#assign pageTitle="每分钟最高在线观看人数查询">
<#include "/commons/header.ftl">
<div class="container">
<div class="row">
<div class="col-md-2">
<#assign sidebarNav = "viewers">
<#include "/commons/channelSidebar.ftl">
</div>
<div class="col-md-10">
<div class="panel panel-default">
<div class="panel-heading">
<#-- 统一头信息 -->
<#include "/commons/channelPanelHeading.ftl">
</div>
<div class="panel-body">
<form id="dateRangeForm" class="form-inline well well-sm" method="get">
<div class="form-group">
<input type="text" id="currentDay" name="currentDay" value="${currentDay!''}" placeholder="请选择日期" class="form-control datepicker">
</div>
<div class="form-group">
<input type="text" id="sessionId" name="sessionId" value="${sessionId!''}" placeholder="直播场次" class="form-control">
</div>
<div class="form-group">
<input type="text" id="param1" name="param1" value="${param1!''}" placeholder="自定义参数1" class="form-control">
</div>
<div class="form-group">
<input type="text" id="param2" name="param2" value="${param2!''}" placeholder="自定义参数2" class="form-control">
</div>
<div class="form-group hide" >
<input type="text" id="channelId" name="channelId" value="${channel.channelId!''}" class="form-control">
</div>
<button class="btn btn-primary">查询</button>
</form>
<div id="chartDiv" style="width: 100%; height: 340px;"></div>
<div id="infodiv" style="margin-top: 24px;"></div>
<table class="table table-striped">
<thead>
<tr>
<th>频道ID</th>
<th>时间</th>
<th>观看人数</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<#if paginator.contents?has_content>
<#list paginator.contents as s>
<tr>
<td>${s.channelId}</td>
<td>${s.currentMinute}</td>
<td>${s.viewerCount}</td>
<td>${s.currentDay}</td>
</tr>
</#list>
</#if>
</tbody>
</table>
<#-- 分页链接 -->
<#if (paginator.totalPages > 1) >
<div class="col-md-8 col-md-offset-4">
${paginationHtml!""}
</div>
</#if>
</div> <!-- /panel-body -->
</div>
</div>
</div>
</div> <!-- /container -->
<#-- 页脚开始 -->
<#include "/commons/footerBegin.ftl">
<script type="text/javascript" src="/echarts/esl.js"></script>
<script src="/echarts/echarts-all.js"></script>
<script src="/datepicker/js/bootstrap-datepicker.js"></script>
<script>
$(function(){
$("input.datepicker").datepicker({format: "yyyy-mm-dd"}).on("changeDate", function(ev){
$("input.datepicker").datepicker("hide");
});
});
</script>
<script type="text/javascript">
var result='${(result)!''}';
console.debug(result);
if(result==null){
infodiv.html("<div class='alert alert-warning'><i class='glyphicon glyphicon-warning-sign'></i> 当前无人观看直播内容。</div>").show();
}else{
//alert(eval(result).length);
var len=eval(result).length;
var dataObj=eval("("+result+")");//转换为json对象
//alert(dataObj[0].currentMinute);
var myChart = echarts.init(document.getElementById('chartDiv'),
{
noDataLoadingOption:{
text : '暂无数据',
effect : 'whirling',
effectOption:{
backgroundColor:"#fff"
},
textStyle : {
fontSize : 30
}
}
});
var option = {
title : {
text: '最高并发观看人数',
borderWidth: 0,
textAlign:'center',
textStyle:{
color: '#337AB7'
},
x:'center'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['观看人数'],
x:'right'
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataZoom : {
show : true,
realtime : true,
height: 20,
start : 40,
end : 60
},
xAxis : [
{
type : 'category',
name:'(时间/分钟)',
boundaryGap : false,
data : function (){
var list = [];
var n = 0;
while (n++ < len) {
list.push(dataObj[n-1].currentMinute);
}
return list;
}()
}
],
yAxis : [
{
name:'(观看人数/人)',
type : 'value'
}
],
series : [
{
name:'观看人数',
type:'line',
data:function (){
var list = [];
for (var i = 1; i <= len; i++) {
list.push(dataObj[i-1].viewerCount);
}
return list;
}()
}
],
calculable:false
};
// 为echarts对象加载数据
myChart.setOption(option);
}
</script>
<#-- 页脚结束 -->
<#include "/commons/footerEnd.ftl">
5882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
