| | |
| | | |
| | | <!-- 统计图表 --> |
| | | <div class="layui-row layui-col-space15"> |
| | | <div class="layui-col-md4 layui-col-sm6"> |
| | | <div class="layui-card" style="overflow: hidden;"> |
| | | <div class="layui-card-header">日出入库统计</div> |
| | | <div class="layui-card-body"> |
| | | <div id="consoleChartsDay" style="height: 300px;"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-col-md4 layui-col-sm6"> |
| | | <!-- <div class="layui-col-md4 layui-col-sm6">--> |
| | | <!-- <div class="layui-card" style="overflow: hidden;">--> |
| | | <!-- <div class="layui-card-header">日出入库统计</div>--> |
| | | <!-- <div class="layui-card-body">--> |
| | | <!-- <div id="consoleChartsDay" style="height: 300px;"></div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- --> |
| | | <!-- <div class="layui-col-md4 layui-col-sm6">--> |
| | | <!-- <div class="layui-card" style="overflow: hidden;">--> |
| | | <!-- <div class="layui-card-header">近7天出入库统计</div>--> |
| | | <!-- <div class="layui-card-body">--> |
| | | <!-- <div id="consoleChartsWeek" style="height: 300px;"></div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <div class="layui-col-md8"> |
| | | <div class="layui-card" style="overflow: hidden;"> |
| | | <div class="layui-card-header">近7天出入库统计</div> |
| | | <div class="layui-card-body"> |
| | |
| | | var layer = layui.layer; |
| | | |
| | | /** 渲染日统计图表 */ |
| | | var myCharts1 = echarts.init(document.getElementById('consoleChartsDay')); |
| | | var options1 = { |
| | | title: { |
| | | text: '入库车次/出库车次', x: 'center', y: '32%', |
| | | textStyle: {fontSize: 18, color: '#262626', fontWeight: 'normal'}, |
| | | subtextStyle: {fontSize: 56, color: '#10B4E8'}, itemGap: 20 |
| | | }, |
| | | color: ['#10B4E8', '#FFA800'], |
| | | tooltip: {trigger: 'item'}, |
| | | legend: { |
| | | orient: 'vertical', right: '0px', top: '0px', |
| | | data: ['入库车次', '出库车次'], textStyle: {color: '#595959'} |
| | | }, |
| | | series: [{name: '数量', type: 'pie', radius: ['75%', '80%'], label: {normal: {show: false}}}] |
| | | }; |
| | | myCharts1.setOption(options1); |
| | | // 赋值 |
| | | myCharts1.setOption({ |
| | | title: {subtext: mainData.inNumDay + "/" + mainData.outNumDay}, series: [{data: [{name: '入库车次', value: mainData.inNumDay}, {name: '出库车次', value: mainData.outNumDay}]}] |
| | | }); |
| | | // var myCharts1 = echarts.init(document.getElementById('consoleChartsDay')); |
| | | // var options1 = { |
| | | // title: { |
| | | // text: '入库车次/出库车次', x: 'center', y: '32%', |
| | | // textStyle: {fontSize: 18, color: '#262626', fontWeight: 'normal'}, |
| | | // subtextStyle: {fontSize: 56, color: '#10B4E8'}, itemGap: 20 |
| | | // }, |
| | | // color: ['#10B4E8', '#FFA800'], |
| | | // tooltip: {trigger: 'item'}, |
| | | // legend: { |
| | | // orient: 'vertical', right: '0px', top: '0px', |
| | | // data: ['入库车次', '出库车次'], textStyle: {color: '#595959'} |
| | | // }, |
| | | // series: [{name: '数量', type: 'pie', radius: ['75%', '80%'], label: {normal: {show: false}}}] |
| | | // }; |
| | | // myCharts1.setOption(options1); |
| | | // // 赋值 |
| | | // myCharts1.setOption({ |
| | | // title: {subtext: mainData.inNumDay + "/" + mainData.outNumDay}, series: [{data: [{name: '入库车次', value: mainData.inNumDay}, {name: '出库车次', value: mainData.outNumDay}]}] |
| | | // }); |
| | | |
| | | /** 渲染周统计图表 */ |
| | | var myCharts2 = echarts.init(document.getElementById('consoleChartsWeek')); |
| | |
| | | |
| | | /** 窗口大小改变事件 */ |
| | | window.onresize = function () { |
| | | myCharts1.resize(); |
| | | // myCharts1.resize(); |
| | | myCharts2.resize(); |
| | | myCharts3.resize(); |
| | | myCharts4.resize(); |