优化数据

public/index.html

@@ -5,9 +5,9 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="icon" href="<%= BASE_URL %>favicon1.ico">
   <title>
-    <%= htmlWebpackPlugin.options.title %>
+    JOLIJOLI数据
   </title>
   <style>
     body {

src/views/BprogramAmount/BprogramAmount.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="chinaMap">
+    <div class="map" ref="MapMountNode"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["listData"],
+  data() {
+    return {};
+  },
+  methods: {
+    //先定义个方法
+    myEcharts() {
+      //把echarts绑定到显示元素上
+      const myChart = this.$echarts.init(this.$refs.MapMountNode);
+      //设置图表属性
+      //   经营数据
+      const option = {
+        color: ["#fc8452"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "7%",
+          right: "4%",
+          bottom: "3%",
+          top:'1%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "value",
+          },
+        ],
+        yAxis: [
+          {
+            type: "category",
+            axisTick: {
+              show: false,
+            },
+            data: [
+              "单次三个项目",
+              "单次两个项目",
+              "三次到店用户数",
+              "两次到店用户数",
+              "总用户数",
+            ],
+          },
+        ],
+        series: [
+          {
+            name: "数量",
+            type: "bar",
+            label: {
+              show: true,
+              position: "inside",
+            },
+            emphasis: {
+              focus: "series",
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //开启显示数值
+                  position: "right", //数值在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: "#9b9ca2", //字体颜色
+                    fontSize: 14, //字体大小
+                  },
+                },
+              },
+            },
+            data: [
+              this.listData.three_project,
+              this.listData.two_project,
+              this.listData.user_three,
+              this.listData.user_two,
+              this.listData.total_user,
+            ],
+          },
+        ],
+      };
+
+      //数据绑定到表格
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize(); //myChart指自己定义的echartsDom对象
+      });
+    },
+  },
+  // 监听父组件传过来的值的变化
+  watch: {
+    listData: {
+      handler(val) {
+        this.myEcharts();
+      },
+    },
+  },
+  mounted() {
+    this.myEcharts();
+  },
+};
+</script>
+
+<style scoped>
+.map {
+  width: 96%;
+  /* height: 280px; */
+  height: 22vh;
+  /* border: 1px solid saddlebrown; */
+}
+</style>

src/views/cardExpend/cardExpend.vue

@@ -31,7 +31,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: ["次卡购买总次数", "次卡剩余人数", "此卡剩余总数"],
+          data: ["次卡购买总次数", "次卡剩余人数", "次卡剩余总数"],
           axisLabel: { interval: 0, rotate: 30 },
         },
         yAxis: {

src/views/demo02.vue

@@ -99,6 +99,14 @@
               ></programAmount
             ></el-card>
           </div>
+          <div class="center-center">
+            <el-card
+              ><BprogramAmount
+                v-if="listData"
+                :listData="listData"
+              ></BprogramAmount
+            ></el-card>
+          </div>
           <div class="center-bottom">
             <el-card
               ><div>
@@ -150,6 +158,7 @@ import productRatio from "./productRatio/productRatio.vue";
 import rechargeData from "./rechargeData/rechargeData.vue";
 import cardExpend from "./cardExpend/cardExpend.vue";
 import productData from "./productData/productData.vue";
+import BprogramAmount from "./BprogramAmount/BprogramAmount.vue";
 import { getStoreList, getData } from "../api/index"; //获取店铺列表和数据大屏数据
 export default {
   components: {
@@ -162,6 +171,7 @@ export default {
     rechargeData,
     cardExpend,
     productData,
+    BprogramAmount
   },
   data() {
     return {
@@ -291,11 +301,12 @@ export default {
     // 选择时间
     selectTime(e) {
       var startTime = this.getDateStr(e[0]) + " 00:00:00";
-      var endTime = this.getDateStr(e[1]) + " 00:00:00";
+      var endTime = this.getDateStr(e[1]) + " 23:59:59";
       var start_time = Date.parse(startTime) / 1000;
       var end_time = Date.parse(endTime) / 1000;
       this.start_time = start_time;
       this.end_time = end_time;
+      console.log(start_time, end_time);
       this.getListData();
     },
     // 刷新页面
@@ -409,7 +420,12 @@ export default {
       height: 100%;
       margin-right: 15px;
       .center-top {
-        height: 73%;
+        height: 41%;
+        width: 100%;
+      }
+      .center-center {
+        margin-top: 15px;
+        height: 30%;
         width: 100%;
       }
       .center-bottom {

src/views/programAmount/programAmount.vue

@@ -49,7 +49,6 @@ export default {
               show: false,
             },
             data: [
-              "总用户数",
               "总测肤用户数",
               "付费总用户数",
               "充值总用户数",
@@ -57,10 +56,6 @@ export default {
               "美妆购买总用户数",
               "新注册用户数",
               "新测肤用户数",
-              "单次两个项目",
-              "3次到店用户数",
-              "单次三个项目",
-              "2次到店用户数",
             ],
           },
         ],
@@ -89,7 +84,6 @@ export default {
               },
             },
             data: [
-              this.listData.total_user,
               this.listData.total_skin,
               this.listData.total_consumer_user,
               this.listData.total_recharge_user,
@@ -97,10 +91,6 @@ export default {
               this.listData.beauty_products,
               this.listData.new_user,
               this.listData.new_skin,
-              this.listData.two_project,
-              this.listData.user_three,
-              this.listData.three_project,
-              this.listData.user_two,
             ],
           },
         ],
@@ -131,7 +121,7 @@ export default {
 .map {
   width: 96%;
   /* height: 280px; */
-  height: 56vh;
+  height: 31vh;
   /* border: 1px solid saddlebrown; */
 }
 </style>