优化大屏

src/views/BprogramAmount/BprogramAmount.vue

@@ -44,11 +44,12 @@ export default {
               show: false,
             },
             data: [
+              "美妆购买总用户数",
               "单次三个项目",
               "单次两个项目",
               "三次到店用户数",
               "两次到店用户数",
-              "美妆购买总用户数",
+              '总付费用户数',
               "总用户数",
             ],
           },
@@ -78,11 +79,12 @@ export default {
               },
             },
             data: [
+              this.listData.beauty_products,
               this.listData.three_project,
               this.listData.two_project,
               this.listData.user_three,
               this.listData.user_two,
-              this.listData.beauty_products,
+              this.listData.total_consumer_users,
               this.listData.total_user,
             ],
           },

src/views/demo02.vue

@@ -2,7 +2,7 @@
   <!-- <Resize> -->
   <div class="boxx">
     <!-- 标题 -->
-    <div class="title">jolijoli实时数据大屏</div>
+    <div class="title">Jolijoli实时数据大屏</div>
     <div class="box">
       <!-- 图表 -->
       <div class="pic">
@@ -114,7 +114,8 @@
                   v-if="listData"
                   :listData="listData.product_ratio"
                 ></product-ratio
-                ><project-ratio
+                >
+                <project-ratio
                   v-if="listData"
                   :listData="listData.project_proportion"
                 ></project-ratio></div

src/views/productRatio/productRatio.vue

@@ -15,6 +15,10 @@ export default {
   methods: {
     // 保存项目top10信息
     getTopList() {
+      this.topList = [];
+      if(this.listData==''){
+        return
+      }
       this.listData.forEach((item) => {
         let arr = {};
         arr.value = item.num;
@@ -66,8 +70,10 @@ export default {
   watch: {
     listData: {
       handler(val) {
+        this.getTopList();
         this.myEcharts();
       },
+      deep: true, // 深度监听父组件传过来对象变化
     },
   },
   mounted() {

src/views/programAmount/programAmount.vue

@@ -32,9 +32,10 @@ export default {
           },
         },
         grid: {
-          left: "3%",
+          left: "4%",
           right: "4%",
-          bottom: "3%",
+          bottom: "2%",
+          top:'19%',
           containLabel: true,
         },
         xAxis: [
@@ -50,9 +51,9 @@ export default {
             },
             data: [
               "总测肤用户数",
-              "付费总用户数",
-              "充值总用户数",
-              "多次卡购买总用户数",
+              "付费用户数",
+              "充值用户数",
+              "多次卡购买用户数",
               "新注册用户数",
               "新测肤用户数",
             ],
@@ -119,7 +120,7 @@ export default {
 .map {
   width: 96%;
   /* height: 280px; */
-  height: 31vh;
+  height: 26vh;
   /* border: 1px solid saddlebrown; */
 }
 </style>

src/views/projectRatio/projectRatio.vue

@@ -15,12 +15,16 @@ export default {
   methods: {
     // 保存项目top10信息
     getTopList() {
-      this.listData.forEach(item=>{
-        let arr = {}
-        arr.value = item.num
-        arr.name = item.project_name
-        this.topList.push(arr)
-      })
+      this.topList = [];
+      if (this.listData == "") {
+        return;
+      }
+      this.listData.forEach((item) => {
+        let arr = {};
+        arr.value = item.num;
+        arr.name = item.project_name;
+        this.topList.push(arr);
+      });
     },
     //先定义个方法
     myEcharts() {
@@ -44,7 +48,7 @@ export default {
             // name: "Access From",
             type: "pie",
             radius: "50%",
-            data:this.topList,
+            data: this.topList,
             // data: [
             //   {
             //     name: this.listData[0].project_name,
@@ -80,8 +84,10 @@ export default {
   watch: {
     listData: {
       handler(val) {
+        this.getTopList();
         this.myEcharts();
       },
+      deep: true, // 深度监听父组件传过来对象变化
     },
   },
   mounted() {