7 changed files with 314 additions and 1251 deletions
@ -1,621 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html xmlns:th="http://www.w3.org/1999/xhtml"> |
|||
<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.6.3/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/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-container">--> |
|||
<div class="layuimini-main"> |
|||
|
|||
|
|||
<div class="layui-row layui-col-space15"> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">转出物料数量</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${allOutCount}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">转出物料金额</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${allOutPrice}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">出售物料数量</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${OutCount}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">出库物料金额</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${OutPrice}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="layui-row layui-col-space15"> |
|||
<div class="layui-col-xs12 layui-col-md9"> |
|||
<button class="layui-btn" lay-submit lay-filter="thisWeek"> |
|||
 本周  |
|||
</button> |
|||
<button class="layui-btn" lay-submit lay-filter="lastWeek"> |
|||
 上周  |
|||
</button> |
|||
<div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div> |
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
<div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="layui-row layui-col-space15"> |
|||
<div class="layui-col-xs12 layui-col-md6"> |
|||
<div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div> |
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md6"> |
|||
<div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
<!--</div>--> |
|||
|
|||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|||
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
|||
<script> |
|||
layui.use(['layer'], function () { |
|||
var $ = layui.jquery, |
|||
layer = layui.layer, |
|||
form = layui.form; |
|||
/** |
|||
* 折线图 |
|||
*/ |
|||
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); |
|||
|
|||
var optionRecords = { |
|||
title: { |
|||
text: '仓库总量-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: [] |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: [] |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '北京仓库', |
|||
type: 'line', |
|||
stack: '金额', |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: 'top' |
|||
} |
|||
}, |
|||
areaStyle: {}, |
|||
data: [] |
|||
} |
|||
] |
|||
}; |
|||
|
|||
/** |
|||
* 玫瑰图表 |
|||
*/ |
|||
var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden'); |
|||
var optionPies = { |
|||
title: { |
|||
text: '仓库分布图', |
|||
left: 'center' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
left: 'left', |
|||
data: ['外芯仓库', '义乌仓库', '宁波仓库', '杭州仓库', '北京仓库'] |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '昨日占比', |
|||
type: 'pie', |
|||
radius: '55%', |
|||
center: ['50%', '60%'], |
|||
roseType: 'radius', |
|||
data: [ |
|||
{value: 335, name: '外芯仓库'}, |
|||
{value: 310, name: '义乌仓库'}, |
|||
{value: 234, name: '宁波仓库'}, |
|||
{value: 135, name: '杭州仓库'}, |
|||
{value: 368, name: '北京仓库'} |
|||
], |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
|
|||
/** |
|||
* 柱状图 |
|||
*/ |
|||
var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden'); |
|||
var optionDataset = { |
|||
legend: {}, |
|||
tooltip: {}, |
|||
dataset: { |
|||
dimensions: [], |
|||
source: [] |
|||
}, |
|||
xAxis: {type: 'category'}, |
|||
yAxis: {}, |
|||
series: [ |
|||
{type: 'bar'}, |
|||
{type: 'bar'}, |
|||
{type: 'bar'} |
|||
] |
|||
}; |
|||
|
|||
|
|||
/** |
|||
* 中国地图 |
|||
*/ |
|||
var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); |
|||
var optionMap = { |
|||
legend: {}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
showContent: false |
|||
}, |
|||
dataset: { |
|||
source: [] |
|||
}, |
|||
xAxis: {type: 'category'}, |
|||
yAxis: {gridIndex: 0}, |
|||
grid: {top: '55%'}, |
|||
series: [ |
|||
] |
|||
}; |
|||
|
|||
|
|||
//动态加载相关数据 |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back?type=2', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙，稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
if (result.code === 0) { |
|||
echartsRecords.setOption(optionRecords); |
|||
echartsPies.setOption(optionPies); |
|||
echartsDataset.setOption(optionDataset); |
|||
echartsMap.setOption(optionMap); |
|||
|
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
// 饼状图 |
|||
var optionPiesSeries = { |
|||
name: '昨日占比', |
|||
type: 'pie', |
|||
radius: '55%', |
|||
center: ['50%', '60%'], |
|||
roseType: 'radius', |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
}, |
|||
data: [] |
|||
} |
|||
// 柱状图 |
|||
optionDataset = { |
|||
legend: {}, |
|||
tooltip: {}, |
|||
dataset: { |
|||
dimensions: [], |
|||
source: [] |
|||
}, |
|||
series: [] |
|||
}; |
|||
for (let i = 0; i < result.data.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.data.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data.depository_data.data[result.data.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
optionPiesSeries.data.push({ |
|||
value: result.data.depository_data.yesterdayData[result.data.depository_name[i]], |
|||
name: result.data.depository_name[i] |
|||
}) |
|||
} |
|||
var dimensions = result.data.depository_data.sourceList[result.data.depository_data.sourceList.length - 1]; |
|||
optionDataset.dataset.dimensions = dimensions; |
|||
for (let i = result.data.depository_data.sourceList.length - 2; i >= 0; i--) { |
|||
optionDataset.dataset.source.push(result.data.depository_data.sourceList[i]) |
|||
} |
|||
for (let i = 0; i < dimensions.length - 1; i++) { |
|||
optionDataset.series.push({type: 'bar'}) |
|||
} |
|||
for (let i = 0; i < result.data.depository_data.mapData.mapDataList.length; i++) { |
|||
optionMap.dataset.source.push(result.data.depository_data.mapData.mapDataList[i]); |
|||
if(i < result.data.depository_data.mapData.mapDataList.length - 1) { |
|||
optionMap.series.push({type: 'line', smooth: true, seriesLayoutBy: 'row'}); |
|||
} |
|||
} |
|||
var month = new Date().getMonth() + 1; |
|||
optionMap.series.push( |
|||
{ |
|||
type: 'pie', |
|||
// id: 'pie', |
|||
radius: '30%', |
|||
center: ['50%', '25%'], |
|||
label: { |
|||
formatter: '{b}: {@'+month+'月} ({d}%)' |
|||
}, |
|||
encode: { |
|||
itemName: 'product', |
|||
value: month+'月', |
|||
tooltip: month+'月' |
|||
} |
|||
} |
|||
); |
|||
optionRecords = { |
|||
title: { |
|||
text: '出库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.data.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.data.depository_data.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
optionPies = { |
|||
title: { |
|||
text: '仓库分布图', |
|||
left: 'center' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
left: 'left', |
|||
data: result.data.depository_name |
|||
}, |
|||
series: optionPiesSeries |
|||
}; |
|||
echartsRecords.setOption(optionRecords); |
|||
echartsPies.setOption(optionPies); |
|||
echartsDataset.setOption(optionDataset); |
|||
echartsMap.setOption(optionMap); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
// echarts 窗口缩放自适应 |
|||
window.onresize = function () { |
|||
echartsRecords.resize(); |
|||
}; |
|||
|
|||
|
|||
// 获取本周 |
|||
form.on('submit(thisWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_thisWeek?type=2', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status != 200) { |
|||
layer.alert("系统繁忙，稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
echartsRecords.setOption(optionRecords); |
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
for (let i = 0; i < result.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data[result.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
} |
|||
optionRecords = { |
|||
title: { |
|||
text: '出库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
echartsRecords.setOption(optionRecords); |
|||
} |
|||
}) |
|||
}) |
|||
|
|||
// 获取上周 |
|||
form.on('submit(lastWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_lastWeek?type=2', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status != 200) { |
|||
layer.alert("系统繁忙，稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
echartsRecords.setOption(optionRecords); |
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
for (let i = 0; i < result.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data[result.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
} |
|||
optionRecords = { |
|||
title: { |
|||
text: '出库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
echartsRecords.setOption(optionRecords); |
|||
} |
|||
}) |
|||
}) |
|||
$('body').on('click', '[data-refresh]', function () { |
|||
location.reload(); |
|||
}) |
|||
|
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,300 @@ |
|||
<!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.6.3/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-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-container">--> |
|||
<div class="layuimini-main"> |
|||
|
|||
|
|||
<div class="layui-row layui-col-space15"> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">出库物料</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs6 layui-col-md6 top-panel-number"> |
|||
<div class="layui-card-header">数量</div> |
|||
<span th:text="${allOutCount}"></span> |
|||
</div> |
|||
|
|||
<div class="layui-col-xs6 layui-col-md6 top-panel-number" th:style="'display:'+${display}"> |
|||
<div class="layui-card-header">金额</div> |
|||
<span th:text="${allOutPrice}"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">实际物料出库</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs6 layui-col-md6 top-panel-number"> |
|||
<div class="layui-card-header">数量</div> |
|||
<span th:text="${OutCount}"></span> |
|||
</div> |
|||
<div class="layui-col-xs6 layui-col-md6 top-panel-number" th:style="'display:'+${display}"> |
|||
<div class="layui-card-header">金额</div> |
|||
<span th:text="${OutPrice}"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<div class="layui-collapse" lay-accordion> |
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">面积图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<button class="layui-btn" lay-submit lay-filter="thisWeek"> |
|||
 本周  |
|||
</button> |
|||
<button class="layui-btn" lay-submit lay-filter="lastWeek"> |
|||
 上周  |
|||
</button> |
|||
<select id="selectDepositoryForChart" class="form-control"> |
|||
|
|||
</select> |
|||
<div id="echarts-line" style="background-color:#ffffff;padding: 10px;height: 400px"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">旭日图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<div id="echarts-sunburst-chart" style="background-color:#ffffff;padding: 10px;height:400px;"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
<!--</div>--> |
|||
|
|||
<script src="/static/lib/layui-v2.6.3/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> |
|||
layui.use(['layer', 'element'], function () { |
|||
var $ = layui.jquery, |
|||
layer = layui.layer, |
|||
element = layui.element, |
|||
form = layui.form; |
|||
|
|||
// 旭日图 |
|||
var echartSunburstChart = echarts.init(document.getElementById('echarts-sunburst-chart')); |
|||
var optionSunburstChart = { |
|||
title: { |
|||
textStyle: { |
|||
fontSize: 14, |
|||
align: 'center' |
|||
}, |
|||
subtextStyle: { |
|||
align: 'center' |
|||
}, |
|||
}, |
|||
series: { |
|||
type: 'sunburst', |
|||
data: [], |
|||
radius: [0, '95%'], |
|||
sort: undefined, |
|||
emphasis: { |
|||
focus: 'ancestor' |
|||
}, |
|||
levels: [ |
|||
{}, |
|||
{ |
|||
r0: '15%', |
|||
r: '35%', |
|||
itemStyle: { |
|||
borderWidth: 2 |
|||
}, |
|||
label: { |
|||
rotate: 'tangential' |
|||
} |
|||
}, |
|||
{ |
|||
r0: '35%', |
|||
r: '70%', |
|||
label: { |
|||
align: 'right' |
|||
} |
|||
}, |
|||
{ |
|||
r0: '70%', |
|||
r: '72%', |
|||
label: { |
|||
position: 'outside', |
|||
padding: 3, |
|||
silent: false |
|||
}, |
|||
itemStyle: { |
|||
borderWidth: 3 |
|||
} |
|||
} |
|||
] |
|||
} |
|||
}; |
|||
|
|||
|
|||
let LineChartData = {}; |
|||
|
|||
// 柱状图 |
|||
var echartLineChart = echarts.init(document.getElementById('echarts-line')); |
|||
var optionLineChart = { |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: [] |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: [] |
|||
|
|||
}; |
|||
|
|||
|
|||
|
|||
//动态加载相关数据 |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back?type=2', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙，稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
|
|||
if (result.code === 0) { |
|||
let data = result.data; |
|||
|
|||
let depositoryItem = data.depository; |
|||
let keys = Object.keys(depositoryItem); |
|||
for (let i = 0; i < keys.length; i++) { |
|||
let key = keys[i]; |
|||
$("#selectDepositoryForChart").append(new Option(key,depositoryItem[key])); |
|||
} |
|||
|
|||
|
|||
optionSunburstChart.series.data =data.depository_data.sunburstChartData; |
|||
echartSunburstChart.setOption(optionSunburstChart); |
|||
|
|||
|
|||
LineChartData = data.depository_data.lineChartData; |
|||
optionLineChart.series = LineChartData[depositoryItem[keys[0]]]; |
|||
optionLineChart.xAxis.data = data.depository_data.week; |
|||
echartLineChart.setOption(optionLineChart); |
|||
} |
|||
|
|||
} |
|||
}); |
|||
|
|||
|
|||
form.on('submit(thisWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_thisWeek?type=2', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙，稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
LineChartData = result.data; |
|||
let value = $("#selectDepositoryForChart").val(); |
|||
optionLineChart.series = LineChartData[value]; |
|||
echartLineChart.setOption(optionLineChart); |
|||
} |
|||
}) |
|||
}); |
|||
|
|||
form.on('submit(lastWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_lastWeek?type=2', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙，稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
LineChartData = result.data; |
|||
let value = $("#selectDepositoryForChart").val(); |
|||
optionLineChart.series = LineChartData[value]; |
|||
echartLineChart.setOption(optionLineChart); |
|||
} |
|||
}) |
|||
}); |
|||
|
|||
$('#selectDepositoryForChart').on('change', function (obj) { |
|||
let value = obj.target.value; |
|||
optionLineChart.series = LineChartData[value]; |
|||
echartLineChart.setOption(optionLineChart); |
|||
}); |
|||
|
|||
|
|||
|
|||
}); |
|||
|
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,621 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html xmlns:th="http://www.w3.org/1999/xhtml"> |
|||
<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.6.3/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/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-container">--> |
|||
<div class="layuimini-main"> |
|||
|
|||
|
|||
<div class="layui-row layui-col-space15"> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">转出物料数量</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${allOutCount}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">转出物料金额</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${allOutPrice}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">出售物料数量</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${OutCount}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">出库物料金额</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${OutPrice}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="layui-row layui-col-space15"> |
|||
<div class="layui-col-xs12 layui-col-md9"> |
|||
<button class="layui-btn" lay-submit lay-filter="thisWeek"> |
|||
 本周  |
|||
</button> |
|||
<button class="layui-btn" lay-submit lay-filter="lastWeek"> |
|||
 上周  |
|||
</button> |
|||
<div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div> |
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
<div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="layui-row layui-col-space15"> |
|||
<div class="layui-col-xs12 layui-col-md6"> |
|||
<div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div> |
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md6"> |
|||
<div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
<!--</div>--> |
|||
|
|||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|||
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
|||
<script> |
|||
layui.use(['layer'], function () { |
|||
var $ = layui.jquery, |
|||
layer = layui.layer, |
|||
form = layui.form; |
|||
/** |
|||
* 折线图 |
|||
*/ |
|||
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); |
|||
|
|||
var optionRecords = { |
|||
title: { |
|||
text: '仓库总量-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: [] |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: [] |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '北京仓库', |
|||
type: 'line', |
|||
stack: '金额', |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: 'top' |
|||
} |
|||
}, |
|||
areaStyle: {}, |
|||
data: [] |
|||
} |
|||
] |
|||
}; |
|||
|
|||
/** |
|||
* 玫瑰图表 |
|||
*/ |
|||
var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden'); |
|||
var optionPies = { |
|||
title: { |
|||
text: '仓库分布图', |
|||
left: 'center' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
left: 'left', |
|||
data: ['外芯仓库', '义乌仓库', '宁波仓库', '杭州仓库', '北京仓库'] |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '昨日占比', |
|||
type: 'pie', |
|||
radius: '55%', |
|||
center: ['50%', '60%'], |
|||
roseType: 'radius', |
|||
data: [ |
|||
{value: 335, name: '外芯仓库'}, |
|||
{value: 310, name: '义乌仓库'}, |
|||
{value: 234, name: '宁波仓库'}, |
|||
{value: 135, name: '杭州仓库'}, |
|||
{value: 368, name: '北京仓库'} |
|||
], |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
|
|||
/** |
|||
* 柱状图 |
|||
*/ |
|||
var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden'); |
|||
var optionDataset = { |
|||
legend: {}, |
|||
tooltip: {}, |
|||
dataset: { |
|||
dimensions: [], |
|||
source: [] |
|||
}, |
|||
xAxis: {type: 'category'}, |
|||
yAxis: {}, |
|||
series: [ |
|||
{type: 'bar'}, |
|||
{type: 'bar'}, |
|||
{type: 'bar'} |
|||
] |
|||
}; |
|||
|
|||
|
|||
/** |
|||
* 中国地图 |
|||
*/ |
|||
var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); |
|||
var optionMap = { |
|||
legend: {}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
showContent: false |
|||
}, |
|||
dataset: { |
|||
source: [] |
|||
}, |
|||
xAxis: {type: 'category'}, |
|||
yAxis: {gridIndex: 0}, |
|||
grid: {top: '55%'}, |
|||
series: [ |
|||
] |
|||
}; |
|||
|
|||
|
|||
//动态加载相关数据 |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back?type=2', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙，稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
if (result.code === 0) { |
|||
echartsRecords.setOption(optionRecords); |
|||
echartsPies.setOption(optionPies); |
|||
echartsDataset.setOption(optionDataset); |
|||
echartsMap.setOption(optionMap); |
|||
|
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
// 饼状图 |
|||
var optionPiesSeries = { |
|||
name: '昨日占比', |
|||
type: 'pie', |
|||
radius: '55%', |
|||
center: ['50%', '60%'], |
|||
roseType: 'radius', |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
}, |
|||
data: [] |
|||
} |
|||
// 柱状图 |
|||
optionDataset = { |
|||
legend: {}, |
|||
tooltip: {}, |
|||
dataset: { |
|||
dimensions: [], |
|||
source: [] |
|||
}, |
|||
series: [] |
|||
}; |
|||
for (let i = 0; i < result.data.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.data.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data.depository_data.data[result.data.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
optionPiesSeries.data.push({ |
|||
value: result.data.depository_data.yesterdayData[result.data.depository_name[i]], |
|||
name: result.data.depository_name[i] |
|||
}) |
|||
} |
|||
var dimensions = result.data.depository_data.sourceList[result.data.depository_data.sourceList.length - 1]; |
|||
optionDataset.dataset.dimensions = dimensions; |
|||
for (let i = result.data.depository_data.sourceList.length - 2; i >= 0; i--) { |
|||
optionDataset.dataset.source.push(result.data.depository_data.sourceList[i]) |
|||
} |
|||
for (let i = 0; i < dimensions.length - 1; i++) { |
|||
optionDataset.series.push({type: 'bar'}) |
|||
} |
|||
for (let i = 0; i < result.data.depository_data.mapData.mapDataList.length; i++) { |
|||
optionMap.dataset.source.push(result.data.depository_data.mapData.mapDataList[i]); |
|||
if(i < result.data.depository_data.mapData.mapDataList.length - 1) { |
|||
optionMap.series.push({type: 'line', smooth: true, seriesLayoutBy: 'row'}); |
|||
} |
|||
} |
|||
var month = new Date().getMonth() + 1; |
|||
optionMap.series.push( |
|||
{ |
|||
type: 'pie', |
|||
// id: 'pie', |
|||
radius: '30%', |
|||
center: ['50%', '25%'], |
|||
label: { |
|||
formatter: '{b}: {@'+month+'月} ({d}%)' |
|||
}, |
|||
encode: { |
|||
itemName: 'product', |
|||
value: month+'月', |
|||
tooltip: month+'月' |
|||
} |
|||
} |
|||
); |
|||
optionRecords = { |
|||
title: { |
|||
text: '出库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.data.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.data.depository_data.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
optionPies = { |
|||
title: { |
|||
text: '仓库分布图', |
|||
left: 'center' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
left: 'left', |
|||
data: result.data.depository_name |
|||
}, |
|||
series: optionPiesSeries |
|||
}; |
|||
echartsRecords.setOption(optionRecords); |
|||
echartsPies.setOption(optionPies); |
|||
echartsDataset.setOption(optionDataset); |
|||
echartsMap.setOption(optionMap); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
// echarts 窗口缩放自适应 |
|||
window.onresize = function () { |
|||
echartsRecords.resize(); |
|||
}; |
|||
|
|||
|
|||
// 获取本周 |
|||
form.on('submit(thisWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_thisWeek?type=2', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status != 200) { |
|||
layer.alert("系统繁忙，稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
echartsRecords.setOption(optionRecords); |
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
for (let i = 0; i < result.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data[result.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
} |
|||
optionRecords = { |
|||
title: { |
|||
text: '出库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
echartsRecords.setOption(optionRecords); |
|||
} |
|||
}) |
|||
}) |
|||
|
|||
// 获取上周 |
|||
form.on('submit(lastWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_lastWeek?type=2', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status != 200) { |
|||
layer.alert("系统繁忙，稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
echartsRecords.setOption(optionRecords); |
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
for (let i = 0; i < result.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data[result.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
} |
|||
optionRecords = { |
|||
title: { |
|||
text: '出库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
echartsRecords.setOption(optionRecords); |
|||
} |
|||
}) |
|||
}) |
|||
$('body').on('click', '[data-refresh]', function () { |
|||
location.reload(); |
|||
}) |
|||
|
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue