|
|
|
@ -8,6 +8,7 @@ |
|
|
|
<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 { |
|
|
|
@ -40,7 +41,7 @@ |
|
|
|
<div class="layui-collapse" lay-accordion> |
|
|
|
|
|
|
|
<div class="layui-colla-item"> |
|
|
|
<h2 class="layui-colla-title">折线图</h2> |
|
|
|
<h2 class="layui-colla-title">面积图</h2> |
|
|
|
<div class="layui-colla-content layui-show"> |
|
|
|
<button class="layui-btn" lay-submit lay-filter="thisWeek"> |
|
|
|
 本周  |
|
|
|
@ -48,33 +49,32 @@ |
|
|
|
<button class="layui-btn" lay-submit lay-filter="lastWeek"> |
|
|
|
 上周  |
|
|
|
</button> |
|
|
|
<div id="echarts-records" style="background-color:#ffffff;min-height:1000px;padding: 10px"> |
|
|
|
<select id="selectDepositoryForLineChart" 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> |
|
|
|
<h2 class="layui-colla-title">旭日图</h2> |
|
|
|
<div class="layui-colla-content layui-show"> |
|
|
|
<div id="echarts-pies" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div> |
|
|
|
<div id="echarts-sunburst-chart" style="background-color:#ffffff;padding: 10px;height:400px;"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="layui-colla-item"> |
|
|
|
<h2 class="layui-colla-title">柱状图</h2> |
|
|
|
<h2 class="layui-colla-title">出入库对比</h2> |
|
|
|
<div class="layui-colla-content layui-show"> |
|
|
|
<div id="echarts-dataset" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<select id="selectDepositoryForBarChart" class="form-control"> |
|
|
|
|
|
|
|
<div class="layui-colla-item"> |
|
|
|
<h2 class="layui-colla-title">折线比例图</h2> |
|
|
|
<div class="layui-colla-content layui-show"> |
|
|
|
<div id="echarts-map" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div> |
|
|
|
</select> |
|
|
|
<div id="echarts-bar-chart" style="background-color:#ffffff;padding: 10px;height:400px;"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
@ -83,270 +83,104 @@ |
|
|
|
|
|
|
|
<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'], function () { |
|
|
|
layui.use(['layer', 'element'], function () { |
|
|
|
var $ = layui.jquery, |
|
|
|
layer = layui.layer, |
|
|
|
element = layui.element, |
|
|
|
form = layui.form; |
|
|
|
/** |
|
|
|
* 折线图 |
|
|
|
*/ |
|
|
|
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); |
|
|
|
|
|
|
|
var optionRecords = { |
|
|
|
// 旭日图 |
|
|
|
var echartSunburstChart = echarts.init(document.getElementById('echarts-sunburst-chart')); |
|
|
|
var optionSunburstChart = { |
|
|
|
title: { |
|
|
|
text: '仓库库存-报表图' |
|
|
|
textStyle: { |
|
|
|
fontSize: 14, |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'cross', |
|
|
|
label: { |
|
|
|
backgroundColor: '#6a7985' |
|
|
|
} |
|
|
|
} |
|
|
|
subtextStyle: { |
|
|
|
align: 'center' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: [] |
|
|
|
}, |
|
|
|
toolbox: { |
|
|
|
feature: { |
|
|
|
saveAsImage: {} |
|
|
|
} |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: '3%', |
|
|
|
right: '4%', |
|
|
|
bottom: '3%', |
|
|
|
containLabel: true |
|
|
|
series: { |
|
|
|
type: 'sunburst', |
|
|
|
data: [], |
|
|
|
radius: [0, '95%'], |
|
|
|
sort: undefined, |
|
|
|
emphasis: { |
|
|
|
focus: 'ancestor' |
|
|
|
}, |
|
|
|
xAxis: [ |
|
|
|
{ |
|
|
|
type: 'category', |
|
|
|
boundaryGap: false, |
|
|
|
data: [] |
|
|
|
} |
|
|
|
], |
|
|
|
yAxis: [ |
|
|
|
levels: [ |
|
|
|
{}, |
|
|
|
{ |
|
|
|
type: 'value' |
|
|
|
r0: '15%', |
|
|
|
r: '35%', |
|
|
|
itemStyle: { |
|
|
|
borderWidth: 2 |
|
|
|
}, |
|
|
|
label: { |
|
|
|
rotate: 'tangential' |
|
|
|
} |
|
|
|
], |
|
|
|
series: [ |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '北京仓库', |
|
|
|
type: 'line', |
|
|
|
stack: '金额', |
|
|
|
r0: '35%', |
|
|
|
r: '70%', |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
show: true, |
|
|
|
position: 'top' |
|
|
|
align: 'right' |
|
|
|
} |
|
|
|
}, |
|
|
|
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: { |
|
|
|
r0: '70%', |
|
|
|
r: '72%', |
|
|
|
label: { |
|
|
|
position: 'outside', |
|
|
|
padding: 3, |
|
|
|
silent: false |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
shadowBlur: 10, |
|
|
|
shadowOffsetX: 0, |
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
|
borderWidth: 3 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* 柱状图 |
|
|
|
*/ |
|
|
|
var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden'); |
|
|
|
var optionDataset = { |
|
|
|
legend: {}, |
|
|
|
tooltip: {}, |
|
|
|
dataset: { |
|
|
|
dimensions: [], |
|
|
|
source: [] |
|
|
|
}, |
|
|
|
xAxis: {type: 'category'}, |
|
|
|
yAxis: {}, |
|
|
|
series: [ |
|
|
|
] |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* 中国地图 |
|
|
|
*/ |
|
|
|
var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); |
|
|
|
var optionMap = { |
|
|
|
legend: {}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
showContent: true |
|
|
|
}, |
|
|
|
dataset: { |
|
|
|
source: [] |
|
|
|
}, |
|
|
|
xAxis: {type: 'category'}, |
|
|
|
yAxis: {gridIndex: 0}, |
|
|
|
grid: {top: '55%'}, |
|
|
|
series: [] |
|
|
|
}; |
|
|
|
let LineChartData = {}; |
|
|
|
let inBarChartData = {}; |
|
|
|
let outBarChartData = {}; |
|
|
|
|
|
|
|
|
|
|
|
//动态加载相关数据 |
|
|
|
$.ajax({ |
|
|
|
url: '/repository/layui/echart_back?type=0', |
|
|
|
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']}); |
|
|
|
// 面积图 |
|
|
|
var echartLineChart = echarts.init(document.getElementById('echarts-line')); |
|
|
|
var optionLineChart = { |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
boundaryGap: false, |
|
|
|
data: [] |
|
|
|
}, |
|
|
|
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)' |
|
|
|
} |
|
|
|
yAxis: { |
|
|
|
type: 'value' |
|
|
|
}, |
|
|
|
data: [] |
|
|
|
}; |
|
|
|
// 柱状图 |
|
|
|
optionDataset = { |
|
|
|
legend: {}, |
|
|
|
tooltip: {}, |
|
|
|
dataset: { |
|
|
|
dimensions: [], |
|
|
|
source: [] |
|
|
|
tooltip:{ |
|
|
|
trigger:"axis", |
|
|
|
}, |
|
|
|
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.ThisWeekInventory[result.data.depository_name[i]], |
|
|
|
areaStyle: {} |
|
|
|
}); |
|
|
|
optionPiesSeries.data.push({ |
|
|
|
value: result.data.depository_data.todayInventory[result.data.depository_name[i].split(",")[0]], |
|
|
|
name: result.data.depository_name[i] |
|
|
|
}) |
|
|
|
} |
|
|
|
var dimensions = result.data.depository_data.sourceListByMonth[result.data.depository_data.sourceListByMonth.length - 1]; |
|
|
|
optionDataset.dataset.dimensions = dimensions; |
|
|
|
for (let i = result.data.depository_data.sourceListByMonth.length - 2; i >= 0; i--) { |
|
|
|
optionDataset.dataset.source.push(result.data.depository_data.sourceListByMonth[i]) |
|
|
|
} |
|
|
|
for (let i = 0; i < dimensions.length - 1; i++) { |
|
|
|
optionDataset.series.push({type: 'bar'}) |
|
|
|
} |
|
|
|
|
|
|
|
for (let i = 0; i < result.data.depository_data.MapInventory.mapDataList.length; i++) { |
|
|
|
optionMap.dataset.source.push(result.data.depository_data.MapInventory.mapDataList[i]); |
|
|
|
if (i < result.data.depository_data.MapInventory.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: '仓库库存-报表图' |
|
|
|
}, |
|
|
|
// 柱状图 |
|
|
|
var echartBarChart = echarts.init(document.getElementById('echarts-bar-chart')); |
|
|
|
var optionBarChart = { |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'cross', |
|
|
|
label: { |
|
|
|
backgroundColor: '#6a7985' |
|
|
|
} |
|
|
|
type: 'shadow' |
|
|
|
} |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: result.data.depository_name |
|
|
|
}, |
|
|
|
toolbox: { |
|
|
|
feature: { |
|
|
|
saveAsImage: {} |
|
|
|
} |
|
|
|
data: [] |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: '3%', |
|
|
|
@ -356,47 +190,74 @@ |
|
|
|
}, |
|
|
|
xAxis: [ |
|
|
|
{ |
|
|
|
type: 'category', |
|
|
|
boundaryGap: false, |
|
|
|
data: result.data.depository_data.week |
|
|
|
type: 'value' |
|
|
|
} |
|
|
|
], |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
type: 'value' |
|
|
|
type: 'category', |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
data: [] |
|
|
|
} |
|
|
|
], |
|
|
|
series: optionRecordsSeries |
|
|
|
series: [] |
|
|
|
}; |
|
|
|
optionPies = { |
|
|
|
title: { |
|
|
|
text: '仓库分布图', |
|
|
|
left: 'center' |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|
|
|
|
|
|
|
//动态加载相关数据 |
|
|
|
$.ajax({ |
|
|
|
url: '/repository/layui/echart_back?type=0', |
|
|
|
type: 'get', |
|
|
|
async: true, |
|
|
|
dataType: "json", |
|
|
|
complete: function (XHR, TS) { |
|
|
|
if (XHR.status !== 200) { |
|
|
|
layer.alert("系统繁忙，稍后重试"); |
|
|
|
} |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
orient: 'vertical', |
|
|
|
left: 'left', |
|
|
|
data: result.data.depository_name |
|
|
|
beforeSend: function () { |
|
|
|
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
|
|
}, |
|
|
|
series: optionPiesSeries |
|
|
|
}; |
|
|
|
echartsRecords.setOption(optionRecords); |
|
|
|
echartsPies.setOption(optionPies); |
|
|
|
echartsDataset.setOption(optionDataset); |
|
|
|
echartsMap.setOption(optionMap); |
|
|
|
} |
|
|
|
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]; |
|
|
|
$("#selectDepositoryForLineChart").append(new Option(key, depositoryItem[key])); |
|
|
|
$("#selectDepositoryForBarChart").append(new Option(key, depositoryItem[key])); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
let depositoryKey = depositoryItem[keys[0]]; |
|
|
|
let week = data.depository_data.week; |
|
|
|
|
|
|
|
|
|
|
|
optionSunburstChart.series.data = data.depository_data.sunburstChartData; |
|
|
|
echartSunburstChart.setOption(optionSunburstChart); |
|
|
|
|
|
|
|
// echarts 窗口缩放自适应 |
|
|
|
window.onresize = function () { |
|
|
|
echartsRecords.resize(); |
|
|
|
}; |
|
|
|
|
|
|
|
LineChartData = data.depository_data.lineChartData; |
|
|
|
optionLineChart.series = LineChartData[depositoryKey]; |
|
|
|
optionLineChart.xAxis.data = week; |
|
|
|
echartLineChart.setOption(optionLineChart); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
optionBarChart.legend.data = ["入库","出库"]; |
|
|
|
optionBarChart.yAxis[0].data = week; |
|
|
|
inBarChartData = data.depository_data.barChartData["in"]; |
|
|
|
outBarChartData = data.depository_data.barChartData["out"]; |
|
|
|
optionBarChart.series=[inBarChartData[depositoryKey],outBarChartData[depositoryKey]]; |
|
|
|
echartBarChart.setOption(optionBarChart) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
form.on('submit(thisWeek)', function () { |
|
|
|
@ -406,7 +267,7 @@ |
|
|
|
async: true, |
|
|
|
dataType: "json", |
|
|
|
complete: function (XHR, TS) { |
|
|
|
if (XHR.status != 200) { |
|
|
|
if (XHR.status !== 200) { |
|
|
|
layer.alert("系统繁忙，稍后重试"); |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -415,60 +276,10 @@ |
|
|
|
}, |
|
|
|
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.ThisWeekInventory[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); |
|
|
|
LineChartData = result.data; |
|
|
|
let value = $("#selectDepositoryForLineChart").val(); |
|
|
|
optionLineChart.series = LineChartData[value]; |
|
|
|
echartLineChart.setOption(optionLineChart); |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
@ -480,7 +291,7 @@ |
|
|
|
async: true, |
|
|
|
dataType: "json", |
|
|
|
complete: function (XHR, TS) { |
|
|
|
if (XHR.status != 200) { |
|
|
|
if (XHR.status !== 200) { |
|
|
|
layer.alert("系统繁忙，稍后重试"); |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -489,66 +300,28 @@ |
|
|
|
}, |
|
|
|
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.BeforeInventory[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); |
|
|
|
LineChartData = result.data; |
|
|
|
let value = $("#selectDepositoryForLineChart").val(); |
|
|
|
optionLineChart.series = LineChartData[value]; |
|
|
|
echartLineChart.setOption(optionLineChart); |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
$('body').on('click', '[data-refresh]', function () { |
|
|
|
location.reload(); |
|
|
|
}) |
|
|
|
|
|
|
|
$('#selectDepositoryForLineChart').on('change', function (obj) { |
|
|
|
let value = obj.target.value; |
|
|
|
optionLineChart.series = LineChartData[value]; |
|
|
|
echartLineChart.setOption(optionLineChart); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
$('#selectDepositoryForBarChart').on('change', function (obj) { |
|
|
|
let value = obj.target.value; |
|
|
|
optionBarChart.series=[inBarChartData[value],outBarChartData[value]]; |
|
|
|
echartBarChart.setOption(optionBarChart); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
|
