NEZ-2511 feat：时序图支持配置Y轴最大最小刻度

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -137,15 +137,22 @@ export default {
         delete chartOption.tooltip.position
       }
       chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue, copies, unit, decimals)
-      chartOption.yAxis.minInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'min')
+
-      chartOption.yAxis.maxInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(chartOption.series.length / 5)
+      if (!this.chartInfo.param.min && !this.chartInfo.param.max) {
-      if (this.chartInfo.param.stack) {
+        chartOption.yAxis.minInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'min')
-        chartOption.yAxis.maxInterval = chartOption.yAxis.maxInterval * (Math.ceil(chartOption.series.length / 5) + 1)
+        chartOption.yAxis.maxInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(chartOption.series.length / 5)
-      }
+        if (this.chartInfo.param.stack) {
-      if (unit.type === 'Time') {
+          chartOption.yAxis.maxInterval = chartOption.yAxis.maxInterval * (Math.ceil(chartOption.series.length / 5) + 1)
-        delete chartOption.yAxis.minInterval
+        }
-        delete chartOption.yAxis.maxInterval
+        if (unit.type === 'Time' || unit.type === 'Date & Time') {
+          delete chartOption.yAxis.minInterval
+          delete chartOption.yAxis.maxInterval
+        }
+      } else {
+        chartOption.yAxis.min = this.chartInfo.param.min ? this.chartInfo.param.min : undefined
+        chartOption.yAxis.max = this.chartInfo.param.max ? this.chartInfo.param.max : undefined
       }
+
       if (chartOption.toolbox.feature) {
         chartOption.toolbox.feature.myStack.iconStyle.borderColor = this.isStack ? this.toolboxIconColor.active : this.toolboxIconColor.inactive
         chartOption.toolbox.feature.myStack.onclick = this.stackEvent() // 自定义stack事件
@@ -177,6 +184,9 @@ export default {
         const self = this
         getChart(this.chartId).off('dataZoom')
         getChart(this.chartId).on('dataZoom', function (params) {
+          if (this.chartInfo.param.min || this.chartInfo.param.max) {
+            return
+          }
           if (params.batch[0].startValue) {
             const chartInfo = self.chartInfo
             const dataArg = self.$loadsh.cloneDeep(self.series)
@@ -468,10 +478,12 @@ export default {
         self.isStack = !self.isStack
         // 改变tooltip
         option.tooltip[0].formatter = self.tooltipFormatter(self.isStack)
-        if (!self.chartInfo.param.stack) {
+        if (!self.chartInfo.param.min && !self.chartInfo.param.max) {
-          option.yAxis.maxInterval = option.yAxis.maxInterval / (Math.ceil(option.series.length / 5) + 1)
+          if (!self.chartInfo.param.stack) {
-        } else {
+            option.yAxis.maxInterval = option.yAxis.maxInterval / (Math.ceil(option.series.length / 5) + 1)
-          option.yAxis.maxInterval = option.yAxis.maxInterval * (Math.ceil(option.series.length / 5) + 1)
+          } else {
+            option.yAxis.maxInterval = option.yAxis.maxInterval * (Math.ceil(option.series.length / 5) + 1)
+          }
         }
         myChart.setOption(option)
       }

nezha-fronted/src/components/chart/chart/legend.vue

@@ -131,6 +131,9 @@ export default {
           chart.connect('timeSeriesGroup')
         }
         if (this.chartInfo.type !== 'pie' && this.chartInfo.type !== 'bar' && this.chartInfo.type !== 'treemap') {
+          if (this.chartInfo.param.min || this.chartInfo.param.max) {
+            return
+          }
           // 处理点击后的 Y轴
           const chartInfo = this.chartInfo
           const dataArg = this.series.filter((seriesItem, seriesIndex) => !this.isGrey[seriesIndex])

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -340,7 +340,7 @@
         </el-form-item>
       </div>
 
-      <div class="form-items--half-width-group" v-if="isGauge(chartConfig.type)">
+      <div class="form-items--half-width-group" v-if="isShowMinMax(chartConfig.type)">
         <!--min-->
         <el-form-item :label="$t('dashboard.panel.chartForm.min')" class="form-item--half-width">
           <el-input-number
@@ -348,7 +348,9 @@
             style="margin-top: 2px"
             :controls="false"
             @change="change"
-            show-word-limit v-model="chartConfig.param.min"/>
+            show-word-limit
+            :placeholder="chartConfig.param.min?'':'Auto'"
+            v-model="chartConfig.param.min"/>
         </el-form-item>
         <!--max-->
         <el-form-item :label="$t('dashboard.panel.chartForm.max')" class="form-item--half-width">
@@ -357,7 +359,9 @@
             style="margin-top: 2px"
             :controls="false"
             @change="change"
-            show-word-limit v-model="chartConfig.param.max"/>
+            show-word-limit
+            :placeholder="chartConfig.param.max?'':'Auto'"
+            v-model="chartConfig.param.max"/>
         </el-form-item>
       </div>
 
@@ -936,7 +940,7 @@ import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
 import VueTagsInput from '@johmun/vue-tags-input'
 import draggable from 'vuedraggable'
 import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
-import { isGauge, isSankey } from '@/components/chart/chart/tools'
+import { isSankey } from '@/components/chart/chart/tools'
 
 export default {
   name: 'chartConfig',
@@ -1041,7 +1045,6 @@ export default {
     }
   },
   methods: {
-    isGauge,
     isSankey,
     beforeInit () {
       this.promqlType = this.type

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -145,6 +145,7 @@ import systemChartConfig from '@/components/common/rightBox/chart/systemChartCon
 import panelChart from '@/components/chart/panelChart'
 import lodash from 'lodash'
 import bus from '@/libs/bus'
+import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
 
 const rz = {
   methods: {
@@ -166,7 +167,7 @@ export default {
       default: false
     }
   },
-  mixins: [rz, editRigthBox],
+  mixins: [rz, editRigthBox, chartTypeShow],
   components: {
     selectPanel,
     chartConfig,
@@ -246,7 +247,7 @@ export default {
         if (!params.groupId) {
           params.groupId = 0
         }
-        if (params.type !== 'gauge') {
+        if (!this.isShowMinMax(params.type)) {
           delete params.param.min
           delete params.param.max
         }
@@ -370,8 +371,6 @@ export default {
           height: 4,
           unit: 2,
           type: 'line',
-          min: 0,
-          max: 100,
           elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
           param: {
             stack: 0,
@@ -432,8 +431,6 @@ export default {
             nullType: 'null',
             statistics: 'last',
             text: 'value',
-            min: 0,
-            max: 100,
             enable: {
               thresholds: false,
               legend: true,
@@ -549,12 +546,6 @@ export default {
           obj.groupId = ''
         }
         if (obj.param) {
-          if (!obj.param.min) {
-            obj.param.min = 0
-          }
-          if (!obj.param.max) {
-            obj.param.max = 100
-          }
           if (!obj.param.text && obj.param.display) {
             obj.param.text = obj.param.display
           }

nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js

@@ -219,6 +219,16 @@ export default {
           return true
         default: return false
       }
+    },
+    isShowMinMax (type) {
+      switch (type) {
+        case 'line':
+        case 'area':
+        case 'point':
+        case 'gauge':
+          return true
+        default: return false
+      }
     }
   }
 }

nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue

@@ -275,7 +275,8 @@
             style="margin-top: 2px"
             :controls="false"
             @change="change"
-            show-word-limit v-model="chartConfig.param.min"/>
+            show-word-limit
+            v-model="chartConfig.param.min"/>
         </el-form-item>
         <!--max-->
         <el-form-item :label="$t('dashboard.panel.chartForm.max')" class="form-item--half-width">
@@ -284,7 +285,8 @@
             style="margin-top: 2px"
             :controls="false"
             @change="change"
-            show-word-limit v-model="chartConfig.param.max"/>
+            show-word-limit
+            v-model="chartConfig.param.max"/>
         </el-form-item>
       </div>
       <div class="form-items--half-width-group">