feat：endpoint 全屏 添加比较差值

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

@@ -181,17 +181,17 @@
 </template>
 
 <script>
-  import axios from 'axios'
+import axios from 'axios'
-  import * as echarts from 'echarts'
+import * as echarts from 'echarts'
-  import bus from '../../libs/bus'
+import bus from '../../libs/bus'
-  import loading from '../common/loading'
+import loading from '../common/loading'
-  import chartDataFormat from './chartDataFormat'
+import chartDataFormat from './chartDataFormat'
-  import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
+import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
-  import chartConfig from '../page/dashboard/overview/chartConfig'
+import chartConfig from '../page/dashboard/overview/chartConfig'
-  import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
+import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
-  import { getMetricTypeValue } from '../common/js/tools'
+import { getMetricTypeValue } from '../common/js/tools'
 
-  export default {
+export default {
   name: 'lineChartBlock',
   components: {
     loading: loading
@@ -1971,6 +1971,6 @@
     setChart(this.chartIndex, null)
     window.removeEventListener('resize', this.chartResize)
   }
-  }
+}
 
 </script>

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
@@ -422,6 +422,9 @@ export default {
             str += '<br/>'
           }
           if (alias.indexOf('Previous ') !== -1 && minusFlag) {
+            if (i !== 0) {
+              str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
+            }
             const value = item.data[0] - this.minusTime
             const tData = new Date(value)
             str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
@@ -435,6 +438,26 @@ export default {
           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;">'
+            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(this.unit).compute(minusVal, null, 2)
+            str += '</div>'
+          }
           str += '</div>'
         })
         str += '</div>'
@@ -571,7 +594,7 @@ export default {
           EleResize.off(this.$el, this.resize, this.chartType); */
       }
     }
-}
+  }
 </script>
 <!--<style>
  @import "../../../charts/chart.scss";