2024.07.13 - 优化统计

src/views/dashboard/components/Counter.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="counter-wrapper">
     <div class="count">
-      <CountUp :endVal="count" :options="countUpOptions" />
+      <el-tooltip effect="light" :content="count + ''" placement="top">
+        <CountUp v-if="showCountUp" ref="countUpRef" :endVal="info.count" :options="countUpOptions" />
+      </el-tooltip>
       <div class="trend">
         <img v-if="[TREND_CONFIG.UP, TREND_CONFIG.DOWN].includes(trend)" :src="require(`../../../assets/images/dashboard/t-${trend}.png`)" alt="" />
         <span v-if="trend === TREND_CONFIG.STABILIZATION" style="color: #d8d8d8; font-weight: normal">--</span>
@@ -14,13 +16,13 @@
 <script>
 import CountUp from 'vue-countup-v2'
 import { TREND } from '../config'
+import { formatBigNumber } from '../utils'
 
 export default {
   props: {
     count: { type: Number, required: true },
     tip: { type: String, required: true },
-    trend: { type: String, default: '' }, // up/down/stabilization
-    decimalPlaces: { type: Number, default: 0 } // 支持几位小数
+    trend: { type: String, default: '' } // up/down/stabilization
   },
 
   components: { CountUp },
@@ -28,16 +30,36 @@ export default {
   data() {
     return {
       TREND_CONFIG: Object.freeze(TREND),
-      countUpOptions: {
-        useEasing: true,
-        useGrouping: true,
-        separator: ',',
-        decimal: '.',
-        prefix: '',
-        suffix: '',
-        decimalPlaces: this.decimalPlaces
-      }
+
+      info: { count: 0, unit: '' },
+      countUpOptions: null,
+      showCountUp: false
     }
+  },
+
+  watch: {
+    count: {
+      handler(newCount) {
+        if (newCount > 0) {
+          const res = formatBigNumber(newCount)
+          this.info.count = res.count * 1
+
+          this.countUpOptions = {
+            useEasing: true,
+            useGrouping: true,
+            separator: ',',
+            decimal: '.',
+            prefix: '',
+            suffix: res.unit || '',
+            decimalPlaces: newCount * 1 > 10000 ? 2 : 0
+          }
+
+          this.showCountUp = true
+        }
+      }
+    },
+
+    immediate: true
   }
 }
 </script>

src/views/dashboard/components/NetworkDistribution.vue

@@ -22,16 +22,17 @@ export default {
                 mapType: 'china', // 使用中国地图
                 data: newValue.map((item) => {
                   return {
-                    name: item.provinces.replace('省', ''),
+                    name: item.provinces,
                     value: JSON.stringify(item.nationalMapDataList)
                   }
                 }),
+                label: { show: true, color: '#fff' },
                 itemStyle: {
                   top: 0,
                   left: 0,
                   right: 0,
                   normal: { areaColor: '#249eff', borderColor: '#fff' },
-                  emphasis: { areaColor: '#0f57ff', label: { show: false } }
+                  emphasis: { areaColor: '#0f57ff', label: { color: '#fff' } }
                 }
               }
             ]

src/views/dashboard/index.vue

@@ -61,7 +61,7 @@
         <SelectionPane style="height: 360px" padding="0 24px">
           <el-tabs v-model="activeName" @tab-click="handleChangeTabPane">
             <el-tab-pane label="交易额" name="transactionAmountRef">
-              <DiagramsChart chartTitle="交易总额(万元)" ref="transactionAmountRef" :statisticalData="diagramsLeftData.transactionAmount"></DiagramsChart>
+              <DiagramsChart chartTitle="交易总额(元)" ref="transactionAmountRef" :statisticalData="diagramsLeftData.transactionAmount"></DiagramsChart>
             </el-tab-pane>
             <el-tab-pane label="订单量" name="orderQuantityRef">
               <DiagramsChart chartTitle="订单量(单)" ref="orderQuantityRef" :statisticalData="diagramsLeftData.orderQuantity"></DiagramsChart>

src/views/dashboard/utils.js

@@ -16,3 +16,30 @@ export const getMapDataItem = (title, value = 0) => {
             </li>
          `
 }
+
+/**
+ * 大数转换
+ * @param {number} 要转换的数字
+ */
+export const formatBigNumber = (number, decimalPlaces = 2) => {
+  if (typeof number !== 'number' && typeof number !== 'string') {
+    return console.warn(`Input must be a number or a string representation of a number. but get ${typeof number}`)
+  }
+  number = parseFloat(number)
+  if (Math.abs(number) < 10000) {
+    return { count: number.toFixed(decimalPlaces), unit: '' }
+  }
+  const units = ['', '万', '亿']
+  const unitIndex = Math.floor((parseInt(number).toString().length - 1) / 4)
+  const unit = units[Math.min(unitIndex, 2)]
+  let result
+  if (unitIndex > 0) {
+    result = (number / Math.pow(10, unitIndex * 4)).toFixed(decimalPlaces)
+  } else {
+    result = number.toFixed(decimalPlaces)
+  }
+  return {
+    count: result,
+    unit
+  }
+}

test.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <script>
+      const formatBigNumber = (number, decimalPlaces = 2) => {
+        debugger
+        if (typeof number !== 'number' && typeof number !== 'string') {
+          return console.warn(`Input must be a number or a string representation of a number. but get ${typeof number}`)
+        }
+        number = parseFloat(number)
+        if (Math.abs(number) < 10000) {
+          return { count: number.toFixed(decimalPlaces), unit: '' }
+        }
+        const units = ['', '万', '亿']
+        const unitIndex = Math.floor((parseInt(number).toString().length - 1) / 4)
+        const unit = units[Math.min(unitIndex, 2)]
+        let result
+        if (unitIndex > 0) {
+          result = (number / Math.pow(10, unitIndex * 4)).toFixed(decimalPlaces)
+        } else {
+          result = number.toFixed(decimalPlaces)
+        }
+        return {
+          count: result,
+          unit
+        }
+      }
+
+      formatBigNumber(3323805.27)
+    </script>
+  </body>
+</html>