CN-53 perf: cn-53第5条

2021-07-15 19:21:23 +08:00
parent bebd568b46
commit 5d40a941f0
5 changed files with 59 additions and 61 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,9 +33,9 @@
      }
    },
    "@amcharts/amcharts4-geodata": {
-      "version": "4.1.20",
-      "resolved": "https://registry.nlark.com/@amcharts/amcharts4-geodata/download/@amcharts/amcharts4-geodata-4.1.20.tgz",
-      "integrity": "sha1-qHu/yU7wPkx1PlaTjHYYritnR28="
+      "version": "4.1.21",
+      "resolved": "https://registry.nlark.com/@amcharts/amcharts4-geodata/download/@amcharts/amcharts4-geodata-4.1.21.tgz",
+      "integrity": "sha1-hBQT6H/FAU/xKb5bbx84F6dq93k="
    },
    "@babel/cli": {
      "version": "7.14.5",
@@ -3199,6 +3199,16 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
+        "gzip-size": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npm.taobao.org/gzip-size/download/gzip-size-5.1.1.tgz?cache=0&sync_timestamp=1605523244597&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgzip-size%2Fdownload%2Fgzip-size-5.1.1.tgz",
+          "integrity": "sha1-y5vuaS+HwGErIyhAqHOQTkwTUnQ=",
+          "dev": true,
+          "requires": {
+            "duplexer": "^0.1.1",
+            "pify": "^4.0.1"
+          }
+        },
        "ssri": {
          "version": "8.0.1",
          "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364626710&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -3207,6 +3217,27 @@
          "requires": {
            "minipass": "^3.1.1"
          }
+        },
+        "webpack-bundle-analyzer": {
+          "version": "3.9.0",
+          "resolved": "https://registry.nlark.com/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.9.0.tgz?cache=0&sync_timestamp=1621259099265&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.9.0.tgz",
+          "integrity": "sha1-9vlNsQj7V05BWtMT3kGicH0z7zw=",
+          "dev": true,
+          "requires": {
+            "acorn": "^7.1.1",
+            "acorn-walk": "^7.1.1",
+            "bfj": "^6.1.1",
+            "chalk": "^2.4.1",
+            "commander": "^2.18.0",
+            "ejs": "^2.6.1",
+            "express": "^4.16.3",
+            "filesize": "^3.6.1",
+            "gzip-size": "^5.0.0",
+            "lodash": "^4.17.19",
+            "mkdirp": "^0.5.1",
+            "opener": "^1.5.1",
+            "ws": "^6.0.0"
+          }
        }
      }
    },
@@ -8969,16 +9000,6 @@
      "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.6.tgz",
      "integrity": "sha1-/wQLKwhTsjw9MQJ1I3BvGIXXa+4="
    },
-    "gzip-size": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npm.taobao.org/gzip-size/download/gzip-size-5.1.1.tgz?cache=0&sync_timestamp=1605523244597&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgzip-size%2Fdownload%2Fgzip-size-5.1.1.tgz",
-      "integrity": "sha1-y5vuaS+HwGErIyhAqHOQTkwTUnQ=",
-      "dev": true,
-      "requires": {
-        "duplexer": "^0.1.1",
-        "pify": "^4.0.1"
-      }
-    },
    "handle-thing": {
      "version": "2.0.1",
      "resolved": "https://registry.npm.taobao.org/handle-thing/download/handle-thing-2.0.1.tgz",
@@ -16331,35 +16352,6 @@
        }
      }
    },
-    "webpack-bundle-analyzer": {
-      "version": "3.9.0",
-      "resolved": "https://registry.nlark.com/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.9.0.tgz?cache=0&sync_timestamp=1621259099265&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.9.0.tgz",
-      "integrity": "sha1-9vlNsQj7V05BWtMT3kGicH0z7zw=",
-      "dev": true,
-      "requires": {
-        "acorn": "^7.1.1",
-        "acorn-walk": "^7.1.1",
-        "bfj": "^6.1.1",
-        "chalk": "^2.4.1",
-        "commander": "^2.18.0",
-        "ejs": "^2.6.1",
-        "express": "^4.16.3",
-        "filesize": "^3.6.1",
-        "gzip-size": "^5.0.0",
-        "lodash": "^4.17.19",
-        "mkdirp": "^0.5.1",
-        "opener": "^1.5.1",
-        "ws": "^6.0.0"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.nlark.com/acorn/download/acorn-7.4.1.tgz?cache=0&sync_timestamp=1620134123724&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn%2Fdownload%2Facorn-7.4.1.tgz",
-          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
-          "dev": true
-        }
-      }
-    },
    "webpack-chain": {
      "version": "6.5.1",
      "resolved": "https://registry.npm.taobao.org/webpack-chain/download/webpack-chain-6.5.1.tgz",
--- a/src/components/charts/StatisticsLegend.vue
+++ b/src/components/charts/StatisticsLegend.vue
@@ -1,15 +1,15 @@
 <template>
  <div class="chart__legend">
    <div class="chart__table-top">
-      <div>Average</div>
-      <div>Maximum</div>
+      <div>Avg</div>
+      <div>Max</div>
    </div>
    <div class="chart__table-below">
      <div v-for="(item,index) in data" :key="index" class="table-below-box">
        <div class="table__below-color"><div :style="{backgroundColor: getChartColor(index)}"></div></div>
        <div class="table__below-title" :title="item.legend">{{item.legend}}</div>
-        <div class="table__below-statistics" :title="item.aggregation.max">{{item.aggregation.max}}</div>
-        <div class="table__below-statistics" :title="item.aggregation.avg">{{item.aggregation.avg}}</div>
+        <div class="table__below-statistics" :title="item.aggregation.max">{{shortFormatter(item.aggregation.max)}}</div>
+        <div class="table__below-statistics" :title="item.aggregation.avg">{{shortFormatter(item.aggregation.avg)}}</div>
      </div>
    </div>
  </div>
@@ -18,7 +18,7 @@

 <script>
 import { getChartColor } from '@/components/charts/chart-options'
-import { chartColor } from './chart-options'
+import { shortFormatter } from '@/components/charts/chartFormatter'
 export default {
  name: 'StatisticsLegend',
  props: {
@@ -35,7 +35,7 @@ export default {
  setup () {
    return {
      getChartColor,
-      chartColor
+      shortFormatter
    }
  }
 }
@@ -55,7 +55,6 @@ export default {
  border-bottom: #E7EAED 1px solid;
  display: flex;
  justify-content: flex-end;
-  padding-right: 15px;

  div {
    width: 80px;
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -4,7 +4,7 @@
 * @description chart option和一些工具
 */
 import { format } from 'echarts'
-import { shortFormatter } from './chartFormatter'
+import { shortFormatter, tooltipShortFormatter } from './chartFormatter'
 import _ from 'lodash'
 export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
  '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
@@ -22,6 +22,7 @@ const line = {
      overflow: 'truncate'
    },
    formatter: axiosFormatter,
+    show: true,
    className: 'nz-chart-tooltip',
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
  },
@@ -43,8 +44,12 @@ const line = {
  },
  color: chartColor,
  legend: {
+    tooltip: {
+      show: true,
+      formatter: '{a}'
+    },
    show: true,
-    right: 25,
+    right: 23,
    top: 8,
    orient: 'horizontal',
    icon: 'circle',
@@ -175,7 +180,8 @@ const lineStack = {
 const pieWithTable = {
  tooltip: {
    appendToBody: true,
-    trigger: 'item'
+    trigger: 'item',
+    formatter: tooltipShortFormatter
  },
  color: chartColor,
  animation: false,
@@ -310,7 +316,6 @@ function tooLongFormatter (name) {
 }
 function axiosFormatter (params) {
  let str = '<div>'
-  const sum = 0
  params.forEach((item, i) => {
    const tData = item.data[0]
    if (i === 0) {
--- a/src/components/charts/chartFormatter.js
+++ b/src/components/charts/chartFormatter.js
@@ -1,4 +1,4 @@
-const shortList = [' ', 'K', 'M', 'B', 'T', 'Quadrillion', 'Quintillion']
+const shortList = [' ', 'K', 'M', 'G', 'T', 'Quadrillion', 'Quintillion']
 function asciiCompute (num, ascii, units, dot = 2) {
  if (!num && num !== 0 && num !== '0') {
    return ''
@@ -19,3 +19,6 @@ function asciiCompute (num, ascii, units, dot = 2) {
 export function shortFormatter (value, index, dot = 2) {
  return asciiCompute(value, 1000, shortList, dot)
 }
+export function tooltipShortFormatter (obj, index, callback, dot = 2) {
+  return asciiCompute(obj.value, 1000, shortList, dot)
+}
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -174,6 +174,7 @@ import ChartMap from '@/components/charts/ChartMap'
 import PieTable from '@/components/charts/PieTable'
 import StatisticsLegend from '@/components/charts/StatisticsLegend'
 import ChartTablePagination from '@/components/charts/ChartTablePagination'
+import { shortFormatter } from '@/components/charts/chartFormatter'
 import { chartTableDefaultPageSize, chartTableTopOptions, storageKey, chartPieTableTopOptions } from '@/utils/constants'
 import { get } from '@/utils/http'
 import { replaceUrlPlaceholder, getCapitalGeo, getGeoData, lineToSpace } from '@/utils/tools'
@@ -264,7 +265,7 @@ export default {
      return `Server: ${data.serverRegion ? data.serverRegion : data.serverCountry}
          Client: ${data.clientRegion ? data.clientRegion : data.clientCountry}
          Sessions: ${data.sessions}
-          Bytes: ${data.bytes}`
+          Bytes: ${shortFormatter(data.bytes)}`
    },
    changeTab (tab) {
      this.activeTab = tab.paneName
@@ -382,11 +383,9 @@ export default {
            })
            const polygonTemplate = polygonSeries.mapPolygons.template
            polygonTemplate.tooltipText = '{name}: {value}'
+            // polygonTemplate.numberFormatter = new am4Core.NumberFormatter().bigNumberPrefixes
            polygonTemplate.nonScalingStroke = true
            polygonTemplate.strokeWidth = 0.5
-
-            const hs = polygonTemplate.states.create('hover')
-            // hs.properties.fill = am4Core.color('#3c5bdc')
          }
        }
      })
@@ -549,10 +548,10 @@ export default {
    },
    handleSingleValue () {
      return function (value) {
-        if (!Number(value)) {
-          return 0
+        if (!Number(value) && Number(value) !== 0) {
+          return '-'
        } else {
-          return Number(value) < 0.01 ? '< 0.01' : this.$_.round(value, 2)
+          return Number(value) < 0.01 ? '< 0.01' : shortFormatter(value)
        }
      }
    }