CN-53 perf: cn-53第5条

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;

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) {

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)
+}

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)
         }
       }
     }