日报汇总曲线图刻度动态调整

src/views/pms/iotrhdailyreport/summary.vue

@@ -328,95 +328,151 @@ onUnmounted(() => {
   window.removeEventListener('resize', resizer)
 })
 
-const render = () => {
-  if (!chartRef.value) return
-
-  chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
-
-  window.addEventListener('resize', resizer)
-
-  const values: number[] = []
-
-  for (const [_name, key] of legend.value) {
-    values.push(...(chartData.value[key] || []))
+const selectedLegends = ref<Record<string, boolean>>({})
+const intervalArr = ref<number[]>([])
+const maxInterval = ref(0)
+const minInterval = ref(0)
+
+const calcIntervals = () => {
+  let maxVal = -Infinity
+  let minVal = Infinity
+  let hasData = false
+
+  for (const [name, key] of legend.value) {
+    if (selectedLegends.value[name] !== false) {
+      const dataset = chartData.value[key] || []
+      if (dataset.length > 0) {
+        hasData = true
+        for (const val of dataset) {
+          if (val > maxVal) maxVal = val
+          if (val < minVal) minVal = val
+        }
+      }
+    }
   }
 
-  const maxVal = values.length === 0 ? 10000 : Math.max(...values)
-  const minVal = values.length === 0 ? 0 : Math.min(...values) > 0 ? 0 : Math.min(...values)
+  if (!hasData) {
+    maxVal = 10000
+    minVal = 0
+  } else {
+    minVal = minVal > 0 ? 0 : minVal
+  }
 
   const maxDigits = (Math.floor(maxVal) + '').length
   const minDigits = minVal === 0 ? 0 : (Math.floor(Math.abs(minVal)) + '').length
   const interval = Math.max(maxDigits, minDigits)
 
-  const maxInterval = interval
-  const minInterval = minDigits
+  maxInterval.value = interval
+  minInterval.value = minDigits
 
-  const intervalArr = [0]
+  const arr = [0]
   for (let i = 1; i <= interval; i++) {
-    intervalArr.push(Math.pow(10, i))
+    arr.push(Math.pow(10, i))
   }
+  intervalArr.value = arr
+}
 
-  chart.setOption({
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'line'
-      },
-      formatter: (params) => {
-        let d = `${params[0].axisValueLabel}<br>`
-        let item = params.map((el) => {
-          return `<div class="flex items-center justify-between mt-1 gap-1">
-            <span>${el.marker} ${el.seriesName}</span>
-            <span>${chartData.value[legend.value[el.componentIndex][1]][el.dataIndex].toFixed(2)} ${el.seriesName.split(' ')[1]}</span>
-          </div>`
-        })
+const mapDataValue = (value: number) => {
+  if (value === 0) return 0
 
-        return d + item.join('')
-      }
-    },
-    legend: {
-      data: legend.value.map(([name]) => name),
-      show: true
-    },
-    xAxis: {
-      type: 'category',
-      data: xAxisData.value
-    },
-    yAxis: {
-      type: 'value',
-      min: -minInterval,
-      max: maxInterval,
-      interval: 1,
-      axisLabel: {
-        formatter: (v) => {
-          const num = v === 0 ? 0 : v > 0 ? Math.pow(10, v) : -Math.pow(10, -v)
-
-          return num.toLocaleString()
-        }
-      }
-    },
-    series: legend.value.map(([name, key]) => ({
-      name,
-      type: 'line',
-      smooth: true,
-      showSymbol: true,
-      data: chartData.value[key].map((value) => {
-        // return value
-        if (value === 0) return 0
+  const isPositive = value > 0
+  const absItem = Math.abs(value)
+
+  if (!intervalArr.value.length) return value
+
+  const min_value = Math.max(...intervalArr.value.filter((v) => v <= absItem))
+  const min_index = intervalArr.value.findIndex((v) => v === min_value)
+
+  const denominator =
+    min_index < intervalArr.value.length - 1
+      ? intervalArr.value[min_index + 1] - intervalArr.value[min_index]
+      : intervalArr.value[min_index] || 1
 
-        const isPositive = value > 0
-        const absItem = Math.abs(value)
+  const new_value = (absItem - min_value) / denominator + min_index
 
-        const min_value = Math.max(...intervalArr.filter((v) => v <= absItem))
-        const min_index = intervalArr.findIndex((v) => v === min_value)
+  return isPositive ? new_value : -new_value
+}
+
+const getSeries = () => {
+  return legend.value.map(([name, key]) => ({
+    name,
+    type: 'line',
+    smooth: true,
+    showSymbol: true,
+    data: chartData.value[key].map((value) => mapDataValue(value))
+  }))
+}
+
+const render = () => {
+  if (!chartRef.value) return
 
-        const new_value =
-          (absItem - min_value) / (intervalArr[min_index + 1] - intervalArr[min_index]) + min_index
+  if (!chart) {
+    chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
+    window.addEventListener('resize', resizer)
 
-        return isPositive ? new_value : -new_value
+    chart.on('legendselectchanged', (params: any) => {
+      selectedLegends.value = params.selected
+
+      calcIntervals()
+
+      chart?.setOption({
+        yAxis: {
+          min: -minInterval.value,
+          max: maxInterval.value
+        },
+        series: getSeries()
       })
-    }))
+    })
+  }
+
+  legend.value.forEach(([name]) => {
+    selectedLegends.value[name] = true
   })
+
+  calcIntervals()
+
+  chart.setOption(
+    {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'line' },
+        formatter: (params: any) => {
+          let d = `${params[0].axisValueLabel}<br>`
+          let item = params.map((el: any) => {
+            const realValue = chartData.value[legend.value[el.componentIndex][1]][el.dataIndex]
+            return `<div class="flex items-center justify-between mt-1 gap-1">
+            <span>${el.marker} ${el.seriesName}</span>
+            <span>${realValue.toFixed(2)} ${el.seriesName.split(' ')[1] || ''}</span>
+          </div>`
+          })
+          return d + item.join('')
+        }
+      },
+      legend: {
+        data: legend.value.map(([name]) => name),
+        selected: selectedLegends.value,
+        show: true
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxisData.value
+      },
+      yAxis: {
+        type: 'value',
+        min: -minInterval.value,
+        max: maxInterval.value,
+        interval: 1,
+        axisLabel: {
+          formatter: (v: number) => {
+            const num = v === 0 ? 0 : v > 0 ? Math.pow(10, v) : -Math.pow(10, -v)
+            return num.toLocaleString()
+          }
+        }
+      },
+      series: getSeries()
+    },
+    true
+  )
 }
 
 const handleDeptNodeClick = (node: any) => {

src/views/pms/iotrydailyreport/summary.vue

@@ -257,7 +257,7 @@ const chartData = ref<Record<string, number[]>>({
   cumulativeFootage: [],
   cumulativePowerConsumption: [],
   transitTime: [],
-    utilizationRate: []
+  utilizationRate: []
 })
 
 let chartLoading = ref(false)
@@ -303,96 +303,151 @@ onUnmounted(() => {
   window.removeEventListener('resize', resizer)
 })
 
-const render = () => {
-  if (!chartRef.value) return
-
-  chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
-
-  window.addEventListener('resize', resizer)
-
-  const values: number[] = []
-
-  for (const [_name, key] of legend.value) {
-    values.push(...(chartData.value[key] || []))
+const selectedLegends = ref<Record<string, boolean>>({})
+const intervalArr = ref<number[]>([])
+const maxInterval = ref(0)
+const minInterval = ref(0)
+
+const calcIntervals = () => {
+  let maxVal = -Infinity
+  let minVal = Infinity
+  let hasData = false
+
+  for (const [name, key] of legend.value) {
+    if (selectedLegends.value[name] !== false) {
+      const dataset = chartData.value[key] || []
+      if (dataset.length > 0) {
+        hasData = true
+        for (const val of dataset) {
+          if (val > maxVal) maxVal = val
+          if (val < minVal) minVal = val
+        }
+      }
+    }
   }
 
-  const maxVal = values.length === 0 ? 10000 : Math.max(...values)
-  const minVal = values.length === 0 ? 0 : Math.min(...values) > 0 ? 0 : Math.min(...values)
+  if (!hasData) {
+    maxVal = 10000
+    minVal = 0
+  } else {
+    minVal = minVal > 0 ? 0 : minVal
+  }
 
   const maxDigits = (Math.floor(maxVal) + '').length
   const minDigits = minVal === 0 ? 0 : (Math.floor(Math.abs(minVal)) + '').length
-
   const interval = Math.max(maxDigits, minDigits)
 
-  const maxInterval = interval
-  const minInterval = minDigits
+  maxInterval.value = interval
+  minInterval.value = minDigits
 
-  const intervalArr = [0]
+  const arr = [0]
   for (let i = 1; i <= interval; i++) {
-    intervalArr.push(Math.pow(10, i))
+    arr.push(Math.pow(10, i))
   }
+  intervalArr.value = arr
+}
 
-  chart.setOption({
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'line'
-      },
-      formatter: (params) => {
-        let d = `${params[0].axisValueLabel}<br>`
-        let item = params.map((el) => {
-          return `<div class="flex items-center justify-between mt-1 gap-1">
-            <span>${el.marker} ${el.seriesName}</span>
-            <span>${chartData.value[legend.value[el.componentIndex][1]][el.dataIndex].toFixed(2)} ${el.seriesName.split(' ')[1]}</span>
-          </div>`
-        })
+const mapDataValue = (value: number) => {
+  if (value === 0) return 0
 
-        return d + item.join('')
-      }
-    },
-    legend: {
-      data: legend.value.map(([name]) => name),
-      show: true
-    },
-    xAxis: {
-      type: 'category',
-      data: xAxisData.value
-    },
-    yAxis: {
-      type: 'value',
-      min: -minInterval,
-      max: maxInterval,
-      interval: 1,
-      axisLabel: {
-        formatter: (v) => {
-          const num = v === 0 ? 0 : v > 0 ? Math.pow(10, v) : -Math.pow(10, -v)
-
-          return num.toLocaleString()
-        }
-      }
-    },
-    series: legend.value.map(([name, key]) => ({
-      name,
-      type: 'line',
-      smooth: true,
-      showSymbol: true,
-      data: chartData.value[key].map((value) => {
-        // return value
-        if (value === 0) return 0
+  const isPositive = value > 0
+  const absItem = Math.abs(value)
+
+  if (!intervalArr.value.length) return value
+
+  const min_value = Math.max(...intervalArr.value.filter((v) => v <= absItem))
+  const min_index = intervalArr.value.findIndex((v) => v === min_value)
 
-        const isPositive = value > 0
-        const absItem = Math.abs(value)
+  const denominator =
+    min_index < intervalArr.value.length - 1
+      ? intervalArr.value[min_index + 1] - intervalArr.value[min_index]
+      : intervalArr.value[min_index] || 1
 
-        const min_value = Math.max(...intervalArr.filter((v) => v <= absItem))
-        const min_index = intervalArr.findIndex((v) => v === min_value)
+  const new_value = (absItem - min_value) / denominator + min_index
 
-        const new_value =
-          (absItem - min_value) / (intervalArr[min_index + 1] - intervalArr[min_index]) + min_index
+  return isPositive ? new_value : -new_value
+}
+
+const getSeries = () => {
+  return legend.value.map(([name, key]) => ({
+    name,
+    type: 'line',
+    smooth: true,
+    showSymbol: true,
+    data: chartData.value[key].map((value) => mapDataValue(value))
+  }))
+}
+
+const render = () => {
+  if (!chartRef.value) return
 
-        return isPositive ? new_value : -new_value
+  if (!chart) {
+    chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
+    window.addEventListener('resize', resizer)
+
+    chart.on('legendselectchanged', (params: any) => {
+      selectedLegends.value = params.selected
+
+      calcIntervals()
+
+      chart?.setOption({
+        yAxis: {
+          min: -minInterval.value,
+          max: maxInterval.value
+        },
+        series: getSeries()
       })
-    }))
+    })
+  }
+
+  legend.value.forEach(([name]) => {
+    selectedLegends.value[name] = true
   })
+
+  calcIntervals()
+
+  chart.setOption(
+    {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'line' },
+        formatter: (params: any) => {
+          let d = `${params[0].axisValueLabel}<br>`
+          let item = params.map((el: any) => {
+            const realValue = chartData.value[legend.value[el.componentIndex][1]][el.dataIndex]
+            return `<div class="flex items-center justify-between mt-1 gap-1">
+            <span>${el.marker} ${el.seriesName}</span>
+            <span>${realValue.toFixed(2)} ${el.seriesName.split(' ')[1] || ''}</span>
+          </div>`
+          })
+          return d + item.join('')
+        }
+      },
+      legend: {
+        data: legend.value.map(([name]) => name),
+        selected: selectedLegends.value,
+        show: true
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxisData.value
+      },
+      yAxis: {
+        type: 'value',
+        min: -minInterval.value,
+        max: maxInterval.value,
+        interval: 1,
+        axisLabel: {
+          formatter: (v: number) => {
+            const num = v === 0 ? 0 : v > 0 ? Math.pow(10, v) : -Math.pow(10, -v)
+            return num.toLocaleString()
+          }
+        }
+      },
+      series: getSeries()
+    },
+    true
+  )
 }
 
 const handleDeptNodeClick = (node: any) => {

src/views/pms/iotrydailyreport/xsummary.vue

@@ -301,95 +301,151 @@ onUnmounted(() => {
   window.removeEventListener('resize', resizer)
 })
 
-const render = () => {
-  if (!chartRef.value) return
-
-  chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
-
-  window.addEventListener('resize', resizer)
-
-  const values: number[] = []
-
-  for (const [_name, key] of legend.value) {
-    values.push(...(chartData.value[key] || []))
+const selectedLegends = ref<Record<string, boolean>>({})
+const intervalArr = ref<number[]>([])
+const maxInterval = ref(0)
+const minInterval = ref(0)
+
+const calcIntervals = () => {
+  let maxVal = -Infinity
+  let minVal = Infinity
+  let hasData = false
+
+  for (const [name, key] of legend.value) {
+    if (selectedLegends.value[name] !== false) {
+      const dataset = chartData.value[key] || []
+      if (dataset.length > 0) {
+        hasData = true
+        for (const val of dataset) {
+          if (val > maxVal) maxVal = val
+          if (val < minVal) minVal = val
+        }
+      }
+    }
   }
 
-  const maxVal = values.length === 0 ? 10000 : Math.max(...values)
-  const minVal = values.length === 0 ? 0 : Math.min(...values) > 0 ? 0 : Math.min(...values)
+  if (!hasData) {
+    maxVal = 10000
+    minVal = 0
+  } else {
+    minVal = minVal > 0 ? 0 : minVal
+  }
 
   const maxDigits = (Math.floor(maxVal) + '').length
   const minDigits = minVal === 0 ? 0 : (Math.floor(Math.abs(minVal)) + '').length
   const interval = Math.max(maxDigits, minDigits)
 
-  const maxInterval = interval
-  const minInterval = minDigits
+  maxInterval.value = interval
+  minInterval.value = minDigits
 
-  const intervalArr = [0]
+  const arr = [0]
   for (let i = 1; i <= interval; i++) {
-    intervalArr.push(Math.pow(10, i))
+    arr.push(Math.pow(10, i))
   }
+  intervalArr.value = arr
+}
 
-  chart.setOption({
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'line'
-      },
-      formatter: (params) => {
-        let d = `${params[0].axisValueLabel}<br>`
-        let item = params.map((el) => {
-          return `<div class="flex items-center justify-between mt-1 gap-1">
-            <span>${el.marker} ${el.seriesName}</span>
-            <span>${chartData.value[legend.value[el.componentIndex][1]][el.dataIndex].toFixed(2)} ${el.seriesName.split(' ')[1]}</span>
-          </div>`
-        })
+const mapDataValue = (value: number) => {
+  if (value === 0) return 0
 
-        return d + item.join('')
-      }
-    },
-    legend: {
-      data: legend.value.map(([name]) => name),
-      show: true
-    },
-    xAxis: {
-      type: 'category',
-      data: xAxisData.value
-    },
-    yAxis: {
-      type: 'value',
-      min: -minInterval,
-      max: maxInterval,
-      interval: 1,
-      axisLabel: {
-        formatter: (v) => {
-          const num = v === 0 ? 0 : v > 0 ? Math.pow(10, v) : -Math.pow(10, -v)
-
-          return num.toLocaleString()
-        }
-      }
-    },
-    series: legend.value.map(([name, key]) => ({
-      name,
-      type: 'line',
-      smooth: true,
-      showSymbol: true,
-      data: chartData.value[key].map((value) => {
-        // return value
-        if (value === 0) return 0
+  const isPositive = value > 0
+  const absItem = Math.abs(value)
 
-        const isPositive = value > 0
-        const absItem = Math.abs(value)
+  if (!intervalArr.value.length) return 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
+  const denominator =
+    min_index < intervalArr.value.length - 1
+      ? intervalArr.value[min_index + 1] - intervalArr.value[min_index]
+      : intervalArr.value[min_index] || 1
+
+  const new_value = (absItem - min_value) / denominator + min_index
+
+  return isPositive ? new_value : -new_value
+}
 
-        return isPositive ? new_value : -new_value
+const getSeries = () => {
+  return legend.value.map(([name, key]) => ({
+    name,
+    type: 'line',
+    smooth: true,
+    showSymbol: true,
+    data: chartData.value[key].map((value) => mapDataValue(value))
+  }))
+}
+
+const render = () => {
+  if (!chartRef.value) return
+
+  if (!chart) {
+    chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
+    window.addEventListener('resize', resizer)
+
+    chart.on('legendselectchanged', (params: any) => {
+      selectedLegends.value = params.selected
+
+      calcIntervals()
+
+      chart?.setOption({
+        yAxis: {
+          min: -minInterval.value,
+          max: maxInterval.value
+        },
+        series: getSeries()
       })
-    }))
+    })
+  }
+
+  legend.value.forEach(([name]) => {
+    selectedLegends.value[name] = true
   })
+
+  calcIntervals()
+
+  chart.setOption(
+    {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'line' },
+        formatter: (params: any) => {
+          let d = `${params[0].axisValueLabel}<br>`
+          let item = params.map((el: any) => {
+            const realValue = chartData.value[legend.value[el.componentIndex][1]][el.dataIndex]
+            return `<div class="flex items-center justify-between mt-1 gap-1">
+            <span>${el.marker} ${el.seriesName}</span>
+            <span>${realValue.toFixed(2)} ${el.seriesName.split(' ')[1] || ''}</span>
+          </div>`
+          })
+          return d + item.join('')
+        }
+      },
+      legend: {
+        data: legend.value.map(([name]) => name),
+        selected: selectedLegends.value,
+        show: true
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxisData.value
+      },
+      yAxis: {
+        type: 'value',
+        min: -minInterval.value,
+        max: maxInterval.value,
+        interval: 1,
+        axisLabel: {
+          formatter: (v: number) => {
+            const num = v === 0 ? 0 : v > 0 ? Math.pow(10, v) : -Math.pow(10, -v)
+            return num.toLocaleString()
+          }
+        }
+      },
+      series: getSeries()
+    },
+    true
+  )
 }
 
 const handleDeptNodeClick = (node: any) => {