🦄 refactor(设备监控): 首次加载一个，添加根据维度计算y轴

src/views/pms/device/monitor/TdDeviceInfo.vue

@@ -76,6 +76,7 @@ const handleClickSpec = (modelName: string) => {
       selected: selectSpec.value
     }
   })
+  getIntervalArr()
 }
 
 const chartRef = ref<HTMLDivElement | null>(null)
@@ -121,9 +122,9 @@ const chartInit = () => {
 }
 
 // 映射区间相关
-let intervalArr: number[] = []
-let maxInterval = 0
-let minInterval = 0
+let intervalArr = ref<number[]>([])
+let maxInterval = ref(0)
+let minInterval = ref(0)
 
 // 1. 加载 specs
 const loadSpecs = async () => {
@@ -141,10 +142,8 @@ const loadSpecs = async () => {
   ]
 
   selectSpec.value = specs.value.reduce(
-    (acc, spec) => {
-      acc[spec.modelName] =
-        gatewayspecs.value.some((item) => item.modelName === spec.modelName) &&
-        !disabledIdentifier.value.includes(spec.identifier)
+    (acc, spec, index: number) => {
+      acc[spec.modelName] = index === 0
       return acc
     },
     {} as Record<string, boolean>
@@ -189,6 +188,10 @@ const initLoad = async (real_time: boolean = true) => {
 
     updateSingleSeries(identifier)
 
+    if (selectSpec.value[chartMap.value[identifier].name]) {
+      getIntervalArr()
+    }
+
     chartLoading.value = false
   }
 
@@ -229,30 +232,52 @@ const fetchIncrementData = () => {
   }
 }
 
-const render = () => {
-  if (!chartRef.value) return
+const getIntervalArr = (init: boolean = false) => {
+  const values: number[] = []
 
-  if (!chart) chart = echarts.init(chartRef.value)
-
-  chartInit()
-
-  const values = Object.values(chartMap.value).flatMap((item) => item.value.map((d) => d.value))
+  for (const [key, value] of Object.entries(selectSpec.value)) {
+    if (value) {
+      const identifier = specs.value.find((spec) => spec.modelName === key)?.identifier
+      values.push(...(chartMap.value[identifier]?.value?.map((item) => item.value) ?? []))
+    }
+  }
 
-  const maxVal = Math.max(...values, 10000)
+  const maxVal = values.length === 0 ? 1000 : Math.max(...values)
   const minVal = Math.min(...values, -100)
 
   const maxDigits = (Math.floor(maxVal) + '').length
-  const minDigits = (Math.floor(Math.abs(minVal)) + '').length - 1
+  const minDigits = (Math.floor(Math.abs(minVal)) + '').length - 2
   const interval = Math.max(maxDigits, minDigits)
 
-  maxInterval = interval
-  minInterval = minDigits
+  maxInterval.value = interval
+  minInterval.value = minDigits
 
-  intervalArr = [0]
+  intervalArr.value = [0]
   for (let i = 1; i <= interval; i++) {
-    intervalArr.push(Math.pow(10, i))
+    intervalArr.value.push(Math.pow(10, i))
   }
 
+  console.log('init :>> ', init)
+
+  if (!init) {
+    chart?.setOption({
+      yAxis: {
+        min: -minInterval.value,
+        max: maxInterval.value
+      }
+    })
+  }
+}
+
+const render = () => {
+  if (!chartRef.value) return
+
+  if (!chart) chart = echarts.init(chartRef.value)
+
+  chartInit()
+
+  getIntervalArr(true)
+
   chart.setOption({
     tooltip: {
       trigger: 'axis',
@@ -281,8 +306,8 @@ const render = () => {
     },
     yAxis: {
       type: 'value',
-      min: -minInterval,
-      max: maxInterval,
+      min: -minInterval.value,
+      max: maxInterval.value,
       interval: 1,
       axisLabel: {
         formatter: (v) => {
@@ -294,7 +319,8 @@ const render = () => {
     },
     legend: {
       data: Object.values(chartMap.value).map((i) => i.name),
-      selected: selectSpec.value
+      selected: selectSpec.value,
+      show: false
     },
     series: Object.keys(chartMap.value).map((identifier) => ({
       name: chartMap.value[identifier].name,
@@ -349,11 +375,12 @@ const mapData = ({ value, ts }) => {
   const isPositive = value > 0
   const absItem = Math.abs(value)
 
-  const min_value = Math.max(...intervalArr.filter((v) => v <= absItem))
-  const min_index = intervalArr.findIndex((v) => v === min_value)
+  const min_value = Math.max(...intervalArr.value.filter((v) => v <= absItem))
+  const min_index = intervalArr.value.findIndex((v) => v === min_value)
 
   const new_value =
-    (absItem - min_value) / (intervalArr[min_index + 1] - intervalArr[min_index]) + min_index
+    (absItem - min_value) / (intervalArr.value[min_index + 1] - intervalArr.value[min_index]) +
+    min_index
 
   return [ts, isPositive ? new_value : -new_value, value]
 }