智慧餐厅-消费分析以及无人商超-商超分析图例时间段显示

src/components/life/restaurant/components/lifeRestConsumeChart.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
-
-  </div>
+  <div class="myChart" ref="myChart" :style="{ height: height + 'px' }"></div>
 </template>
 
 <script>
@@ -13,179 +11,224 @@ export default {
       option: {
         legend: {
           data: [
-            '早餐人数',
-            '午餐人数',
-            '晚餐人数',
-            '早餐单价',
-            '午餐单价',
-            '晚餐单价',
-          ]
+            "早餐人数",
+            "午餐人数",
+            "晚餐人数",
+            "早餐单价",
+            "午餐单价",
+            "晚餐单价",
+          ],
+          selected:{
+            "晚餐人数":false,
+            "晚餐单价":false,
+          }
         },
         grid: {
-          left: '2%', //默认10%
-          right: '2%', //默认10%
-          bottom: '20px', //默认60
-          top: '60px',
-          containLabel: true
+          left: "2%", //默认10%
+          right: "2%", //默认10%
+          bottom: "20px", //默认60
+          top: "60px",
+          containLabel: true,
           //grid区域是否包含坐标轴的刻度标签
         },
         xAxis: {
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
         },
         yAxis: [
           {
-            type: 'value',
-            name: '平均单价(元/单)',
+            type: "value",
+            name: "平均单价(元/单)",
             nameTextStyle: {
-              padding: [10, 0, 10, 20]
+              padding: [10, 0, 10, 20],
             },
             splitNumber: 5,
             splitLine: {
               show: true,
               lineStyle: {
-                type: 'dashed',
+                type: "dashed",
                 width: 1,
                 // 使用深浅的间隔色
-                color: ['#566471', '#566471']
-              }
+                color: ["#566471", "#566471"],
+              },
             },
             axisLabel: {
               show: true,
               textStyle: {
-                fontSize: 12
+                fontSize: 12,
               },
               //formatter: '{value} 元/单'
-            }
+            },
           },
           {
-            name: '人数(人)',
-            type: 'value',
+            name: "人数(人)",
+            type: "value",
             nameTextStyle: {
-              padding: [10, 0, 10, 15]
+              padding: [10, 0, 10, 15],
             },
           },
         ],
         dataZoom: this.$constant.ECHARTS_OPTION_DATAZOOM,
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow'
+            type: "shadow",
           },
           textStyle: {
-            color: '#fff',
-            align: 'left',
-            fontSize: 14
+            color: "#fff",
+            align: "left",
+            fontSize: 14,
           },
-          axisLine: {//x坐标轴轴线
+          axisLine: {
+            //x坐标轴轴线
             show: true,
-            lineStyle: {//x坐标轴轴线样式
-              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
-            }
+            lineStyle: {
+              //x坐标轴轴线样式
+              color: "#000", //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            },
           },
-          backgroundColor: 'rgba(0,0,0,0.8)',
+          backgroundColor: "rgba(0,0,0,0.8)",
         },
         series: [
           {
-            name: '早餐人数',
+            name: "早餐人数",
             data: [],
-            type: 'bar',
-            stack: 'A',
+            type: "bar",
+            stack: "A",
             barWidth: this.$constant.ECHARTS_BAR_WIDTH,
-            yAxisIndex:1,
+            yAxisIndex: 1,
             backgroundStyle: {
-              color: 'rgba(180, 180, 180, 0.2)'
+              color: "rgba(180, 180, 180, 0.2)",
             },
             itemStyle: {
-              color: '#3AA7E6'
-            }
+              color: "#3AA7E6",
+            },
           },
           {
-            name: '午餐人数',
+            name: "午餐人数",
             data: [],
-            type: 'bar',
-            stack: 'A',
-            yAxisIndex:1,
+            type: "bar",
+            stack: "A",
+            yAxisIndex: 1,
             backgroundStyle: {
-              color: 'rgba(180, 180, 180, 0.2)'
+              color: "rgba(180, 180, 180, 0.2)",
             },
             itemStyle: {
-              color: '#4ACFB8'
-            }
+              color: "#4ACFB8",
+            },
           },
           {
-            name: '晚餐人数',
+            name: "晚餐人数",
             data: [],
-            type: 'bar',
-            stack: 'A',
-            yAxisIndex:1,
+            type: "bar",
+            stack: "A",
+            yAxisIndex: 1,
             backgroundStyle: {
-              color: 'rgba(180, 180, 180, 0.2)'
+              color: "rgba(180, 180, 180, 0.2)",
             },
             itemStyle: {
-              color: '#F4955F'
-            }
+              color: "#F4955F",
+            },
           },
           {
-            name: '早餐单价',
+            name: "早餐单价",
             data: [],
-            type: 'line',
-            smooth:true,
-            showSymbol:false,
+            type: "line",
+            smooth: true,
+            showSymbol: false,
             itemStyle: {
-              color: '#3AA7E6'
-            }
+              color: "#3AA7E6",
+            },
           },
           {
-            name: '午餐单价',
+            name: "午餐单价",
             data: [],
-            type: 'line',
-            smooth:true,
-            showSymbol:false,
+            type: "line",
+            smooth: true,
+            showSymbol: false,
             itemStyle: {
-              color: '#4ACFB8'
-            }
+              color: "#4ACFB8",
+            },
           },
           {
-            name: '晚餐单价',
+            name: "晚餐单价",
             data: [],
-            type: 'line',
-            smooth:true,
-            showSymbol:false,
+            type: "line",
+            smooth: true,
+            showSymbol: false,
             itemStyle: {
-              color: '#F4955F'
-            }
-          }
-        ]
+              color: "#F4955F",
+            },
+          },
+        ],
       },
-    }
+    };
   },
   props: {
     height: Number,
-    queryData: Object
+    queryData: Object,
   },
   mounted() {
-    this.$nextTick(()=>{
-      this.initChart()
-    })
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
   methods: {
     initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
+      let chart = this.$echarts.init(this.$refs.myChart);
       this.chart = chart;
       this.$util.chartsResize(this.chart);
-      chart.setOption(this.option)
-      this.$store.loadingStore().loadingWithApi(this.getData())
+      let morningStart = this.$moment("00:00:00", "HH:mm:ss");
+      let morningEnd = this.$moment("11:00:00", "HH:mm:ss");
+      let noonStart = this.$moment("11:00:00", "HH:mm:ss");
+      let noonEnd = this.$moment("17:00:00", "HH:mm:ss");
+      let eveningStart = this.$moment("17:00:00", "HH:mm:ss");
+      let eveningEnd = this.$moment("24:00:00", "HH:mm:ss");
+      let currentTime = this.$moment();
+      if (currentTime.isBetween(morningStart, morningEnd)) {
+        this.option.legend.selected = {
+          "午餐人数":false,
+          "晚餐人数":false,
+          "午餐单价":false,
+          "晚餐单价":false,
+        }
+      } else if (currentTime.isBetween(noonStart, noonEnd)) {
+        console.log("现在是中午");
+        this.option.legend.selected = {
+          "早餐人数":false,
+          "晚餐人数":false,
+          "早餐单价":false,
+          "晚餐单价":false,
+        }
+      } else if (currentTime.isBetween(eveningStart, eveningEnd)) {
+        console.log("现在是晚上");
+        this.option.legend.selected = {
+          "早餐人数":false,
+          "午餐人数":false,
+          "早餐单价":false,
+          "午餐单价":false,
+        }
+      }
+      chart.setOption(this.option);
+      this.$store.loadingStore().loadingWithApi(this.getData());
     },
     getData() {
-      return apiLifeRestaurant.getConsumptionAnalysis(this.queryData).then(res=>{
-        let data = this.$util.dataUtil.covertDataToEcharts(res, ['breakfast','lunch','dinner','breakfastPrice','lunchPrice','dinnerPrice'])
-        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
-      })
-    }
-  }
-}
+      return apiLifeRestaurant
+        .getConsumptionAnalysis(this.queryData)
+        .then((res) => {
+          let data = this.$util.dataUtil.covertDataToEcharts(res, [
+            "breakfast",
+            "lunch",
+            "dinner",
+            "breakfastPrice",
+            "lunchPrice",
+            "dinnerPrice",
+          ]);
+          this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data);
+        });
+    },
+  },
+};
 </script>
 
-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>

src/components/life/supermarket/components/lifeSupermarketAnalysisChart.vue

@@ -1,8 +1,6 @@
 <template>
   <a-spin :spinning="loading">
-    <div class="myChart" ref="myChart" :style="{height: height+'px'}">
-
-    </div>
+    <div class="myChart" ref="myChart" :style="{ height: height + 'px' }"></div>
   </a-spin>
 </template>
 
@@ -22,7 +20,11 @@ export default {
             '上午订单',
             '下午订单',
             '平均单价',
-          ]
+          ],
+          selected:{
+            '下午消费总额':false,
+            '下午订单':false,
+          }
         },
         grid: {
           left: '2%', //默认10%
@@ -174,6 +176,23 @@ export default {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
       this.$util.chartsResize(this.chart);
+      let morningStart = this.$moment("00:00:00", "HH:mm:ss");
+      let morningEnd = this.$moment("12:00:00", "HH:mm:ss");
+      let afternoonStart = this.$moment("12:00:00", "HH:mm:ss");
+      let afternoonEnd = this.$moment("24:00:00", "HH:mm:ss");
+      let currentTime = this.$moment();
+      if (currentTime.isBetween(morningStart, morningEnd)) {
+        this.option.legend.selected = {
+          '下午消费总额':false,
+          '下午订单':false,
+        }
+      }
+      if(currentTime.isBetween(afternoonStart, afternoonEnd)){
+        this.option.legend.selected = {
+          '上午消费总额':false,
+          '上午订单':false,
+        }
+      }
       chart.setOption(this.option)
       this.$store.loadingStore().loadingWithApi(this.getData())
     },
@@ -191,6 +210,4 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>