|
|
@@ -110,7 +110,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div style="display: flex">
|
|
|
- <Card class="card card-upcoming" style="margin: 8px;height: 200px;flex: 1" @contextmenu.native.prevent>
|
|
|
+ <Card class="card card-upcoming" style="margin: 8px;height:450px;flex: 1" @contextmenu.native.prevent>
|
|
|
<div style="padding: 10px">
|
|
|
<div style="font-size: 16px;color: black">昨日轧花厂入库Top20</div>
|
|
|
<div style="display: flex;padding: 5px;font-weight: 700;color: gray">
|
|
|
@@ -118,12 +118,13 @@
|
|
|
<div style="flex: 1">批数</div>
|
|
|
<div style="flex: 1"> 毛重(吨)</div>
|
|
|
</div>
|
|
|
- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>
|
|
|
- <div style="width: 100%;text-align: center;margin: 30px 0">暂无数据</div>
|
|
|
- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>
|
|
|
+ <div id="echarts5" style="width: 100%; height: 350px;"></div>
|
|
|
+<!-- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>-->
|
|
|
+<!-- <div style="width: 100%;text-align: center;margin: 30px 0">暂无数据</div> -->
|
|
|
+<!-- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>-->
|
|
|
</div>
|
|
|
</Card>
|
|
|
- <Card class="card card-upcoming" style="margin: 8px;height: 200px;flex: 1" @contextmenu.native.prevent>
|
|
|
+ <Card class="card card-upcoming" style="margin: 8px;height: 450px;flex: 1" @contextmenu.native.prevent>
|
|
|
<div style="padding: 10px">
|
|
|
<div style="font-size: 16px;color: black">昨日仓库入库Top20</div>
|
|
|
<div style="display: flex;padding: 5px;font-weight: 700;color: gray">
|
|
|
@@ -131,12 +132,13 @@
|
|
|
<div style="flex: 1">批数</div>
|
|
|
<div style="flex: 1"> 毛重(吨)</div>
|
|
|
</div>
|
|
|
- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>
|
|
|
- <div style="width: 100%;text-align: center;margin: 30px 0">暂无数据</div>
|
|
|
- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>
|
|
|
+ <div id="echarts6" style="width: 100%; height: 350px;"></div>
|
|
|
+<!-- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>-->
|
|
|
+<!-- <div style="width: 100%;text-align: center;margin: 30px 0">暂无数据</div>-->
|
|
|
+<!-- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>-->
|
|
|
</div>
|
|
|
</Card>
|
|
|
- <Card class="card card-upcoming" style="margin: 8px;height: 200px;flex: 1" @contextmenu.native.prevent>
|
|
|
+ <Card class="card card-upcoming" style="margin: 8px;height: 450px;flex: 1" @contextmenu.native.prevent>
|
|
|
<div style="padding: 10px">
|
|
|
<div style="font-size: 16px;color: black">昨日地区入库</div>
|
|
|
<div style="display: flex;padding: 5px;font-weight: 700;color: gray">
|
|
|
@@ -144,9 +146,10 @@
|
|
|
<div style="flex: 1">批数</div>
|
|
|
<div style="flex: 1"> 毛重(吨)</div>
|
|
|
</div>
|
|
|
- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>
|
|
|
- <div style="width: 100%;text-align: center;margin: 30px 0">暂无数据</div>
|
|
|
- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>
|
|
|
+ <div id="echarts7" style="width: 100%; height: 350px;"></div>
|
|
|
+<!-- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>-->
|
|
|
+<!-- <div style="width: 100%;text-align: center;margin: 30px 0">暂无数据</div>-->
|
|
|
+<!-- <div style="width: 100%;height: 1px;background: #dedede;margin: 10px 0"></div>-->
|
|
|
</div>
|
|
|
</Card>
|
|
|
</div>
|
|
|
@@ -450,6 +453,9 @@ export default {
|
|
|
this.drawPerformance2()
|
|
|
this.drawPerformance3()
|
|
|
this.drawPerformance4()
|
|
|
+ this.drawPerformance5()
|
|
|
+ this.drawPerformance6()
|
|
|
+ this.drawPerformance7()
|
|
|
});
|
|
|
|
|
|
},
|
|
|
@@ -1117,6 +1123,276 @@ export default {
|
|
|
}
|
|
|
)
|
|
|
},
|
|
|
+ drawPerformance5() {
|
|
|
+ let echarts = require('echarts')
|
|
|
+ let echarts1 = echarts.init(document.getElementById('echarts5'))
|
|
|
+ echarts1.setOption(
|
|
|
+ {
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 18,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ return params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value + ' 吨';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '5%',
|
|
|
+ data: ['入库量']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '10%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '3%',
|
|
|
+ top: '15%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '吨',
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameGap: 20,
|
|
|
+ boundaryGap: [0, 0.01]
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [
|
|
|
+ '新疆阿克苏轧花厂', '山东德州棉业', '河南南阳轧花厂', '河北衡水棉业',
|
|
|
+ '湖北荆州轧花厂', '江苏盐城棉业', '安徽宿州轧花厂', '甘肃庆阳棉业',
|
|
|
+ '陕西渭南轧花厂', '江西九江棉业', '四川南充轧花厂', '云南大理棉业',
|
|
|
+ '贵州遵义轧花厂', '辽宁锦州棉业', '吉林四平轧花厂', '黑龙江绥化棉业',
|
|
|
+ '内蒙古赤峰轧花厂', '山西运城棉业', '浙江嘉兴轧花厂', '广东韶关棉业'
|
|
|
+ ],
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: function (value) {
|
|
|
+ // 处理较长的轧花厂名称,超出一定长度显示省略号
|
|
|
+ return value.length > 6 ? value.substring(0, 6) + '...' : value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '入库量',
|
|
|
+ type: 'bar',
|
|
|
+ data: [
|
|
|
+ 18203, 17542, 16875, 15342, 14789,
|
|
|
+ 13456, 12876, 11987, 10876, 9765,
|
|
|
+ 8976, 8456, 7890, 7345, 6987,
|
|
|
+ 6543, 6123, 5789, 5345, 4987
|
|
|
+ ],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'right',
|
|
|
+ formatter: '{c} 吨'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#36a2eb'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ drawPerformance6() {
|
|
|
+ let echarts = require('echarts')
|
|
|
+ let echarts1 = echarts.init(document.getElementById('echarts6'))
|
|
|
+ echarts1.setOption(
|
|
|
+ {
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 18,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ return params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value + ' 吨';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '5%',
|
|
|
+ data: ['入库量']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '10%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '3%',
|
|
|
+ top: '15%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '吨',
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameGap: 20,
|
|
|
+ boundaryGap: [0, 0.01]
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data:[
|
|
|
+ "新疆阿克苏棉花仓库",
|
|
|
+ "山东德州棉业仓库",
|
|
|
+ "河南南阳棉花仓库",
|
|
|
+ "河北衡水棉业仓库",
|
|
|
+ "湖北荆州棉花仓库",
|
|
|
+ "江苏盐城棉业仓库",
|
|
|
+ "安徽宿州棉花仓库",
|
|
|
+ "甘肃庆阳棉业仓库",
|
|
|
+ "陕西渭南棉花仓库",
|
|
|
+ "江西九江棉业仓库",
|
|
|
+ "四川南充棉花仓库",
|
|
|
+ "云南大理棉业仓库",
|
|
|
+ "贵州遵义棉花仓库",
|
|
|
+ "辽宁锦州棉业仓库",
|
|
|
+ "吉林四平棉花仓库",
|
|
|
+ "黑龙江绥化棉业仓库",
|
|
|
+ "内蒙古赤峰棉花仓库",
|
|
|
+ "山西运城棉业仓库",
|
|
|
+ "浙江嘉兴棉花仓库",
|
|
|
+ "广东韶关棉业仓库"
|
|
|
+ ],
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: function (value) {
|
|
|
+ // 处理较长的轧花厂名称,超出一定长度显示省略号
|
|
|
+ return value.length > 6 ? value.substring(0, 6) + '...' : value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '入库量',
|
|
|
+ type: 'bar',
|
|
|
+ data: [
|
|
|
+ 18203, 17542, 16875, 15342, 14789,
|
|
|
+ 13456, 12876, 11987, 10876, 9765,
|
|
|
+ 8976, 8456, 7890, 7345, 6987,
|
|
|
+ 6543, 6123, 5789, 5345, 4987
|
|
|
+ ],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'right',
|
|
|
+ formatter: '{c} 吨'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#36a2eb'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ drawPerformance7() {
|
|
|
+ let echarts = require('echarts')
|
|
|
+ let echarts1 = echarts.init(document.getElementById('echarts7'))
|
|
|
+ echarts1.setOption(
|
|
|
+ {
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 18,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ return params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value + ' 吨';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '5%',
|
|
|
+ data: ['入库量']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '10%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '3%',
|
|
|
+ top: '15%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '吨',
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameGap: 20,
|
|
|
+ boundaryGap: [0, 0.01]
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data:[
|
|
|
+ "新疆阿克苏地区",
|
|
|
+ "山东德州",
|
|
|
+ "河南南阳",
|
|
|
+ "河北衡水",
|
|
|
+ "湖北荆州",
|
|
|
+ "江苏盐城",
|
|
|
+ "安徽宿州",
|
|
|
+ "甘肃庆阳",
|
|
|
+ "陕西渭南",
|
|
|
+ "江西九江",
|
|
|
+ "四川南充",
|
|
|
+ "云南大理",
|
|
|
+ "贵州遵义",
|
|
|
+ "辽宁锦州",
|
|
|
+ "吉林四平",
|
|
|
+ "黑龙江绥化",
|
|
|
+ "内蒙古赤峰",
|
|
|
+ "山西运城",
|
|
|
+ "浙江嘉兴",
|
|
|
+ "广东韶关"
|
|
|
+ ],
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: function (value) {
|
|
|
+ // 处理较长的轧花厂名称,超出一定长度显示省略号
|
|
|
+ return value.length > 6 ? value.substring(0, 6) + '...' : value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '入库量',
|
|
|
+ type: 'bar',
|
|
|
+ data: [
|
|
|
+ 18203, 17542, 16875, 15342, 14789,
|
|
|
+ 13456, 12876, 11987, 10876, 9765,
|
|
|
+ 8976, 8456, 7890, 7345, 6987,
|
|
|
+ 6543, 6123, 5789, 5345, 4987
|
|
|
+ ],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'right',
|
|
|
+ formatter: '{c} 吨'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#36a2eb'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
/**
|
|
|
* @desc : 跳页
|
|
|
* @author : 洪旭东
|