update - 货道统计

src/views/report/inventoryStatistics/index.vue

@@ -46,7 +46,7 @@
       </div>
       <div class="chart">
         <el-card>
-          <div class="chart-title">货道占用统计</div>
+          <div class="chart-title">货道占用统计(货道容量:{{this.spaceNumber}} 已占用容量:{{this.occupancyNumber}})</div>
           <div ref="barChart" class="chart-content"></div>
         </el-card>
       </div>
@@ -116,7 +116,9 @@ export default {
         xValue: ['货道01', '货道02', '货道03', '货道04', '货道05', '货道06', '货道07'],
         yValueOne: [120, 132, 101, 134, 90, 230, 210],
         yValueTwo: [150, 232, 201, 154, 190, 330, 410]
-      }
+      },
+      spaceNumber: 0,
+      occupancyNumber: 0,
     }
   },
   created() {
@@ -130,6 +132,8 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
+      this.barChart = echarts.init(this.$refs.barChart);
+      this.pieChart = echarts.init(this.$refs.pieChart);
       this.initPieChart();
       this.initBarChart();
     });
@@ -151,13 +155,15 @@ export default {
         this.barChartData = {
           xValue: response.data.map(item =>  item.storeName + item.spaceName),
           yValueOne: response.data.map(item => item.spaceStock),
-          yValueTwo: response.data.map(item => item.spaceCapacity),
+          yValueTwo: response.data.map(item => item.spaceCapacity - item.spaceStock),
         };
+        this.spaceNumber = response.data.map(item => item.spaceCapacity).reduce((accumulator, currentValue) => accumulator + currentValue);
+        this.occupancyNumber = response.data.map(item => item.spaceStock).reduce((accumulator, currentValue) => accumulator + currentValue);
+        console.log(this.spaceNumber)
         this.initBarChart();
       });
     },
     initPieChart() {
-      this.pieChart = echarts.init(this.$refs.pieChart);
       // 在这里添加饼图的数据和配置
       const option = {
         tooltip: {
@@ -192,7 +198,6 @@ export default {
       this.pieChart.setOption(option);
     },
     initBarChart() {
-      this.barChart = echarts.init(this.$refs.barChart);
       // 在这里添加柱状图的数据和配置
       const option = {
         tooltip: {
@@ -230,13 +235,13 @@ export default {
             data: this.barChartData.yValueOne
           },
           {
-            name: '货道容量',
+            name: '货道空余容量',
             type: 'bar',
             stack: 'Ad',
             emphasis: {
               focus: 'series'
             },
-            data: this.barChartData.yValueTwo
+            data: this.barChartData.yValueTwo,
           },
         ]
       };