生产统计图滚动

src/assets/js/getData1.js

@@ -44,6 +44,36 @@ export const productionStatistics = () => {
           'qty': 5000,
           'name': '压机3',
           'weight': 3000
+        },
+        {
+          'qty': 1120,
+          'name': '压机4',
+          'weight': 12010
+        },
+        {
+          'qty': 2000,
+          'name': '压机5',
+          'weight': 18200
+        },
+        {
+          'qty': 5900,
+          'name': '压机6',
+          'weight': 2000
+        },
+        {
+          'qty': 2220,
+          'name': '压机7',
+          'weight': 9010
+        },
+        {
+          'qty': 3000,
+          'name': '压机8',
+          'weight': 8200
+        },
+        {
+          'qty': 5000,
+          'name': '压机9',
+          'weight': 12000
         }
       ],
       'dailyProductionWeight': 64.25

src/pages/shunhe/ProdCount.vue

@@ -101,6 +101,7 @@ export default {
   },
   data () {
     return {
+      timeOut: null,
       interTime: this.$store.getters.setTime,
       timer: null,
       showNum1: '',
@@ -141,6 +142,7 @@ export default {
   },
   beforeDestroy () {
     clearInterval(this.timer)
+    clearInterval(this.timeOut)
   },
   methods: {
     refresh () {
@@ -150,6 +152,7 @@ export default {
     },
     async initData () {
       let res = await productionStatistics()
+      clearInterval(this.timeOut)
       this.resData = res
       this.showNum1 = (res.total.pressWeight + '').split('')
       this.showNum2 = (res.total.dryWeight + '').split('')
@@ -387,6 +390,14 @@ export default {
           itemHeight: 8,
           data: ['数量', '重量']
         },
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 3 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
         // tooltip: {
         //   trigger: 'axis'
         // },
@@ -493,9 +504,22 @@ export default {
       let echart = document.getElementById('echarts2')
       this.myCharts02 = this.$echarts.init(echart)
       this.myCharts02.setOption(option)
+      this.autoMove(option)
       window.addEventListener('resize', () => {
         this.myCharts02.resize()
       })
+    },
+    autoMove (option) {
+      this.timeOut = setInterval(() => {
+        if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
+          option.dataZoom[0].endValue = 3
+          option.dataZoom[0].startValue = 0
+        } else {
+          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+        }
+        this.myCharts02.setOption(option)
+      }, 2000)
     }
   }
 }