From 0e6a2a8a333bc717fb47edd3f5d987a3c1ce19d4 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 31 Aug 2021 16:49:31 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-953=20fix:=20=E4=BC=98=E5=8C=96tooltip?=
 =?UTF-8?q?=E6=95=B0=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts/chart-bar-statistics.vue           |  9 +----
 .../src/components/charts/chartPreview.vue    | 11 ++---
 .../components/charts/line-chart-block.vue    | 40 ++++---------------
 .../src/components/common/js/tools.js         |  8 ++++
 .../page/dashboard/overview/chart.vue         |  6 +--
 5 files changed, 23 insertions(+), 51 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-bar-statistics.vue b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
index d2f18c8d5..abac0b23f 100644
--- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue
+++ b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
@@ -94,6 +94,7 @@ import * as echarts from 'echarts'
 import { getChart, setChart, getMousePoint } from '../common/js/common'
 import chartConfig from '../page/dashboard/overview/chartConfig'
 import { randomcolor } from '../common/js/radomcolor/randomcolor'
+import {formatScientificNotation} from "@/components/common/js/tools";
 export default {
   name: 'pieChart', // 饼图 或者 柱状图的统计
   components: {
@@ -345,13 +346,7 @@ export default {
             show: true,
             fontSize: 10,
             formatter (val, index) {
-              let value = val
-              if (val !== 0) {
-                value = parseFloat(Number(val).toFixed(2))
-                if (value === 0) {
-                  value = Number(val).toExponential(2)
-                }
-              }
+              const value = formatScientificNotation(val, 2)
               // const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
               if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) {
                 dot = 2
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index 2a7fc7eba..91b82f7b8 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -200,6 +200,7 @@ import chartAlertList from './chart-alert-list'
 import chartConfig from '../page/dashboard/overview/chartConfig'
 import diagram from '@/components/common/ChartDiagram/diagram'
 import moment from 'moment-timezone'
+import {formatScientificNotation} from "@/components/common/js/tools";
 export default {
   name: 'chartPreview',
   components: {
@@ -906,10 +907,7 @@ export default {
                     [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
                 str += '<br/>'
               }
-              let val = parseFloat(Number(item.data[1]).toFixed(2))
-              if (val === 0) {
-                val = Number(item.data[1]).toExponential(2)
-              }
+              const val = formatScientificNotation(item.data[1], 2)
               sum += self.numberWithEConvent(val)
               str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
               str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
@@ -1084,10 +1082,7 @@ export default {
                         [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
                     str += '<br/>'
                   }
-                  let val = parseFloat(Number(item.data[1]).toFixed(2))
-                  if (val === 0) {
-                    val = Number(item.data[1]).toExponential(2)
-                  }
+                  const val = formatScientificNotation(item.data[1], 2)
                   sum += self.numberWithEConvent(val)
                   str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
                   str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index c65df0484..74ac8e03b 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -203,7 +203,7 @@ import chartDataFormat from './chartDataFormat'
 import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
 import chartConfig from '../page/dashboard/overview/chartConfig'
 import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
-import { getMetricTypeValue, chartResizeTool } from '../common/js/tools'
+import { getMetricTypeValue, chartResizeTool, formatScientificNotation } from '../common/js/tools'
 import moment from 'moment-timezone'
 
 export default {
@@ -778,10 +778,7 @@ export default {
               } else if (paramsDot > 6) {
                 paramsDot = 6
               }
-              let val = item.data[1] ? parseFloat(Number(item.data[1]).toFixed(paramsDot)) : ''
-              if (val === 0) {
-                val = Number(item.data[1]).toExponential(paramsDot)
-              }
+              const val = formatScientificNotation(item.data[1], paramsDot)
               sum += self.numberWithEConvent(val)
               str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
               str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
@@ -789,10 +786,7 @@ export default {
               str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, paramsDot)
               if (previousItem) {
                 str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
-                let previousval = parseFloat(Number(previousItem.data[1]).toFixed(paramsDot))
-                if (previousval === 0) {
-                  previousval = Number(item.data[1]).toExponential(paramsDot)
-                }
+                const previousval = formatScientificNotation(item.data[1], paramsDot)
                 let minusVal = 0
                 if (previousval <= val) {
                   minusVal = val - previousval
@@ -922,13 +916,7 @@ export default {
             show: true,
             fontSize: 10,
             formatter: function (val, index) {
-              let value = val
-              if (val !== 0) {
-                value = parseFloat(Number(val).toFixed(2))
-                if (value === 0) {
-                  value = Number(val).toExponential(2)
-                }
-              }
+              const value = formatScientificNotation(val, 2)
               let chartUnit = chartInfo.unit
               chartUnit = chartUnit || 2
               const unit = chartDataFormat.getUnit(chartUnit)
@@ -1081,10 +1069,7 @@ export default {
                         str += bus.timeFormate(tData)
                         str += '</div>'
                       }
-                      let val = parseFloat(Number(item.data[1]).toFixed(2))
-                      if (val === 0) {
-                        val = Number(item.data[1]).toExponential(2)
-                      }
+                      const val = formatScientificNotation(item.data[1], 2)
                       sum += self.numberWithEConvent(val)
                       str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
                       str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
@@ -1261,10 +1246,7 @@ export default {
                         minusFlag = false
                       }
                       const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
-                      let val = parseFloat(Number(item.data[1]).toFixed(2))
-                      if (val === 0) {
-                        val = Number(item.data[1]).toExponential(2)
-                      }
+                      const val = formatScientificNotation(item.data[1], 2)
                       sum += self.numberWithEConvent(val)
                       str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
                       str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
@@ -1272,10 +1254,7 @@ export default {
                       str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, self.chartDot)
                       if (previousItem) {
                         str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
-                        let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
-                        if (previousval === 0) {
-                          previousval = Number(item.data[1]).toExponential(2)
-                        }
+                        const previousval = formatScientificNotation(previousItem.data[1], 2)
                         let minusVal = 0
                         if (previousval <= val) {
                           minusVal = val - previousval
@@ -1294,10 +1273,7 @@ export default {
                       str += '</div>'
                       if (previousItem) {
                         str += '<div style="padding-left: 10px;">'
-                        let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
-                        if (previousval === 0) {
-                          previousval = Number(item.data[1]).toExponential(2)
-                        }
+                        const previousval = formatScientificNotation(previousItem.data[1], 2)
                         let minusVal = 0
                         if (previousval <= val) {
                           minusVal = val - previousval
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 0282325da..baaa10b7d 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -817,6 +817,14 @@ export function hideTableTooltip () {
   dom.innerHTML = ''
 }
 
+/* 数字转换保留小数，数字很小时转为科学计数法, dot为保留几位小数 */
+export function formatScientificNotation (value, dot = 2) {
+  let val = value ? parseFloat(Number(value).toFixed(dot)) : 0
+  if (val === 0) {
+    val = Number(value).toPrecision(dot + 1)
+  }
+  return val
+}
 /* function getTdDom(dom) {
   let tagName = dom.tagName;
   if (tagName.toLowerCase() === 'td') {
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index 065ec86b4..120b798b2 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -24,6 +24,7 @@ import chartConfig from './chartConfig'
 import bus from '../../../../libs/bus'
 import EleResize from '../../../common/js/divResize'
 import { randomcolor } from '../../../common/js/radomcolor/randomcolor'
+import { formatScientificNotation } from '@/components/common/js/tools'
 // import * as mapGeoJson from "../../../common/js/world";
 
 export default {
@@ -449,10 +450,7 @@ export default {
         const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
         if (previousItem) {
           str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
-          let previousval = parseFloat(Number(previousItem.data[1]).toFixed(dot))
-          if (previousval === 0) {
-            previousval = Number(item.data[1]).toExponential(2)
-          }
+          const previousval = formatScientificNotation(previousItem.data[1], dot)
           let minusVal = 0
           if (previousval <= val) {
             minusVal = val - previousval