修改

src/components/mallIndex.vue

@@ -409,8 +409,8 @@
             <div>支付件数</div>
           </div>
         </div>
-        <div class="myecharts" ref="myecharts" style="height:300px;">
-
+        <div style="overflow-x:auto;">
+          <div class="myecharts" ref="myecharts" style="height:18rem;width:98%;"></div>
         </div>
       </div>
     </div>
@@ -539,7 +539,7 @@
           StartDate: "", //开始时间
           EndDate: "", //结束时间
           SalesTimeType: 0, //默认今日
-          OrderBy:'',
+          OrderBy: '',
         },
         basicData: {}, //基础数据
         salesData: {}, //销售数据
@@ -573,7 +573,7 @@
         else if (tab.name == "second") {
           this.dateStr.push(this.$commonUtils.AddDay('', -30))
         }
-       
+
         this.dateStr.push(this.$commonUtils.AddDay('', -0));
         this.getChange();
       },
@@ -627,10 +627,8 @@
         //7日
         else if (tab.name == "second") {
           this.basicQMsg.SalesTimeType = 7;
-        }
-         else if(tab.name=="today")
-        {
-            this.basicQMsg.SalesTimeType = 0;
+        } else if (tab.name == "today") {
+          this.basicQMsg.SalesTimeType = 0;
         }
         this.getChange();
       },
@@ -668,13 +666,33 @@
       initMap() {
         var myChart = this.$echarts.init(this.$refs.myecharts);
         var xData = []; //x轴数据
+        var xDataList = [];
         var orderArray = []; //订单数量
         var orderIncome = []; //支付金额
         var userArray = []; //支付人数
         var goodArray = []; //商品件数
+        console.log(this.salesData,'this.salesData');
+        console.log(this.activeSell,'activeSell');
+        //今日
+        var now = new Date();
+        var year = now.getFullYear();        //年
+        var month = now.getMonth() + 1;     //月
+        var day = now.getDate();            //日
+        var nowDay = year+'-'+month+'-'+day;
+
+        //昨日
+        now.setTime(now.getTime()-24*60*60*1000);
+        var yesDay = now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate();
+
         if (this.salesData && this.salesData.subList && this.salesData.subList.length > 0) {
           this.salesData.subList.forEach(item => {
-            xData.push(item.TimeStr);
+            if(this.activeSell=='today'){
+              xData.push(nowDay+' '+item.TimeStr+'时');
+            }
+            if(this.activeSell=='first'){
+              xData.push(yesDay+' '+item.TimeStr+'时');
+            }
+            xDataList.push(item.TimeStr);
             orderArray.push(item.OrderCount);
             orderIncome.push(item.Income)
             userArray.push(item.UserCount);
@@ -682,6 +700,13 @@
           });
         }
         var seriesData = [];
+        seriesData.push({
+          name: '',
+          type: 'line',
+          stack: '',
+          color: '',
+          data: xData
+        });
         if (this.isShowOrder) {
           seriesData.push({
             name: '支付订单数',
@@ -718,12 +743,42 @@
             data: goodArray
           });
         }
+        
         var option = {
           title: {
             text: ''
           },
           tooltip: {
-            trigger: 'axis'
+            trigger: 'axis',
+            // axisPointer: {
+            //   type: "cross",
+            //   crossStyle: {
+            //     color: "#999"
+            //   },
+            // },
+            axisPointer:'none',
+            formatter:function(params){
+                // var res=params[0].name;
+                var res=''
+                if(params.length>4){
+                  for(var i=0;i<params.length;i++){
+                    if(i==0){
+                      if(params[i].data==0){
+                        res+='<br/>'+params[i].name;
+                      }else{
+                        res+='<br/>'+params[i].data;
+                      }
+                    }else{
+                      res+='<br/>'+params[i].marker+params[i].seriesName+'：'+params[i].data
+                    }
+                  }
+                }else{
+                  for(var i=0;i<params.length;i++){
+                      res+='<br/>'+params[i].marker+params[i].seriesName+'：'+params[i].data
+                  }
+                }
+                return res;
+            },
           },
           grid: {
             left: '0',
@@ -734,25 +789,66 @@
           xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: xData
+            data: xDataList
           },
-          yAxis: {
-            axisLine: { //y轴
-              show: false,
-            },
-            axisLabel: {
-              formatter: function () {
-                return "";
+          yAxis: [{
+              type: "value",
+              name: "金额",
+              min: 0,
+              axisLine: {
+                lineStyle: {
+                  // 设置y轴颜色
+                  color: "#252D48",
+                }
+              },
+              nameTextStyle: {
+                color: '#000',
+              },
+              axisLabel: {
+                // formatter: '{value}k',
+                textStyle: {
+                  color: "#252D48"
+                },
+                padding: [10, 0, 10, 0]
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: "dashed",
+                  color: "#30374E"
+                }
               }
             },
-            type: 'value',
-            splitLine: { //网格线
-              lineStyle: {
-                type: 'dashed' //设置网格线类型 dotted：虚线   solid:实线
+            {
+              type: "value",
+              name: "笔数",
+              min: 0,
+              // max: 100,
+              // interval: 10,
+              axisLine: {
+                lineStyle: {
+                  // 设置y轴颜色
+                  color: "#252D48"
+                }
+              },
+              nameTextStyle: {
+                color: '#000',
+              },
+              axisLabel: {
+                textStyle: {
+                  color: "#252D48"
+                },
+                padding: [0, 0, 10, 0]
               },
-              show: true //隐藏或显示
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: "dashed",
+                  color: "#30374E"
+                }
+              }
             }
-          },
+          ],
           series: seriesData
         };
         myChart.setOption(option, true);
@@ -775,27 +871,27 @@
           "getSalesUserTop"
         );
       },
-      getSort(val){
-        if(val.prop == 'Income'){
-            if(val.order=='ascending'){
-                  this.basicQMsg.OrderBy='Income asc'   
-              }else if(val.order=='descending'){
-                  this.basicQMsg.OrderBy='Income desc'
-              }else{
-                  this.basicQMsg.OrderBy=''
-              }
-          }else if(val.prop == 'SaleCount'){
-             if(val.order=='ascending'){
-                  this.basicQMsg.OrderBy='SaleCount asc'   
-              }else if(val.order=='descending'){
-                  this.basicQMsg.OrderBy='SaleCount desc'
-              }else{
-                  this.basicQMsg.OrderBy=''
-              }
+      getSort(val) {
+        if (val.prop == 'Income') {
+          if (val.order == 'ascending') {
+            this.basicQMsg.OrderBy = 'Income asc'
+          } else if (val.order == 'descending') {
+            this.basicQMsg.OrderBy = 'Income desc'
+          } else {
+            this.basicQMsg.OrderBy = ''
+          }
+        } else if (val.prop == 'SaleCount') {
+          if (val.order == 'ascending') {
+            this.basicQMsg.OrderBy = 'SaleCount asc'
+          } else if (val.order == 'descending') {
+            this.basicQMsg.OrderBy = 'SaleCount desc'
+          } else {
+            this.basicQMsg.OrderBy = ''
           }
-          this.getBasicData()
+        }
+        this.getBasicData()
       },
-    
+
     },
     mounted() {
       this.getChange();