mirror of
https://github.com/jumpserver/jumpserver.git
synced 2025-10-21 15:58:52 +00:00
添加绘图
This commit is contained in:
ibuler
@@ -23,15 +23,7 @@
|
||||
|
||||
<!-- highcharts -->
|
||||
<script src="/static/js/highcharts/highcharts.js"></script>
|
||||
<script type="text/javascript">
|
||||
require.config({
|
||||
paths: {
|
||||
echarts: '/static/js/echarts/chart'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<!-- echarts -->
|
||||
<script src="/static/js/echarts/echarts.js"></script>
|
||||
|
||||
|
||||
<script src="/static/js/dropzone/dropzone.js"></script>
|
||||
<!-- active menu -->
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<h5>实时在线用户</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h1 class="no-margins"><a href="/jlog/log_list/online/"> <span id="online_users"></span></a></h1>
|
||||
<h1 class="no-margins"><a href="/jlog/log_list/online/"> <span id="online_users">10</span></a></h1>
|
||||
<div class="stat-percent font-bold text-navy">{{ percent_online_user }} <i class="fa fa-level-up"></i></div>
|
||||
<small>Online user</small>
|
||||
</div>
|
||||
@@ -54,7 +54,7 @@
|
||||
<h5>已连接服务器</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h1 class="no-margins"><a href="/jlog/log_list/online/"> <span id="online_hosts"></span></a></h1>
|
||||
<h1 class="no-margins"><a href="/jlog/log_list/online/"> <span id="online_hosts">10</span></a></h1>
|
||||
<div class="stat-percent font-bold text-danger">{{ percent_online_host }} <i class="fa fa-level-down"></i></div>
|
||||
<small>Connected host</small>
|
||||
</div>
|
||||
@@ -62,7 +62,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 border-bottom white-bg dashboard-header" style="margin-left:15px;height: 346px">
|
||||
<div class="col-sm-2 border-bottom white-bg dashboard-header" style="margin-left:15px;height: 346px">
|
||||
<h2>活跃用户TOP5</h2>
|
||||
<small>过去一周共有<span class="text-info">{{ week_users }}</span>位用户登录<span class="text-success">{{ week_hosts }}</span>次服务器.</small>
|
||||
<ul class="list-group clear-list m-t">
|
||||
@@ -76,7 +76,32 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-9" id="top10" style="margin-left: -15px;height: 345px"></div>
|
||||
<div class="col-sm-7" id="top10" style="margin-left: -15px;height: 346px;padding: 15px 0 15px 0;"></div>
|
||||
<div class="col-lg-3 white-bg" id="top1" style="margin-left: -15px;height: 346px">
|
||||
<div class="statistic-box">
|
||||
<h4>
|
||||
活跃用户资产占比
|
||||
</h4>
|
||||
<p>
|
||||
以下图形分别描述一个月活跃用户和资产占所有用户主机的百分比
|
||||
</p>
|
||||
<div class="row text-center">
|
||||
<div class="col-lg-6">
|
||||
<div id="activeUser" style="width: 140px; height: 140px;">
|
||||
|
||||
</div>
|
||||
<h5>用户</h5>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div id="activeAsset" style="width: 140px; height: 140px;"></div>
|
||||
<h5>主机</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-t">
|
||||
<small></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
@@ -248,161 +273,176 @@
|
||||
<!--</div>-->
|
||||
</div>
|
||||
|
||||
<script src="/static/js/echarts/echarts.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#show').click(function(){
|
||||
$('#show').css('display', 'none');
|
||||
$('#more').css('display', 'block');
|
||||
})
|
||||
})
|
||||
var cate = {{ li_str|safe }};
|
||||
$(function () {
|
||||
$('#top10').highcharts({
|
||||
// chart: {
|
||||
// type: 'column'
|
||||
// },
|
||||
title: {
|
||||
text: '一周数据总览',
|
||||
x: -20 //center
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: JumpServer',
|
||||
x: -20
|
||||
},
|
||||
rangeSelector: {
|
||||
allButtonsEnabled: true,
|
||||
selected: 2
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
categories: cate
|
||||
},
|
||||
yAxis:{
|
||||
min: 0,
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
color: '#808080'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: '次'
|
||||
},
|
||||
navigation: {
|
||||
buttonOptions: {
|
||||
align: 'right'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{% for k,v in top_dic.items %}
|
||||
{
|
||||
name: '{{ k }}',
|
||||
data: {{ v }}
|
||||
},
|
||||
{% endfor %}
|
||||
]
|
||||
});
|
||||
|
||||
$('#usertop10').highcharts({
|
||||
title: {
|
||||
text: '一周用户登录TOP10',
|
||||
x: -20 //center
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: JumpServer',
|
||||
x: -20
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
categories: cate
|
||||
},
|
||||
yAxis:{
|
||||
min: 0,
|
||||
title: {
|
||||
text: '登录次数'
|
||||
},
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
color: '#808080'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: '次'
|
||||
},
|
||||
series: [
|
||||
{% for k,v in user_dic.items %}
|
||||
{
|
||||
name: '{{ k }}',
|
||||
data: {{ v }}
|
||||
},
|
||||
{% endfor %}
|
||||
]
|
||||
});
|
||||
|
||||
$('#hosttop10').highcharts({
|
||||
title: {
|
||||
text: '一周主机登录TOP10',
|
||||
x: -20 //center
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: JumpServer',
|
||||
x: -20
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
categories: cate
|
||||
},
|
||||
yAxis:{
|
||||
min: 0,
|
||||
title: {
|
||||
text: '登录次数'
|
||||
},
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
color: '#808080'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: '次'
|
||||
},
|
||||
series: [
|
||||
{% for k,v in host_dic.items %}
|
||||
{
|
||||
name: '{{ k }}',
|
||||
data: {{ v }}
|
||||
},
|
||||
{% endfor %}
|
||||
]
|
||||
});
|
||||
|
||||
function magic_number(value, id) {
|
||||
var num = $("#"+id);
|
||||
num.animate({count: value}, {
|
||||
duration: 500,
|
||||
step: function() {
|
||||
num.text(String(parseInt(this.count)));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function update() {
|
||||
$.getJSON('api/user/', function(data) {
|
||||
var users = data.users;
|
||||
var hosts = data.hosts;
|
||||
magic_number(users, 'online_users');
|
||||
magic_number(hosts, 'online_hosts')
|
||||
});
|
||||
};
|
||||
|
||||
setInterval(update, 5000); //5秒钟执行一次
|
||||
update();
|
||||
|
||||
});
|
||||
|
||||
require.config({
|
||||
paths: {
|
||||
'echarts': '/static/js/echarts/chart',
|
||||
'echarts/chart/line': '/static/js/echarts/chart/line',
|
||||
'echarts/chart/pie': '/static/js/echarts/chart/pie'
|
||||
}
|
||||
});
|
||||
require(
|
||||
[
|
||||
'echarts',
|
||||
'echarts/chart/line'
|
||||
],
|
||||
function (ec) {
|
||||
var top10Chart = ec.init(document.getElementById('top10'));
|
||||
var option = {
|
||||
title : {
|
||||
text: '月数据总览',
|
||||
subtext: '一个月内历史汇总',
|
||||
x: 'center'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
backgroundColor: '#fff',
|
||||
legend: {
|
||||
data:['登陆次数', '活跃用户','活跃资产'],
|
||||
y: 'bottom'
|
||||
},
|
||||
toolbox: {
|
||||
show : false,
|
||||
feature : {
|
||||
{# mark : {show: true},#}
|
||||
{# dataView : {show: true, readOnly: false},#}
|
||||
magicType : {show: true, type: ['line', 'bar']}
|
||||
}
|
||||
},
|
||||
calculable : true,
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
boundaryGap : false,
|
||||
data : {{ date_month | safe}}
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value'
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'登陆次数',
|
||||
type:'line',
|
||||
smooth:true,
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: {{ active_login_month | safe }}
|
||||
},
|
||||
{
|
||||
name:'活跃用户',
|
||||
type:'line',
|
||||
smooth:true,
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: {{ active_user_month | safe }}
|
||||
},
|
||||
{
|
||||
name:'活跃资产',
|
||||
type:'line',
|
||||
smooth:true,
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data: {{ active_asset_month | safe }}
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
top10Chart.setOption(option);
|
||||
}
|
||||
);
|
||||
|
||||
require(
|
||||
[
|
||||
'echarts',
|
||||
'echarts/chart/pie'
|
||||
],
|
||||
function (ec) {
|
||||
var auChart = ec.init(document.getElementById('activeUser'));
|
||||
var aaChart = ec.init(document.getElementById('activeAsset'));
|
||||
var option = {
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter: "{b} <br> {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
orient : 'vertical',
|
||||
x : 'left',
|
||||
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
|
||||
},
|
||||
toolbox: {
|
||||
show : false,
|
||||
feature : {
|
||||
mark : {show: true},
|
||||
dataView : {show: true, readOnly: false},
|
||||
magicType : {
|
||||
show: true,
|
||||
type: ['pie', 'funnel'],
|
||||
option: {
|
||||
funnel: {
|
||||
x: '25%',
|
||||
width: '50%',
|
||||
funnelAlign: 'center',
|
||||
max: 1548
|
||||
}
|
||||
}
|
||||
},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
calculable : true,
|
||||
series : [
|
||||
{
|
||||
name:'访问来源',
|
||||
type:'pie',
|
||||
radius : ['50%', '70%'],
|
||||
itemStyle : {
|
||||
normal : {
|
||||
label : {
|
||||
show : false
|
||||
},
|
||||
labelLine : {
|
||||
show : false
|
||||
}
|
||||
},
|
||||
emphasis : {
|
||||
label : {
|
||||
show : true,
|
||||
position : 'center',
|
||||
textStyle : {
|
||||
fontSize : '5',
|
||||
fontWeight : 'bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{value:335, name:'直接访问'},
|
||||
{value:310, name:'邮件营销'},
|
||||
{value:234, name:'联盟广告'},
|
||||
{value:135, name:'视频广告'},
|
||||
{value:1548, name:'搜索引擎'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
auChart.setOption(option);
|
||||
aaChart.setOption(option);
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
@@ -6,33 +6,34 @@
|
||||
<script type="text/javascript">
|
||||
require.config({
|
||||
paths: {
|
||||
{# 'echarts': '/static/js/echarts/chart',#}
|
||||
'line': '/static/js/echarts/chart/line'
|
||||
'echarts': '/static/js/echarts/chart',
|
||||
'echarts/chart/line': '/static/js/echarts/chart/line'
|
||||
}
|
||||
});
|
||||
require(
|
||||
[
|
||||
'line',
|
||||
'echarts',
|
||||
'echarts/chart/line'
|
||||
],
|
||||
function (ec) {
|
||||
var myChart = ec.init(document.getElementById('main'));
|
||||
var option = {
|
||||
title : {
|
||||
text: '未来一周气温变化',
|
||||
text: '某楼盘销售情况',
|
||||
subtext: '纯属虚构'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['最高气温','最低气温']
|
||||
data:['意向','预购','成交']
|
||||
},
|
||||
toolbox: {
|
||||
show : true,
|
||||
feature : {
|
||||
mark : {show: true},
|
||||
dataView : {show: true, readOnly: false},
|
||||
magicType : {show: true, type: ['line', 'bar']},
|
||||
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
@@ -47,47 +48,35 @@
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
axisLabel : {
|
||||
formatter: '{value} °C'
|
||||
}
|
||||
type : 'value'
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'最高气温',
|
||||
name:'成交',
|
||||
type:'line',
|
||||
data:[11, 11, 15, 13, 12, 13, 10],
|
||||
markPoint : {
|
||||
data : [
|
||||
{type : 'max', name: '最大值'},
|
||||
{type : 'min', name: '最小值'}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name: '平均值'}
|
||||
]
|
||||
}
|
||||
smooth:true,
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data:[10, 12, 21, 54, 260, 830, 710]
|
||||
},
|
||||
{
|
||||
name:'最低气温',
|
||||
name:'预购',
|
||||
type:'line',
|
||||
data:[1, -2, 2, 5, 3, 2, 0],
|
||||
markPoint : {
|
||||
data : [
|
||||
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name : '平均值'}
|
||||
]
|
||||
}
|
||||
smooth:true,
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data:[30, 182, 434, 791, 390, 30, 10]
|
||||
},
|
||||
{
|
||||
name:'意向',
|
||||
type:'line',
|
||||
smooth:true,
|
||||
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
||||
data:[1320, 1132, 601, 234, 120, 90, 20]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
myChart.setOption(option);
|
||||
}
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user