滚轮及滑动条缩放曲线和时间框同步

src/views/als/components/Charts/playBackChart.vue

@@ -4,6 +4,7 @@
 
 <script>
 import * as echarts from 'echarts'
+import { debounce } from '@/utils/index'
 export default {
   name: 'PlayBackChart',
   props: {
@@ -34,7 +35,8 @@ export default {
   },
   data() {
     return {
-      chart: null
+      chart: null,
+      timer: null
     }
   },
   watch: {
@@ -55,6 +57,7 @@ export default {
     })
   },
   beforeDestroy() {
+    if (this.timer) clearTimeout(this.timer)
     if (!this.chart) {
       return
     }
@@ -68,13 +71,34 @@ export default {
         this.chart.dispose()
         this.chart = null
       }
-      // console.log('66', this.chartRef)
       this.chart = echarts.init(this.$refs.preResultRef)
       // 监听 dataZoom 事件
       this.chart.on('dataZoom', (params) => {
-        const startValue = this.chartData.xAxisData[params.batch[0].startValue]
-        const endValue = this.chartData.xAxisData[params.batch[0].endValue]
-        this.$emit('data-zoom', [startValue, endValue])
+        let startValue, endValue
+        if (params.batch) {
+          if (params.batch[0].startValue) {
+            startValue = this.chartData.xAxisData[params.batch[0].startValue]
+            endValue = this.chartData.xAxisData[params.batch[0].endValue]
+          } else if (params.batch[0].start) {
+            const xAxisLength = this.chartData.xAxisData.length
+            const startPercent = params.batch[0].start
+            const endPercent = params.batch[0].end
+            startValue = this.chartData.xAxisData[Math.ceil((xAxisLength * startPercent) / 100)]
+            endValue = this.chartData.xAxisData[Math.floor((xAxisLength * endPercent) / 100)]
+          }
+        } else {
+          const xAxisLength = this.chartData.xAxisData.length
+          const startPercent = params.start
+          const endPercent = params.end
+          startValue = this.chartData.xAxisData[Math.ceil((xAxisLength * startPercent) / 100)]
+          endValue = this.chartData.xAxisData[Math.floor((xAxisLength * endPercent) / 100)]
+        }
+        if (this.timer) {
+          clearTimeout(this.timer)
+        }
+        this.timer = setTimeout(() => {
+          this.$emit('data-zoom', [startValue, endValue])
+        }, 500)
       })
       this.setOptions(this.chartData)
     },