style：调整chart tooltip的显示

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -760,9 +760,8 @@ export default {
               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>`
               str += '<div style="padding-left: 10px;">'
               str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, oldDot)
-              str += '</div>'
               if (previousItem) {
-                str += '<div style="padding-left: 10px;">'
+                str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
                 let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
                 if (previousval === 0) {
                   previousval = Number(item.data[1]).toExponential(2)
@@ -777,9 +776,13 @@ export default {
                 }
 
                 str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2)
-                str += '</div>'
+                str += '</span>'
+              } else if (tip.alias.indexOf('Previous ') !== -1) {
+                str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
+                str += '</span>'
               }
               str += '</div>'
+              str += '</div>'
             })
             if (self.data.type === 'stackArea' || self.isStackArea) {
               if (!self.stackTotalColor || self.stackTotalColor == '') {
@@ -1195,6 +1198,27 @@ export default {
                       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>`
                       str += '<div style="padding-left: 10px;">'
                       str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
+                      if (previousItem) {
+                        str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
+                        let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
+                        if (previousval === 0) {
+                          previousval = Number(item.data[1]).toExponential(2)
+                        }
+                        let minusVal = 0
+                        if (previousval <= val) {
+                          minusVal = val - previousval
+                          str += '+'
+                        } else {
+                          minusVal = previousval - val
+                          str += '-'
+                        }
+
+                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2)
+                        str += '</span>'
+                      } else if (tip.alias.indexOf('Previous ') !== -1) {
+                        str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
+                        str += '</span>'
+                      }
                       str += '</div>'
                       if (previousItem) {
                         str += '<div style="padding-left: 10px;">'

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -17,16 +17,16 @@
 </template>
 
 <script>
-  import * as echarts from 'echarts'
+import * as echarts from 'echarts'
-  import chartDataFormat from '../../../charts/chartDataFormat'
+import chartDataFormat from '../../../charts/chartDataFormat'
-  import loading from '../../../common/loading'
+import loading from '../../../common/loading'
-  import chartConfig from './chartConfig'
+import chartConfig from './chartConfig'
-  import bus from '../../../../libs/bus'
+import bus from '../../../../libs/bus'
-  import EleResize from '../../../common/js/divResize'
+import EleResize from '../../../common/js/divResize'
-  import { randomcolor } from '../../../common/js/radomcolor/randomcolor'
+import { randomcolor } from '../../../common/js/radomcolor/randomcolor'
-  // import * as mapGeoJson from "../../../common/js/world";
+// import * as mapGeoJson from "../../../common/js/world";
 
-  export default {
+export default {
   name: 'chart',
   components: {
     loading: loading
@@ -437,11 +437,9 @@
         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: ${item.color};}'></span>${alias || item.seriesName}:  </div>`
         str += '<div style="padding-left: 10px;">'
         str += chartDataFormat.getUnit(this.unit).compute(val, null, 2)
-          str += '</div>'
-
         const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
         if (previousItem) {
-            str += '<div style="padding-left: 10px;">'
+          str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
           let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
           if (previousval === 0) {
             previousval = Number(item.data[1]).toExponential(2)
@@ -456,9 +454,14 @@
           }
 
           str += chartDataFormat.getUnit(this.unit).compute(minusVal, null, 2)
-            str += '</div>'
+          str += '</span>'
+        } else if (alias.indexOf('Previous ') !== -1) {
+          str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
+          str += '</span>'
         }
         str += '</div>'
+
+        str += '</div>'
       })
       str += '</div>'
       return str
@@ -594,7 +597,7 @@
           EleResize.off(this.$el, this.resize, this.chartType); */
     }
   }
-  }
+}
 </script>
 <!--<style>
  @import "../../../charts/chart.scss";