fix: y轴单位处理、折线图高度处理

src/views/charts/charts/ChartEchart.vue

@@ -182,31 +182,33 @@ export default {
         })
       }
 
-      const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
-      const gridTop = 10 + 27 * rows
-
       const gridTemplate = this.chartOption.grid
+      // option中默认单位是数字，当单位是字节、百分比、时间时，额外处理
       if (chartParams.unitType === unitTypes.byte) {
-        this.chartOption.yAxis.axisLabel.formatter = function (
-          value,
-          index,
-          a,
-          b
-        ) {
-          return unitConvert(value, unitTypes.byte).join(' ')
+        this.chartOption.yAxis.axisLabel.formatter = function (value) {
+          return unitConvert(value, unitTypes.byte).join('')
         }
         this.chartOption.grid = {
           ...gridTemplate,
-          top: gridTop,
           left: 75
         }
-      } else {
-        this.chartOption.grid = {
-          ...gridTemplate,
-          top: gridTop
+      } else if (chartParams.unitType === unitTypes.percent) {
+        this.chartOption.yAxis.axisLabel.formatter = function (value) {
+          return unitConvert(value, unitTypes.percent).join('')
+        }
+      } else if (chartParams.unitType === unitTypes.time) {
+        this.chartOption.yAxis.axisLabel.formatter = function (value) {
+          return unitConvert(value, unitTypes.time).join('')
         }
       }
 
+      if (chartParams.showLegend) {
+        const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
+        this.chartOption.grid = {
+          ...this.chartOption.grid,
+          top: 10 + 27 * rows
+        }
+      }
       this.loadEchart()
     },
 

src/views/charts/charts/ChartEchartWithStatistics.vue

@@ -12,6 +12,7 @@ import {
 } from '@/views/charts/charts/tools'
 import chartEchartMixin from './chart-echart-mixin'
 import unitConvert from '@/utils/unit-convert'
+import {unitTypes} from "@/utils/constants";
 
 export default {
   name: 'ChartEchartWithStatistics',
@@ -105,6 +106,25 @@ export default {
           markLine: markLine
         }
       }
+      const gridTemplate = this.chartOption.grid
+      // option中默认单位是数字，当单位是字节、百分比、时间时，额外处理
+      if (chartParams.unitType === unitTypes.byte) {
+        this.chartOption.yAxis.axisLabel.formatter = function (value) {
+          return unitConvert(value, unitTypes.byte).join('')
+        }
+        this.chartOption.grid = {
+          ...gridTemplate,
+          left: 75
+        }
+      } else if (chartParams.unitType === unitTypes.percent) {
+        this.chartOption.yAxis.axisLabel.formatter = function (value) {
+          return unitConvert(value, unitTypes.percent).join('')
+        }
+      } else if (chartParams.unitType === unitTypes.time) {
+        this.chartOption.yAxis.axisLabel.formatter = function (value) {
+          return unitConvert(value, unitTypes.time).join('')
+        }
+      }
       this.loadEchart(1, true)
     },
 

src/views/charts/charts/options/line.js

@@ -21,8 +21,8 @@ export const line = {
   yAxis: {
     type: 'value',
     axisLabel: {
-      formatter: function (value, index, a, b) {
-        return unitConvert(value, unitTypes.number).join(' ')
+      formatter: function (value) {
+        return unitConvert(value, unitTypes.number, null, null, 0).join(' ')
       }
     }
   },
@@ -30,7 +30,7 @@ export const line = {
   grid: {
     left: 55,
     bottom: 30,
-    top: 100,
+    top: 20,
     right: 25
   },
   color: chartColor,
@@ -87,7 +87,7 @@ export const lineWithStatistics = {
     type: 'value',
     axisLabel: {
       formatter: function (value, index) {
-        return unitConvert(value, unitTypes.number).join(' ')
+        return unitConvert(value, unitTypes.number, null, null, 0).join(' ')
       }
     }
   },