Data Recevice status Monitoring 弹窗图表点击legned，渲染图表的时候，会回到初始定位的地方

src/components/CustomChart/index.vue

@@ -5,22 +5,22 @@
 import * as echarts from 'echarts'
 import 'echarts-gl'
 
-const events = ['click', 'brushEnd']
+const events = ['click', 'brushEnd', 'dataZoom']
 const zrEvents = ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick', 'contextmenu']
 export default {
   props: {
     option: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     opts: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     height: {
       type: Number,
-      default: null
+      default: null,
-    }
+    },
   },
   data() {
     return {}
@@ -31,21 +31,21 @@ export default {
     this.initEventListener()
   },
   destroyed() {
-    if(this._chart) {
+    if (this._chart) {
       this._chart.dispose()
     }
   },
   methods: {
     initEventListener() {
-      events.forEach(eventName => {
+      events.forEach((eventName) => {
         this._chart.on(eventName, (params) => {
           this.$emit(eventName, params)
         })
       })
 
       const zr = this.getZRender()
-      zrEvents.forEach(eventName => {
+      zrEvents.forEach((eventName) => {
-        zr.on(eventName, params => {
+        zr.on(eventName, (params) => {
           this.$emit(`zr:${eventName}`, params)
         })
       })
@@ -62,7 +62,7 @@ export default {
 
     getZRender() {
       return this._chart.getZr()
-    }
+    },
   },
   watch: {
     option: {
@@ -71,14 +71,14 @@ export default {
           this._chart.setOption(this.option, this.opts)
         }
       },
-      deep: true
+      deep: true,
     },
     height() {
       this.$nextTick(() => {
         this._chart && this._chart.resize()
       })
-    }
+    },
-  }
+  },
 }
 </script>
 <style lang="less" scoped>

src/views/stationOperation/components/RealTimeDataChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%;height: 100%;overflow: auto;padding-top: 76px;">
+  <div style="width: 100%; height: 100%; overflow: auto; padding-top: 76px">
     <!-- 图例 -->
     <div class="legend">
       <div
@@ -14,8 +14,14 @@
       </div>
     </div>
     <!-- 图例结束 -->
-    <custom-chart ref="customChartRef" :option="option" :height="list.length * 295"></custom-chart>
+    <custom-chart
-    <a-spin style="z-index: 11;position: absolute;top: 45%;left: 48%;" :spinning="spinning" />
+      ref="customChartRef"
+      :option="option"
+      :opts="{ notMerge: true }"
+      :height="list.length * 295"
+      @dataZoom="handleZoomChange"
+    ></custom-chart>
+    <a-spin style="z-index: 11; position: absolute; top: 45%; left: 48%" :spinning="spinning" />
   </div>
 </template>
 
@@ -32,76 +38,90 @@ const legendList = [
   {
     title: 'SPHDPREL',
     color: '#17a840',
-    isShow: true
+    isShow: true,
   },
   {
     title: 'SPHDF',
     color: '#0cbfb0',
-    isShow: true
+    isShow: true,
   },
   {
     title: 'QC',
     color: '#1c82eb',
-    isShow: true
+    isShow: true,
   },
   {
     title: 'GASBKPHDPREL',
     color: '#d3ad16',
-    isShow: true
+    isShow: true,
   },
   {
     title: 'GASBKPHDF',
     color: '#db6423',
-    isShow: true
+    isShow: true,
   },
   {
     title: 'SOH/MET',
     color: '#8852da',
-    isShow: true
+    isShow: true,
-  }
+  },
 ]
 
 // 图表配置
 const initialOption = {
   tooltip: {
-    formatter: params => {
+    formatter: (params) => {
       return `${params.marker}${params.name}: ${(params.value[3] / 1000 / 60).toFixed()}min`
-    }
+    },
   },
   grid: [],
   xAxis: [],
   yAxis: [],
   series: [],
-  dataZoom: []
+  dataZoom: [],
 }
 
 export default {
   props: {
     title: {
-      type: String
+      type: String,
     },
     spinning: {
-      type: Boolean
+      type: Boolean,
     },
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     scaleSettings: {
       type: Object,
-      required: true
+      required: true,
-    }
+    },
   },
   components: {
-    CustomChart
+    CustomChart,
   },
   data() {
     return {
       legendList: cloneDeep(legendList),
-      option: {}
+      option: {},
+      zoomDataAll: [],
     }
   },
   methods: {
+    handleZoomChange(params) {
+      this.zoomDataAll = this.option.dataZoom.map((item) => {
+        if (item.id == params.batch[0].dataZoomId) {
+          return {
+            id: params.batch[0].dataZoomId,
+            start: params.batch[0].start,
+            end: params.batch[0].end,
+          }
+        } else {
+          return item
+        }
+      })
+    },
     renderItem(params, api) {
       let categoryIndex = api.value(0)
       let start = api.coord([api.value(1), categoryIndex])
@@ -113,20 +133,20 @@ export default {
           x: start[0],
           y: start[1] - height / 2,
           width: end[0] - start[0],
-          height: height
+          height: height,
         },
         {
           x: params.coordSys.x,
           y: params.coordSys.y,
           width: params.coordSys.width,
-          height: params.coordSys.height
+          height: params.coordSys.height,
         }
       )
       return (
         rectShape && {
           type: 'rect',
           shape: rectShape,
-          style: api.style()
+          style: api.style(),
         }
       )
     },
@@ -155,13 +175,9 @@ export default {
       }
     },
 
-    initChartOption() {
+    initChartOption(val) {
       let now = dayjs(new Date())
-      now = now
+      now = now.add(1, 'hour').set('minute', 0).set('second', 0).set('millisecond', 0)
-        .add(1, 'hour')
-        .set('minute', 0)
-        .set('second', 0)
-        .set('millisecond', 0)
 
       const max = now.valueOf()
       const min = max - this.scaleSettings.cacheTime * 24 * 60 * 60 * 1000
@@ -172,7 +188,7 @@ export default {
           left: 70,
           right: 20,
           top: 70 * index + 225 * index,
-          height: 225
+          height: 225,
         })
 
         xAxis.push({
@@ -182,17 +198,17 @@ export default {
           interval: this.scaleSettings.scaleInterval * 60 * 1000,
           axisLabel: {
             show: true,
-            formatter: val => {
+            formatter: (val) => {
               let dateTime = new Date(val)
               return dayjs(dateTime).format('HH:mm\nMM/DD')
             },
-            color: '#ade6ee'
+            color: '#ade6ee',
           },
           splitLine: {
             lineStyle: {
-              color: '#214751'
+              color: '#214751',
-            }
+            },
-          }
+          },
         })
 
         yAxis.push({
@@ -202,31 +218,31 @@ export default {
           nameTextStyle: {
             // 设置标题样式
             fontSize: 14,
-            color: '#5b9cba'
+            color: '#5b9cba',
           },
           nameGap: 46,
           data: typeList,
           splitLine: {
             show: true,
             lineStyle: {
-              color: '#214751'
+              color: '#214751',
-            }
+            },
           },
           axisLine: {
             lineStyle: {
-              color: '#214751'
+              color: '#214751',
-            }
+            },
           },
           axisTick: {
-            show: false
+            show: false,
           },
           axisLabel: {
-            color: '#ade6ee'
+            color: '#ade6ee',
-          }
+          },
         })
 
         const data = []
-        item.dataList.forEach(item => {
+        item.dataList.forEach((item) => {
           this.convertStatus(item)
 
           let startTime = new Date(item.beginTime * 1000).getTime()
@@ -236,17 +252,17 @@ export default {
 
           const endTime = new Date(item.endTime * 1000).getTime()
           const duration = endTime - startTime
-          const index = typeList.findIndex(type => item.type == type)
+          const index = typeList.findIndex((type) => item.type == type)
-          const find = this.legendList.find(legendItem => legendItem.title == item.status)
+          const find = this.legendList.find((legendItem) => legendItem.title == item.status)
           if (find.isShow) {
             data.push({
               name: item.status,
               value: [index, startTime, endTime, duration],
               itemStyle: {
                 normal: {
-                  color: find.color
+                  color: find.color,
-                }
+                },
-              }
+              },
             })
           }
         })
@@ -256,20 +272,22 @@ export default {
           renderItem: this.renderItem,
           encode: {
             x: [1, 2],
-            y: 0
+            y: 0,
           },
           data: data,
           xAxisIndex: index,
-          yAxisIndex: index
+          yAxisIndex: index,
         })
-
+        if (!val) {
           dataZoom.push({
             type: 'inside',
+            id: index,
             xAxisIndex: index,
             start: 100 - (this.scaleSettings.timelineLength / (this.scaleSettings.cacheTime * 24 * 60)) * 100,
             end: 100,
-          zoomLock: true
+            zoomLock: true,
           })
+        }
       })
 
       this.option = option
@@ -279,20 +297,30 @@ export default {
     handleLegendChange(legend) {
       legend.isShow = !legend.isShow
       this.initChartOption()
+      this.option.dataZoom = this.zoomDataAll.map((item, index) => {
+        return {
+          type: 'inside',
+          id: item.id,
+          xAxisIndex: index,
+          start: item.start,
+          end: item.end,
+          zoomLock: true,
+        }
+      })
     },
 
     resize() {
       this.$refs.customChartRef.resize()
-    }
+    },
   },
   watch: {
     list: {
       handler() {
         this.initChartOption()
       },
-      immediate: true
+      immediate: true,
-    }
+    },
-  }
+  },
 }
 </script>