move

src/assets/js/getData1.js

@@ -233,34 +233,49 @@ export const productionStatistics = () => {
         'uncompleted': 12789,
         'name': '转炉镁碳砖MASC-65鞍钢23Z001',
         'completed': 211
-      },
-      {
-        'uncompleted': 11222,
-        'name': '转炉镁碳砖MASC-65鞍钢23Z888',
-        'completed': 2988
       }
+      // {
+      //   'uncompleted': 9222,
+      //   'name': '转炉镁碳砖MASC-65鞍钢23Z888',
+      //   'completed': 2988
+      // },
+      // {
+      //   'uncompleted': 11888,
+      //   'name': '转炉镁碳砖MASC-65鞍钢23Z999',
+      //   'completed': 2999
+      // },
+      // {
+      //   'uncompleted': 7888,
+      //   'name': '转炉镁碳砖MASC-65鞍钢93Z222',
+      //   'completed': 3555
+      // },
+      // {
+      //   'uncompleted': 6888,
+      //   'name': '转炉镁碳砖MASC-65鞍钢93Z777',
+      //   'completed': 2222
+      // }
     ],
     'mixProduction': [
       {
         'name': '镁碳砖MGL8343P10-K23Z006',
         'value': 3654.0
-      },
-      {
-        'name': '镁碳砖MGL8343P99-K23Z099',
-        'value': 2400.0
-      },
-      {
-        'name': '镁碳砖MGL8343P99-K23Z666',
-        'value': 1100.0
-      },
-      {
-        'name': '镁碳砖MGL8343P99-K23Z888',
-        'value': 3200.0
-      },
-      {
-        'name': '镁碳砖MGL8343P99-K23Z222',
-        'value': 1800.0
       }
+      // {
+      //   'name': '镁碳砖MGL8343P99-K23Z099',
+      //   'value': 2400.0
+      // },
+      // {
+      //   'name': '镁碳砖MGL8343P99-K23Z666',
+      //   'value': 1100.0
+      // },
+      // {
+      //   'name': '镁碳砖MGL8343P99-K23Z888',
+      //   'value': 3200.0
+      // },
+      // {
+      //   'name': '镁碳砖MGL8343P99-K23Z222',
+      //   'value': 1800.0
+      // }
     ]
   }
   return res

src/pages/shunhe/ProdCount.vue

@@ -92,7 +92,7 @@
 
 <script>
 import THeader from '@components/header.vue'
-import * as echarts from 'echarts'
+// import * as echarts from 'echarts'
 import { productionStatistics } from '@js/getData1'
 export default {
   name: 'ProdCount',
@@ -102,6 +102,7 @@ export default {
   data () {
     return {
       timeOut: null,
+      timeOut2: null,
       interTime: this.$store.getters.setTime,
       timer: null,
       showNum1: '',
@@ -109,6 +110,7 @@ export default {
       showNum3: '',
       showNum4: '333',
       showNum5: '333',
+      myCharts: '',
       myCharts01: '',
       myCharts02: '',
       materData: [],
@@ -143,6 +145,7 @@ export default {
   beforeDestroy () {
     clearInterval(this.timer)
     clearInterval(this.timeOut)
+    clearInterval(this.timeOut2)
   },
   methods: {
     refresh () {
@@ -153,6 +156,7 @@ export default {
     async initData () {
       let res = await productionStatistics()
       clearInterval(this.timeOut)
+      clearInterval(this.timeOut2)
       this.resData = res
       this.showNum1 = (res.total.pressWeight + '').split('')
       this.showNum2 = (res.total.dryWeight + '').split('')
@@ -246,8 +250,6 @@ export default {
       })
     },
     getEchart1 () {
-      // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(document.getElementById('echart_d1'))
       var finishArr = []
       var unFinishArr = []
       var materArr = []
@@ -270,6 +272,14 @@ export default {
           itemHeight: 8,
           data: ['完成', '未完成']
         },
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 1 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
         // title: {
         //   text: '半成品计划完成率', // 标题
         //   top: '12px',
@@ -364,9 +374,12 @@ export default {
         }]
       }
       // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option)
+      let echart = document.getElementById('echart_d1')
+      this.myCharts = this.$echarts.init(echart)
+      this.myCharts.setOption(option)
+      this.autoMove2(option)
       window.addEventListener('resize', function () {
-        myChart.resize()
+        this.myCharts.resize()
       })
     },
     getEchart2 () {
@@ -525,6 +538,18 @@ export default {
         }
         this.myCharts02.setOption(option)
       }, 2000)
+    },
+    autoMove2 (option) {
+      this.timeOut2 = setInterval(() => {
+        if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
+          option.dataZoom[0].endValue = 1
+          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.myCharts.setOption(option)
+      }, 2000)
     }
   }
 }