liyongli 1 year ago
parent
commit
c069223833
1 changed files with 30 additions and 15 deletions
  1. 30 15
      src/views/Region/index.vue

+ 30 - 15
src/views/Region/index.vue

@@ -191,10 +191,27 @@
                   :duration="100"
                 ></countTo>
               </div>
+              <div v-if="item.name" class="item">
+                新增用户数:
+                <countTo
+                  :startVal="item.newUser"
+                  :endVal="item.newUser"
+                  :duration="100"
+                ></countTo>
+              </div>
               <div v-if="item.name" class="item">
                 活跃用户占比:{{ item.distribution }}
               </div>
             </div>
+            <el-select
+              v-model="dateType"
+              @change="createImage"
+              style="position: absolute; right: 0; top: 0; z-index: 1"
+              size="small"
+            >
+              <el-option label="用户数" value="userSum" />
+              <el-option label="新增用户数" value="newUser" />
+            </el-select>
             <div ref="regionChart"></div>
           </div>
         </el-col>
@@ -218,7 +235,7 @@ import {
 } from '@/api/index';
 
 import * as echarts from 'echarts';
-
+let data = {};
 // import config from "@/config/index";
 let chart = undefined;
 export default {
@@ -236,6 +253,7 @@ export default {
         cityType: '1',
         client: '',
       },
+      dateType: 'userSum',
       cycle: [],
       item: {},
       version: [],
@@ -325,19 +343,21 @@ export default {
                 value: v.userSum,
                 distribution: (v.distribution * 100).toFixed(2) - 0 + '%',
                 userSum: v.userSum,
+                newUser: v.newUser
               };
               break;
             }
           }
-          console.log(r);
-          this.createImage(list, r.range || []);
+          data = r || {};
+          this.createImage();
           chart && chart.hideLoading();
         })
         .catch(() => {
           chart && chart.clear() && chart.hideLoading();
         });
     },
-    createImage(list, range) {
+    createImage() {
+      const { list, range } = data;
       if (!chart) {
         chart = echarts.init(this.$refs.regionChart);
         window.onresize = chart.resize;
@@ -357,13 +377,6 @@ export default {
           },
         },
         visualMap: {
-          //   min,
-          //   max: list[0].userSum,
-          //   realtime: false,
-          //   calculable: true,
-          //   inRange: {
-          //     color: ["lightskyblue", "yellow", "orangered"],
-          //   },
           type: 'piecewise',
           pieces: range,
         },
@@ -377,9 +390,10 @@ export default {
             data: list.map(v => {
               return {
                 name: this.lastParams.cityType === '1' ? v.city : v.province,
-                value: v.userSum,
+                value: v[this.dateType],
                 distribution: (v.distribution * 100).toFixed(2) - 0 + '%',
                 userSum: v.userSum,
+                newUser: v.newUser,
               };
             }),
           },
@@ -392,7 +406,8 @@ export default {
       });
     },
     async getAppListFunc() {
-      const { r, li, appVersion, channel, clientList } = await this.getAppListOri();
+      const { r, li, appVersion, channel, clientList } =
+        await this.getAppListOri();
       let source = { length: 0 },
         appli = [];
       let appV = { length: 0 },
@@ -571,7 +586,7 @@ export default {
             this.lastParams.app,
             v.province,
             v.city,
-            v.userSum,
+            v[this.dateType],
             '\r\n',
           ].join(',');
         });
@@ -586,7 +601,7 @@ export default {
         // document.body.appendChild(link);
         link.click();
       });
-    },
+    }
   },
   components: {
     countTo,