提交

src/views/Region/index.vue

@@ -159,21 +159,25 @@
             </el-table-column>
           </el-table>
           <br />
-          <div v-if="item.name" class="item">区域名称：{{ item.name }}</div>
-          <div v-if="item.name" class="item">
-            活跃用户数：
-            <countTo
-              :startVal="item.userSum"
-              :endVal="item.userSum"
-              :duration="100"
-            ></countTo>
-          </div>
-          <div v-if="item.name" class="item">
-            活跃用户占比：{{ item.distribution }}
-          </div>
         </el-col>
         <el-col :span="18">
-          <div ref="regionChart"></div>
+          <div style="position: relative">
+            <div style="position: absolute; top: 10px; left: 10px">
+              <div v-if="item.name" class="item">区域名称：{{ item.name }}</div>
+              <div v-if="item.name" class="item">
+                活跃用户数：
+                <countTo
+                  :startVal="item.userSum"
+                  :endVal="item.userSum"
+                  :duration="100"
+                ></countTo>
+              </div>
+              <div v-if="item.name" class="item">
+                活跃用户占比：{{ item.distribution }}
+              </div>
+            </div>
+            <div ref="regionChart"></div>
+          </div>
         </el-col>
       </el-row>
     </el-card>
@@ -305,24 +309,32 @@ export default {
       chart.resize({
         height: this.$refs.regionChart.offsetWidth * 1,
       });
-      let min = list[list.length - 1].userSum;
+    //   let min = list[list.length - 1].userSum;
       const p = {
         tooltip: {
           confine: true,
           trigger: "item",
-          formatter: function(e){
-            if(e.value) return e.name + "<br />" + (e.value || "")
-            return ""
+          formatter: function (e) {
+            if (e.value) return e.name + "<br />" + (e.value || "");
+            return "";
           },
         },
         visualMap: {
-          min,
-          max: list[0].userSum,
-          realtime: false,
-          calculable: true,
-          inRange: {
-            color: ["lightskyblue", "yellow", "orangered"],
-          },
+          //   min,
+          //   max: list[0].userSum,
+          //   realtime: false,
+          //   calculable: true,
+          //   inRange: {
+          //     color: ["lightskyblue", "yellow", "orangered"],
+          //   },
+          type: "piecewise",
+          pieces: [
+            {min: 0, max: 500, label: "活跃用户数< 5000", color: '#02a7f0'},
+            {max: 1000, min: 500, label: "500<=活跃用户数< 1000", color: '#95f204'},
+            {min: 1000, max: 2500, label: "1000<=活跃用户数< 2500", color: '#ffff00'},
+            {min: 2500, max: 5000, label: "2500<= 活跃用户数< 5000", color: '#f59a23'},
+            {min: 5000, label: "活跃用户数>= 5000", color: '#d9001b'},
+          ],
         },
         series: [
           {