perf(src/packages): 优化图表和联动组件进行交互，图表不及时更新

fengwotao
1 parent 4d78bfbd
Showing 2 changed files with 100 additions and 34 deletions
src/packages/components/external/Charts/Lines/OverrideLineCommon/index.vue
src/packages/components/external/Charts/Lines/OverrideLineGradients/index.vue
--- a/src/packages/components/external/Charts/Lines/OverrideLineCommon/index.vue
View file @320f15b
+++ b/src/packages/components/external/Charts/Lines/OverrideLineCommon/index.vue
View file @320f15b
@@ -29,8 +29,11 @@ import { useChartDataFetch } from '@/hooks'
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 import { useFullScreen } from '../../utls/fullScreen'
+import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
+import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 const props = defineProps({
   themeSetting: {
@@ -87,11 +90,24 @@ watch(
       if (!isObject(newData) || !('dimensions' in newData)) return
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
-        for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+        const oldDimensions =
+          Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
+        const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1
+        const dimensionsGap = newDimensions - oldDimensions
+        if (dimensionsGap < 0) {
+          props.chartConfig.option.series.splice(newDimensions - 1)
+        } else if (dimensionsGap > 0) {
+          if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
+            props.chartConfig.option.series = []
+          }
+          for (let i = 0; i < dimensionsGap; i++) {
+            seriesArr.push(cloneDeep(seriesItem))
+          }
+          props.chartConfig.option.series.push(...seriesArr)
         }
         replaceMergeArr.value = ['series']
-        props.chartConfig.option.series = seriesArr
         nextTick(() => {
           replaceMergeArr.value = []
         })
@@ -178,17 +194,38 @@ watch(
 )
 //fix 修复v-chart图表绑定联动组件视图不更新问题
-const updateVChart = (newData: any) => {
-  if (!newData) return
-  vChartRef.value?.clear()
-  vChartRef.value?.setOption({
-    ...option.value,
-    dataset: newData
-  })
+const updateVChart = (newData:SocketReceiveMessageType) => {
+  //区分是普通请求还是ws请求
+  if (!isObject(newData) || !('dimensions' in newData)) {
+    const { data } = newData
+    const { keys, record } = useAssembleDataHooks(data)
+    vChartRef.value?.setOption({
+      dataset: {
+        dimensions: ['ts', ...keys],
+        source: [record]
+      }
+    })
+  } else {
+    //异步更新，同步更新会造成联动组件控制，图表不及时更新
+    new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(
+          vChartRef.value?.setOption(
+            {
+              ...option.value,
+              dataset: newData
+            },
+            {
+              notMerge: true
+            }
+          )
+        )
+      }, 100)
+    })
+  }
 }
 const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => {
-  // addPieInterval(newData)
   updateVChart(newData)
 })
--- a/src/packages/components/external/Charts/Lines/OverrideLineGradients/index.vue
View file @320f15b
+++ b/src/packages/components/external/Charts/Lines/OverrideLineGradients/index.vue
View file @320f15b
@@ -15,7 +15,7 @@
 </template>
 <script setup lang="ts">
-import { reactive, watch, PropType, onMounted, ref, nextTick,computed } from 'vue'
+import { watch, PropType, onMounted, ref, nextTick,computed } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
@@ -31,6 +31,9 @@ import { isPreview, colorGradientCustomMerge } from '@/utils'
 import dataJson from './data.json'
 import { useFullScreen } from '../../utls/fullScreen'
 import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
+import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
+import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 const props = defineProps({
   themeSetting: {
@@ -99,7 +102,6 @@ watch(
           ])
         })
       }
-      // option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
       props.chartConfig.option = option.value
     } catch (error) {
       console.log(error)
@@ -110,12 +112,6 @@ watch(
   }
 )
-// watch(
-//   () => props.chartConfig.option.dataset,
-//   () => {
-//     option.value = props.chartConfig.option
-//   }
-// )
 let seriesDataNum = -1
 let seriesDataMaxLength = 0
 let intervalInstance: any = null
@@ -188,16 +184,6 @@ watch(
   }
 )
-//fix 修复v-chart图表绑定联动组件视图不更新问题
-const updateVChart = (newData: any) => {
-  if (!newData) return
-  vChartRef.value?.clear()
-  vChartRef.value?.setOption({
-    ...option.value,
-    dataset: newData
-  })
-}
-
 const replaceMergeArr = ref<string[]>()
 // dataset 无法变更条数的补丁
@@ -205,15 +191,27 @@ watch(
   () => props.chartConfig.option.dataset,
   (newData: { dimensions: any }, oldData) => {
     try {
-      // option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
       if (!isObject(newData) || !('dimensions' in newData)) return
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
-        for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+        const oldDimensions =
+          Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
+        const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1
+        const dimensionsGap = newDimensions - oldDimensions
+        if (dimensionsGap < 0) {
+          props.chartConfig.option.series.splice(newDimensions - 1)
+        } else if (dimensionsGap > 0) {
+          if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
+            props.chartConfig.option.series = []
+          }
+          for (let i = 0; i < dimensionsGap; i++) {
+            seriesArr.push(cloneDeep(seriesItem))
+          }
+          props.chartConfig.option.series.push(...seriesArr)
         }
         replaceMergeArr.value = ['series']
-        props.chartConfig.option.series = seriesArr
         nextTick(() => {
           replaceMergeArr.value = []
         })
@@ -227,8 +225,39 @@ watch(
   }
 )
+//fix 修复v-chart图表绑定联动组件视图不更新问题
+const updateVChart = (newData:SocketReceiveMessageType) => {
+  //区分是普通请求还是ws请求
+  if (!isObject(newData) || !('dimensions' in newData)) {
+    const { data } = newData
+    const { keys, record } = useAssembleDataHooks(data)
+    vChartRef.value?.setOption({
+      dataset: {
+        dimensions: ['ts', ...keys],
+        source: [record]
+      }
+    })
+  } else {
+    //异步更新，同步更新会造成联动组件控制，图表不及时更新
+    new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(
+          vChartRef.value?.setOption(
+            {
+              ...option.value,
+              dataset: newData
+            },
+            {
+              notMerge: true
+            }
+          )
+        )
+      }, 100)
+    })
+  }
+}
+
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
-  // addPieInterval(newData)
   updateVChart(newData)
 })