3 changed files with 16 additions and 234 deletions
@ -1,215 +0,0 @@ |
|||||
<!DOCTYPE html> |
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|
||||
<head> |
|
||||
<meta charset="utf-8"> |
|
||||
<title>柱状图</title> |
|
||||
<meta name="renderer" content="webkit"> |
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|
||||
<link rel="stylesheet" href="/static/lib/layui-v2.8.6/css/layui.css" media="all"> |
|
||||
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> |
|
||||
<link rel="stylesheet" href="/static/lib/bootstrap-3.4.1-dist/css/bootstrap.min.css" media="all"> |
|
||||
<link rel="stylesheet" href="/static/css/public.css" media="all"> |
|
||||
|
|
||||
<style> |
|
||||
.top-panel { |
|
||||
border: 1px solid #eceff9; |
|
||||
border-radius: 5px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.top-panel > .layui-card-body { |
|
||||
height: 60px; |
|
||||
} |
|
||||
|
|
||||
.top-panel-number { |
|
||||
line-height: 60px; |
|
||||
font-size: 30px; |
|
||||
border-right: 1px solid #eceff9; |
|
||||
} |
|
||||
|
|
||||
.top-panel-tips { |
|
||||
line-height: 30px; |
|
||||
font-size: 12px |
|
||||
} |
|
||||
|
|
||||
|
|
||||
</style> |
|
||||
</head> |
|
||||
<body> |
|
||||
<div class="layuimini-main"> |
|
||||
<div class="layui-colla-item"> |
|
||||
<h2 class="layui-colla-title">柱状图</h2> |
|
||||
<div class="layui-colla-content layui-show"> |
|
||||
<input id="type" th:value="${type}" style="display:none;"> |
|
||||
<button class="layui-btn" lay-submit lay-filter="perMensem"> |
|
||||
 按月  |
|
||||
</button> |
|
||||
<button class="layui-btn" lay-submit lay-filter="byTheDay"> |
|
||||
 按日  |
|
||||
</button> |
|
||||
<select id="selectDepositoryForChart" class="form-control"> |
|
||||
|
|
||||
</select> |
|
||||
<div id="echarts-bar" style="background-color:#ffffff;padding: 10px;height: 400px"> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!--</div>--> |
|
||||
|
|
||||
<script src="/static/lib/layui-v2.8.6/layui.js" charset="utf-8"></script> |
|
||||
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
|
||||
<script src="/static/lib/echarts/echarts.js" charset="utf-8"></script> |
|
||||
<script> |
|
||||
|
|
||||
function initBarChartByTheDateType() { |
|
||||
|
|
||||
} |
|
||||
|
|
||||
function getThisUserDepository() { |
|
||||
|
|
||||
} |
|
||||
|
|
||||
layui.use(['layer', 'element'], function () { |
|
||||
var $ = layui.jquery, |
|
||||
layer = layui.layer, |
|
||||
element = layui.element, |
|
||||
form = layui.form; |
|
||||
|
|
||||
|
|
||||
let type = $("#type").val(); |
|
||||
// 折线图 |
|
||||
let BarChart = echarts.init(document.getElementById('echarts-bar')); |
|
||||
let BarChartOption = { |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
data: [] |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: 'value' |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
data: [], |
|
||||
type: 'bar' |
|
||||
} |
|
||||
], |
|
||||
toolbox: { |
|
||||
feature: { |
|
||||
myFull: { |
|
||||
show: true, |
|
||||
title: '全屏查看', |
|
||||
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891', |
|
||||
onclick: function (e){ |
|
||||
var opts = e.getOption(); |
|
||||
opts.toolbox[0].feature.myFull.show=false; |
|
||||
//window.top表示最顶层iframe 如果在当页面全屏打开 删去window.top即可 |
|
||||
window.top.layer.open({ |
|
||||
title:false, |
|
||||
type:1, |
|
||||
area :["100%","100%"], |
|
||||
content:'<div id="fullChart" style="width: 100%;height: 100%;padding:30px 0px"></div>', |
|
||||
success:function(){ |
|
||||
var fullchart = echarts.init(window.top.document.getElementById('fullChart')); |
|
||||
fullchart.setOption(BarChartOption) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
saveAsImage:{}, |
|
||||
dataZoom: { |
|
||||
yAxisIndex: 'none' |
|
||||
}, |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
//动态加载相关数据 |
|
||||
|
|
||||
|
|
||||
$(function () { |
|
||||
let req = {}; |
|
||||
req.type = type; |
|
||||
req.echartType = "bar"; |
|
||||
getThisUserDepository(); |
|
||||
initBarChartByDateType(req); |
|
||||
}); |
|
||||
|
|
||||
|
|
||||
// 按月加载 |
|
||||
form.on('submit(perMensem)', function () { |
|
||||
let req = {}; |
|
||||
req.type = type; |
|
||||
req.depositoryId = $("#selectDepositoryForChart").val(); |
|
||||
req.dateType = "month"; |
|
||||
req.echartType = "bar"; |
|
||||
initBarChartByDateType(req); |
|
||||
}); |
|
||||
// 按天加载 |
|
||||
form.on('submit(byTheDay)', function () { |
|
||||
let req = {}; |
|
||||
req.type = type; |
|
||||
req.depositoryId = $("#selectDepositoryForChart").val(); |
|
||||
req.dateType = "day"; |
|
||||
req.echartType = "bar"; |
|
||||
initBarChartByDateType(req); |
|
||||
}); |
|
||||
|
|
||||
$('#selectDepositoryForChart').on('change', function (obj) { |
|
||||
let value = obj.target.value; |
|
||||
let req = {}; |
|
||||
req.depositoryId = value; |
|
||||
req.type = type; |
|
||||
req.echartType = "bar"; |
|
||||
initBarChartByDateType(req); |
|
||||
}); |
|
||||
|
|
||||
initBarChartByDateType = function (req) { |
|
||||
$.ajax({ |
|
||||
url: '/repository/getBarChartDataByDateType', |
|
||||
type: 'post', |
|
||||
dataType: "json", |
|
||||
data: JSON.stringify(req), |
|
||||
contentType: "application/json;charset=utf-8", |
|
||||
beforeSend: function () { |
|
||||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
}, |
|
||||
success: function (result) { |
|
||||
layer.close(this.layerIndex); |
|
||||
let data = result.data; |
|
||||
// 日期名称 |
|
||||
let dayNames = data.dayNames; |
|
||||
let series = data.data; |
|
||||
BarChartOption.xAxis.data = dayNames; |
|
||||
BarChartOption.series = series; |
|
||||
BarChart.setOption(BarChartOption); |
|
||||
} |
|
||||
}) |
|
||||
}; |
|
||||
|
|
||||
getThisUserDepository = function () { |
|
||||
$.ajax({ |
|
||||
url: '/repository/getWareHouseVisiblePermissionByUser', |
|
||||
type: 'get', |
|
||||
dataType: "json", |
|
||||
beforeSend: function () { |
|
||||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
}, |
|
||||
success: function (result) { |
|
||||
layer.close(this.layerIndex); |
|
||||
let data = result.data; |
|
||||
let selectItem = $("#selectDepositoryForChart"); |
|
||||
for(let item in data){ |
|
||||
let optionItem = '<option value="'+data[item]+'">'+item+'</option>'; |
|
||||
selectItem.append(optionItem) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
</script> |
|
||||
</body> |
|
||||
</html> |
|
||||
Loading…
Reference in new issue