pfz_smile
/
depositroy
2
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

修改本地移动端库存可视化页面

lwx_dev
erdanergou 3 years ago
parent
b005bd25a5
commit
9674ac9db7
3 changed files with 376 additions and 1205 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 509
      src/main/resources/templates/pages/chart/chart-in_back.html
  2. 529
      src/main/resources/templates/pages/chart/chart-out_back.html
  3. 543
      src/main/resources/templates/pages/chart/chart-stock_back.html

509
src/main/resources/templates/pages/chart/chart-in_back.html
View File

@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=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/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/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"> <link rel="stylesheet" href="/static/css/public.css" media="all">
<style> <style>
@ -109,7 +110,7 @@
<div class="layui-collapse" lay-accordion> <div class="layui-collapse" lay-accordion>
<div class="layui-colla-item"> <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 class="layui-colla-content layui-show">
<button class="layui-btn" lay-submit lay-filter="thisWeek"> <button class="layui-btn" lay-submit lay-filter="thisWeek">
&emsp;本周&emsp; &emsp;本周&emsp;
@ -117,30 +118,18 @@
<button class="layui-btn" lay-submit lay-filter="lastWeek"> <button class="layui-btn" lay-submit lay-filter="lastWeek">
&emsp;上周&emsp; &emsp;上周&emsp;
</button> </button>
<div id="echarts-records" style="background-color:#ffffff;min-height:1000px;padding: 10px"> <select id="selectDepositoryForChart" class="form-control">
</div>
</div>
</div>
<div class="layui-colla-item"> </select>
<h2 class="layui-colla-title">饼图</h2> <div id="echarts-line" style="background-color:#ffffff;padding: 10px;height: 400px">
<div class="layui-colla-content layui-show"> </div>
<div id="echarts-pies" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div>
</div>
</div>
<div class="layui-colla-item">
<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>
</div> </div>
<div class="layui-colla-item"> <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 class="layui-colla-content layui-show">
<div id="echarts-map" 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> </div>
@ -151,156 +140,88 @@
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> <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/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/static/lib/echarts/echarts.js" charset="utf-8"></script>
<script> <script>
layui.use(['layer', 'element'], function () { layui.use(['layer', 'element'], function () {
var $ = layui.jquery, var $ = layui.jquery,
layer = layui.layer, layer = layui.layer,
echarts = layui.echarts,
element = layui.element, element = layui.element,
form = layui.form; 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: { title: {
text: '入库仓库-报表图', textStyle: {
}, fontSize: 14,
tooltip: { align: 'center'
trigger: 'axis', },
axisPointer: { subtextStyle: {
type: 'cross', align: 'center'
label: { },
backgroundColor: '#6a7985'
}
}
},
legend: {
data: []
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}, },
xAxis: [ series: {
{ type: 'sunburst',
type: 'category', data: [],
boundaryGap: false, radius: [0, '95%'],
data: [] sort: undefined,
} emphasis: {
], focus: 'ancestor'
yAxis: [ },
{ levels: [
type: 'value' {},
} {
], r0: '15%',
series: [ r: '35%',
{ itemStyle: {
name: '北京仓库', borderWidth: 2
type: 'line', },
stack: '金额', label: {
label: { rotate: 'tangential'
normal: {
show: true,
position: 'top'
} }
}, },
areaStyle: {}, {
data: [] r0: '35%',
} r: '70%',
] label: {
}; align: 'right'
}
/** },
* 玫瑰图表 {
*/ r0: '70%',
var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden'); r: '72%',
var optionPies = { label: {
title: { position: 'outside',
text: '仓库分布图', padding: 3,
left: 'center' silent: false
}, },
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: { itemStyle: {
shadowBlur: 10, borderWidth: 3
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
} }
} }
} ]
] }
}; };
/** let LineChartData = {};
* 柱状图
*/
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 echartLineChart = echarts.init(document.getElementById('echarts-line'));
*/ var optionLineChart = {
var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); xAxis: {
var optionMap = { type: 'category',
legend: {}, boundaryGap: false,
tooltip: { data: []
trigger: 'axis', },
showContent: true yAxis: {
type: 'value'
}, },
dataset: { tooltip:{
source: [] trigger:"axis",
}, },
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [] series: []
}; };
@ -320,174 +241,40 @@
}, },
success: function (result) { success: function (result) {
layer.close(this.layerIndex); 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: []
},
xAxis: {type: 'category'},
yAxis: {},
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] if (result.code === 0) {
optionDataset.dataset.dimensions = dimensions; let data = result.data;
for (let i = result.data.depository_data.sourceList.length - 2; i >= 0; i--) { let depositoryItem = data.depository;
optionDataset.dataset.source.push(result.data.depository_data.sourceList[i]) let keys = Object.keys(depositoryItem);
for (let i = 0; i < keys.length; i++) {
let key = keys[i];
$("#selectDepositoryForChart").append(new Option(key, depositoryItem[key]));
} }
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'})
}
}
optionSunburstChart.series.data = data.depository_data.sunburstChartData;
echartSunburstChart.setOption(optionSunburstChart);
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); LineChartData = data.depository_data.lineChartData;
echartsPies.setOption(optionPies); optionLineChart.series = LineChartData[depositoryItem[keys[0]]];
echartsDataset.setOption(optionDataset); optionLineChart.xAxis.data = data.depository_data.week;
echartsMap.setOption(optionMap); echartLineChart.setOption(optionLineChart);
} }
} }
}); });
// echarts 窗口缩放自适应
window.onresize = function () {
echartsRecords.resize();
};
form.on('submit(thisWeek)', function () { form.on('submit(thisWeek)', function () {
$.ajax({ $.ajax({
url: '/repository/layui/echart_back_thisWeek?type=1', url: '/repository/layui/echart_back_thisWeek?type=1',
type: 'get', type: 'get',
async: true, async: true,
dataType: "json", dataType: "json",
complete: function (XHR, TS) { complete: function (XHR, TS) {
if (XHR.status != 200) { if (XHR.status !== 200) {
layer.alert("系统繁忙，稍后重试"); layer.alert("系统繁忙，稍后重试");
} }
}, },
@ -496,60 +283,10 @@
}, },
success: function (result) { success: function (result) {
layer.close(this.layerIndex); layer.close(this.layerIndex);
echartsRecords.setOption(optionRecords); LineChartData = result.data;
// 折线图 let value = $("#selectDepositoryForChart").val();
var optionRecordsSeries = []; optionLineChart.series = LineChartData[value];
for (let i = 0; i < result.depository_name.length; i++) { echartLineChart.setOption(optionLineChart);
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);
} }
}) })
}); });
@ -570,67 +307,21 @@
}, },
success: function (result) { success: function (result) {
layer.close(this.layerIndex); layer.close(this.layerIndex);
echartsRecords.setOption(optionRecords); LineChartData = result.data;
// 折线图 let value = $("#selectDepositoryForChart").val();
var optionRecordsSeries = []; optionLineChart.series = LineChartData[value];
for (let i = 0; i < result.depository_name.length; i++) { echartLineChart.setOption(optionLineChart);
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);
} }
}) })
}) });
$('#selectDepositoryForChart').on('change', function (obj) {
let value = obj.target.value;
optionLineChart.series = LineChartData[value];
echartLineChart.setOption(optionLineChart);
});
$('body').on('click', '[data-refresh]', function () {
location.reload();
})
}); });
</script> </script>

529
src/main/resources/templates/pages/chart/chart-out_back.html
View File

@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=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/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/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"> <link rel="stylesheet" href="/static/css/public.css" media="all">
<style> <style>
.top-panel { .top-panel {
@ -48,7 +49,8 @@
<span th:text="${allOutCount}"></span> <span th:text="${allOutCount}"></span>
</div> </div>
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> <div class="layui-col-xs5 layui-col-md5 top-panel-tips">
比昨天 <a style="color: #1aa094" th:text="${outAllCountRadio > 0?outAllCountRadio+'% ▲' :outAllCountRadio +'% ▼' }" ></a><br> 比昨天 <a style="color: #1aa094"
th:text="${outAllCountRadio > 0?outAllCountRadio+'% ▲' :outAllCountRadio +'% ▼' }"></a><br>
</div> </div>
</div> </div>
</div> </div>
@ -65,7 +67,9 @@
<span th:text="${allOutPrice}"></span> <span th:text="${allOutPrice}"></span>
</div> </div>
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> <div class="layui-col-xs5 layui-col-md5 top-panel-tips">
比昨天 <a style="color: #1aa094" th:text="${outAllPriceRadio > 0?outAllPriceRadio+'% ▲' :outAllPriceRadio +'% ▼' }" ></a><br> </div> 比昨天 <a style="color: #1aa094"
th:text="${outAllPriceRadio > 0?outAllPriceRadio+'% ▲' :outAllPriceRadio +'% ▼' }"></a><br>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -81,7 +85,8 @@
<span th:text="${OutCount}"></span> <span th:text="${OutCount}"></span>
</div> </div>
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> <div class="layui-col-xs5 layui-col-md5 top-panel-tips">
比昨天 <a style="color: #1aa094" th:text="${outCountRadio > 0?outCountRadio+'% ▲' :outCountRadio +'% ▼' }" ></a><br> 比昨天 <a style="color: #1aa094"
th:text="${outCountRadio > 0?outCountRadio+'% ▲' :outCountRadio +'% ▼' }"></a><br>
</div> </div>
</div> </div>
</div> </div>
@ -98,20 +103,21 @@
<span th:text="${OutPrice}"></span> <span th:text="${OutPrice}"></span>
</div> </div>
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> <div class="layui-col-xs5 layui-col-md5 top-panel-tips">
比昨天 <a style="color: #1aa094" th:text="${outPriceRadio > 0?outPriceRadio+'% ▲' :outPriceRadio +'% ▼' }" ></a><br> </div> 比昨天 <a style="color: #1aa094"
th:text="${outPriceRadio > 0?outPriceRadio+'% ▲' :outPriceRadio +'% ▼' }"></a><br>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="layui-collapse" lay-accordion> <div class="layui-collapse" lay-accordion>
<div class="layui-colla-item"> <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 class="layui-colla-content layui-show">
<button class="layui-btn" lay-submit lay-filter="thisWeek"> <button class="layui-btn" lay-submit lay-filter="thisWeek">
&emsp;本周&emsp; &emsp;本周&emsp;
@ -119,30 +125,18 @@
<button class="layui-btn" lay-submit lay-filter="lastWeek"> <button class="layui-btn" lay-submit lay-filter="lastWeek">
&emsp;上周&emsp; &emsp;上周&emsp;
</button> </button>
<div id="echarts-records" style="background-color:#ffffff;min-height:1000px;padding: 10px"> <select id="selectDepositoryForChart" class="form-control">
</div>
</div>
</div>
<div class="layui-colla-item">
<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>
</div>
<div class="layui-colla-item"> </select>
<h2 class="layui-colla-title">柱状图</h2> <div id="echarts-line" style="background-color:#ffffff;padding: 10px;height: 400px">
<div class="layui-colla-content layui-show"> </div>
<div id="echarts-dataset" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div>
</div> </div>
</div> </div>
<div class="layui-colla-item"> <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 class="layui-colla-content layui-show">
<div id="echarts-map" 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> </div>
@ -154,152 +148,88 @@
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> <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/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/static/lib/echarts/echarts.js" charset="utf-8"></script>
<script> <script>
layui.use(['layer'], function () { layui.use(['layer', 'element'], function () {
var $ = layui.jquery, var $ = layui.jquery,
layer = layui.layer, layer = layui.layer,
element = layui.element,
form = layui.form; 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: { title: {
text: '仓库总量-报表图' textStyle: {
}, fontSize: 14,
tooltip: { align: 'center'
trigger: 'axis', },
axisPointer: { subtextStyle: {
type: 'cross', align: 'center'
label: { },
backgroundColor: '#6a7985'
}
}
},
legend: {
data: []
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}, },
xAxis: [ series: {
{ type: 'sunburst',
type: 'category', data: [],
boundaryGap: false, radius: [0, '95%'],
data: [] sort: undefined,
} emphasis: {
], focus: 'ancestor'
yAxis: [ },
{ levels: [
type: 'value' {},
} {
], r0: '15%',
series: [ r: '35%',
{ itemStyle: {
name: '北京仓库', borderWidth: 2
type: 'line', },
stack: '金额', label: {
label: { rotate: 'tangential'
normal: {
show: true,
position: 'top'
} }
}, },
areaStyle: {}, {
data: [] r0: '35%',
} r: '70%',
] label: {
}; align: 'right'
}
/** },
* 玫瑰图表 {
*/ r0: '70%',
var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden'); r: '72%',
var optionPies = { label: {
title: { position: 'outside',
text: '仓库分布图', padding: 3,
left: 'center' silent: false
}, },
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: { itemStyle: {
shadowBlur: 10, borderWidth: 3
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
} }
} }
} ]
] }
}; };
/** let LineChartData = {};
* 柱状图
*/
var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');
var optionDataset = {
legend: {},
tooltip: {},
dataset: {
dimensions: [],
source: []
},
xAxis: {type: 'category'},
yAxis: {},
series: [
]
};
/** // 柱状图
* 中国地图 var echartLineChart = echarts.init(document.getElementById('echarts-line'));
*/ var optionLineChart = {
var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); xAxis: {
var optionMap = { type: 'category',
legend: {}, boundaryGap: false,
tooltip: { data: []
trigger: 'axis', },
showContent: true yAxis: {
type: 'value'
}, },
dataset: { tooltip: {
source: [] trigger: "axis",
}, },
xAxis: {type: 'category'}, series: []
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
]
}; };
@ -319,157 +249,32 @@
}, },
success: function (result) { success: function (result) {
layer.close(this.layerIndex); layer.close(this.layerIndex);
if (result.code === 0) { if (result.code === 0) {
echartsRecords.setOption(optionRecords); let data = result.data;
echartsPies.setOption(optionPies);
echartsDataset.setOption(optionDataset); let depositoryItem = data.depository;
echartsMap.setOption(optionMap); let keys = Object.keys(depositoryItem);
for (let i = 0; i < keys.length; i++) {
// 折线图 let key = keys[i];
var optionRecordsSeries = []; $("#selectDepositoryForChart").append(new Option(key, depositoryItem[key]));
// 饼状图
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(
{ optionSunburstChart.series.data = data.depository_data.sunburstChartData;
type: 'pie', echartSunburstChart.setOption(optionSunburstChart);
// id: 'pie',
radius: '30%',
center: ['50%', '25%'], LineChartData = data.depository_data.lineChartData;
label: { optionLineChart.series = LineChartData[depositoryItem[keys[0]]];
formatter: '{b}: {@'+month+'月} ({d}%)' optionLineChart.xAxis.data = data.depository_data.week;
}, echartLineChart.setOption(optionLineChart);
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 () { form.on('submit(thisWeek)', function () {
$.ajax({ $.ajax({
url: '/repository/layui/echart_back_thisWeek?type=2', url: '/repository/layui/echart_back_thisWeek?type=2',
@ -477,7 +282,7 @@
async: true, async: true,
dataType: "json", dataType: "json",
complete: function (XHR, TS) { complete: function (XHR, TS) {
if (XHR.status != 200) { if (XHR.status !== 200) {
layer.alert("系统繁忙，稍后重试"); layer.alert("系统繁忙，稍后重试");
} }
}, },
@ -486,65 +291,14 @@
}, },
success: function (result) { success: function (result) {
layer.close(this.layerIndex); layer.close(this.layerIndex);
echartsRecords.setOption(optionRecords); LineChartData = result.data;
// 折线图 let value = $("#selectDepositoryForChart").val();
var optionRecordsSeries = []; optionLineChart.series = LineChartData[value];
for (let i = 0; i < result.depository_name.length; i++) { echartLineChart.setOption(optionLineChart);
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 () { form.on('submit(lastWeek)', function () {
$.ajax({ $.ajax({
url: '/repository/layui/echart_back_lastWeek?type=2', url: '/repository/layui/echart_back_lastWeek?type=2',
@ -552,7 +306,7 @@
async: true, async: true,
dataType: "json", dataType: "json",
complete: function (XHR, TS) { complete: function (XHR, TS) {
if (XHR.status != 200) { if (XHR.status !== 200) {
layer.alert("系统繁忙，稍后重试"); layer.alert("系统繁忙，稍后重试");
} }
}, },
@ -561,70 +315,23 @@
}, },
success: function (result) { success: function (result) {
layer.close(this.layerIndex); layer.close(this.layerIndex);
echartsRecords.setOption(optionRecords); LineChartData = result.data;
// 折线图 let value = $("#selectDepositoryForChart").val();
var optionRecordsSeries = []; optionLineChart.series = LineChartData[value];
for (let i = 0; i < result.depository_name.length; i++) { echartLineChart.setOption(optionLineChart);
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 () { $('#selectDepositoryForChart').on('change', function (obj) {
location.reload(); let value = obj.target.value;
}) optionLineChart.series = LineChartData[value];
echartLineChart.setOption(optionLineChart);
});
}); });
</script> </script>
</body> </body>
</html> </html>

543
src/main/resources/templates/pages/chart/chart-stock_back.html
View File

@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=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/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/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"> <link rel="stylesheet" href="/static/css/public.css" media="all">
<style> <style>
.top-panel { .top-panel {
@ -40,7 +41,7 @@
<div class="layui-collapse" lay-accordion> <div class="layui-collapse" lay-accordion>
<div class="layui-colla-item"> <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 class="layui-colla-content layui-show">
<button class="layui-btn" lay-submit lay-filter="thisWeek"> <button class="layui-btn" lay-submit lay-filter="thisWeek">
&emsp;本周&emsp; &emsp;本周&emsp;
@ -48,33 +49,32 @@
<button class="layui-btn" lay-submit lay-filter="lastWeek"> <button class="layui-btn" lay-submit lay-filter="lastWeek">
&emsp;上周&emsp; &emsp;上周&emsp;
</button> </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>
</div> </div>
<div class="layui-colla-item"> <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 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> </div>
<div class="layui-colla-item"> <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 class="layui-colla-content layui-show">
<div id="echarts-dataset" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div> <select id="selectDepositoryForBarChart" class="form-control">
</div>
</div>
<div class="layui-colla-item"> </select>
<h2 class="layui-colla-title">折线比例图</h2> <div id="echarts-bar-chart" style="background-color:#ffffff;padding: 10px;height:400px;"></div>
<div class="layui-colla-content layui-show">
<div id="echarts-map" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div>
</div> </div>
</div> </div>
</div> </div>
@ -83,37 +83,105 @@
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> <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/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/static/lib/echarts/echarts.js" charset="utf-8"></script>
<script> <script>
layui.use(['layer'], function () { layui.use(['layer', 'element'], function () {
var $ = layui.jquery, var $ = layui.jquery,
layer = layui.layer, layer = layui.layer,
element = layui.element,
form = layui.form; 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: { title: {
text: '仓库库存-报表图' 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 = {};
let inBarChartData = {};
let outBarChartData = {};
// 面积图
var echartLineChart = echarts.init(document.getElementById('echarts-line'));
var optionLineChart = {
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
tooltip:{
trigger:"axis",
}, },
series: []
};
// 柱状图
var echartBarChart = echarts.init(document.getElementById('echarts-bar-chart'));
var optionBarChart = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'cross', type: 'shadow'
label: {
backgroundColor: '#6a7985'
}
} }
}, },
legend: { legend: {
data: [] data: []
}, },
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
@ -121,116 +189,22 @@
containLabel: true containLabel: true
}, },
xAxis: [ xAxis: [
{
type: 'category',
boundaryGap: false,
data: []
}
],
yAxis: [
{ {
type: 'value' type: 'value'
} }
], ],
series: [ yAxis: [
{ {
name: '北京仓库', type: 'category',
type: 'line', axisTick: {
stack: '金额', show: false
label: {
normal: {
show: true,
position: 'top'
}
}, },
areaStyle: {},
data: [] 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: [
]
};
/**
* 中国地图
*/
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: [] series: []
}; };
//动态加载相关数据 //动态加载相关数据
$.ajax({ $.ajax({
url: '/repository/layui/echart_back?type=0', url: '/repository/layui/echart_back?type=0',
@ -238,7 +212,7 @@
async: true, async: true,
dataType: "json", dataType: "json",
complete: function (XHR, TS) { complete: function (XHR, TS) {
if (XHR.status != 200) { if (XHR.status !== 200) {
layer.alert("系统繁忙，稍后重试"); layer.alert("系统繁忙，稍后重试");
} }
}, },
@ -247,158 +221,45 @@
}, },
success: function (result) { success: function (result) {
layer.close(this.layerIndex); layer.close(this.layerIndex);
if (result.code === 0) { if (result.code === 0) {
echartsRecords.setOption(optionRecords); let data = result.data;
echartsPies.setOption(optionPies);
echartsDataset.setOption(optionDataset); let depositoryItem = data.depository;
echartsMap.setOption(optionMap); let keys = Object.keys(depositoryItem);
for (let i = 0; i < keys.length; i++) {
// 折线图 let key = keys[i];
var optionRecordsSeries = []; $("#selectDepositoryForLineChart").append(new Option(key, depositoryItem[key]));
// 饼状图 $("#selectDepositoryForBarChart").append(new Option(key, depositoryItem[key]));
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.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++) { let depositoryKey = depositoryItem[keys[0]];
optionMap.dataset.source.push(result.data.depository_data.MapInventory.mapDataList[i]); let week = data.depository_data.week;
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; optionSunburstChart.series.data = data.depository_data.sunburstChartData;
optionMap.series.push( echartSunburstChart.setOption(optionSunburstChart);
{
type: 'pie',
// id: 'pie', LineChartData = data.depository_data.lineChartData;
radius: '30%', optionLineChart.series = LineChartData[depositoryKey];
center: ['50%', '25%'], optionLineChart.xAxis.data = week;
label: { echartLineChart.setOption(optionLineChart);
formatter: '{b}: {@' + month + '月} ({d}%)'
},
encode: {
itemName: 'product', optionBarChart.legend.data = ["入库","出库"];
value: month + '月', optionBarChart.yAxis[0].data = week;
tooltip: month + '月' inBarChartData = data.depository_data.barChartData["in"];
} outBarChartData = data.depository_data.barChartData["out"];
} optionBarChart.series=[inBarChartData[depositoryKey],outBarChartData[depositoryKey]];
); echartBarChart.setOption(optionBarChart)
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 () { form.on('submit(thisWeek)', function () {
$.ajax({ $.ajax({
url: '/repository/layui/echart_back_thisWeek?type=0', url: '/repository/layui/echart_back_thisWeek?type=0',
@ -406,7 +267,7 @@
async: true, async: true,
dataType: "json", dataType: "json",
complete: function (XHR, TS) { complete: function (XHR, TS) {
if (XHR.status != 200) { if (XHR.status !== 200) {
layer.alert("系统繁忙，稍后重试"); layer.alert("系统繁忙，稍后重试");
} }
}, },
@ -415,60 +276,10 @@
}, },
success: function (result) { success: function (result) {
layer.close(this.layerIndex); layer.close(this.layerIndex);
echartsRecords.setOption(optionRecords); LineChartData = result.data;
// 折线图 let value = $("#selectDepositoryForLineChart").val();
var optionRecordsSeries = []; optionLineChart.series = LineChartData[value];
for (let i = 0; i < result.depository_name.length; i++) { echartLineChart.setOption(optionLineChart);
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);
} }
}) })
}); });
@ -480,7 +291,7 @@
async: true, async: true,
dataType: "json", dataType: "json",
complete: function (XHR, TS) { complete: function (XHR, TS) {
if (XHR.status != 200) { if (XHR.status !== 200) {
layer.alert("系统繁忙，稍后重试"); layer.alert("系统繁忙，稍后重试");
} }
}, },
@ -489,66 +300,28 @@
}, },
success: function (result) { success: function (result) {
layer.close(this.layerIndex); layer.close(this.layerIndex);
echartsRecords.setOption(optionRecords); LineChartData = result.data;
// 折线图 let value = $("#selectDepositoryForLineChart").val();
var optionRecordsSeries = []; optionLineChart.series = LineChartData[value];
for (let i = 0; i < result.depository_name.length; i++) { echartLineChart.setOption(optionLineChart);
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);
} }
}) })
}); });
$('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> </script>
</body> </body>

Write Preview
Loading…
Cancel
Save