修改轮播完成

investment/investHome2.html

@@ -11,7 +11,8 @@
   <link rel="stylesheet" href="./styles/investHome2.css" />
   <!-- 引入js -->
   <script src="./libs/vue@2.7.10.js"></script>
-  <script src="./libs/datav.min.js"></script>
+  <!-- <script src="./libs/datav.min.js"></script> -->
+  <script src="./libs/datav.map.vue.js"></script>
   <script src="./libs/echarts.min2.js"></script>
   <script src="./libs/element-ui@2.15.9.js"></script>
   <script src="./libs/axios.min.js"></script>
@@ -94,7 +95,7 @@
             </div>
             <div class="content">
               <div class="content-right" style="margin-right: 10px;">
-                <dv-scroll-board :config="storageRecordConfig" class="" />
+                <dv-scroll-board :config="storageRecordConfig" @scroll-change="scrollChange" class="" />
               </div>
               <div class="content-left">
                 <div ref="echartL3" style="width: 100%; height: 100%;"></div>

investment/js/investHome2.js

@@ -104,40 +104,43 @@ let app = new Vue({
       this.initChartR2()
       this.initChartR3()
       this.initChartR6()
-
+      this.changeTopColor()
     },)
-    setTimeout(() => {
-      this.timer2 = setInterval(() => {
-        if (this.count < dataList.length - 1) {
-          this.count++
+  },
+  methods: {
+    changeTopColor () {
+      this.list = document.getElementsByClassName('row-item')
+      for (var i = 0; i < this.list.length; i++) {
+        if (i == 1) {
+          this.list[i].classList.add('light')
         } else {
-          this.count = 0
+          this.list[i].classList.remove('light')
         }
-        if (this.count > 14) {
-          this.countType = 1
+      }
+      this.initChartL3()
+    },
+    scrollChange (index) {
+      console.log(index, '从机开始呢')
+      if (index == 18) {
+        this.count = -1
+      } else {
+        this.count = index
+      }
+      if (this.count > 12 && this.count != 18) {
+        this.countType = 1
+      } else {
+        this.countType = 0
+      }
+      this.list = document.getElementsByClassName('row-item')
+      for (var i = 0; i < this.list.length; i++) {
+        if (i == 2) {
+          this.list[i].classList.add('light')
         } else {
-          this.countType = 0
+          this.list[i].classList.remove('light')
         }
-        this.initChartL3()
-      }, 2000)
-    }, 300)
-    // setTimeout(() => {
-    //   var swiper = new Swiper(".mySwiper", {
-    //     pagination: {
-    //       el: ".swiper-pagination",
-    //       type: "progressbar",
-    //     },
-    //     navigation: {
-    //       nextEl: ".swiper-button-next",
-    //       prevEl: ".swiper-button-prev",
-    //     },
-    //   });
-    //   swiper.el.onmouseout = function () {
-    //     swiper.autoplay.start();
-    //   }
-    // })
-  },
-  methods: {
+      }
+      this.initChartL3()
+    },
     convertData (data) {
       var res = []
       for (var i = 0; i < data.length; i++) {
@@ -951,7 +954,7 @@ let app = new Vue({
         ],
         series: [
           {
-            name: '',
+            name: '实际值',
             type: 'bar',
             barWidth: 15,
             itemStyle: {
@@ -969,7 +972,7 @@ let app = new Vue({
               },
             },
             // data: [70, 52, 33, 41, 52],
-            data: dataList[this.count][0]
+            data: dataList[this.count + 1][2]
             // markLine: {
             //   symbol: ['none', 'none'],
             //   data: [
@@ -1024,7 +1027,7 @@ let app = new Vue({
               },
             },
             // data: [20, 30, 15, 28, 36],
-            data: dataList[this.count][1]
+            data: dataList[this.count + 1][1]
           },
           {
             name: '',
@@ -1045,7 +1048,7 @@ let app = new Vue({
               },
             },
             // data: [15, 22, 17, 33, 14],
-            data: dataList[this.count][2]
+            data: dataList[this.count + 1][0]
           },
         ],
       }
@@ -1086,7 +1089,7 @@ let app = new Vue({
             return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
         },
-        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'],
+        color: ['#8ba2ff', '#55a5d0', '#55a5d0', '#6a5cfb', '#45dad1', '#07bdb3', '#43db67', '#f9bec0', '#fab360', '#fae260', '#f1f2a1'],
         legend: {
           orient: 'horizontal',
           show: false,
@@ -1169,7 +1172,7 @@ let app = new Vue({
             return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
         },
-        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'],
+        color: ['#8ba2ff', '#55a5d0', '#55a5d0', '#6a5cfb', '#45dad1', '#07bdb3', '#43db67', '#f9bec0', '#fab360', '#fae260', '#f1f2a1'],
         legend: {
           show: false,
           icon: 'circle',
@@ -1253,7 +1256,7 @@ let app = new Vue({
           }
           // position: ['30%', '87%'],
         },
-        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'],
+        color: ['#8ba2ff', '#55a5d0', '#55a5d0', '#6a5cfb', '#45dad1', '#07bdb3', '#43db67', '#f9bec0', '#fab360', '#fae260', '#f1f2a1'],
         legend: {
           show: false,
           icon: 'circle',
@@ -1333,7 +1336,7 @@ let app = new Vue({
             return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
         },
-        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'],
+        color: ['#8ba2ff', '#55a5d0', '#55a5d0', '#6a5cfb', '#45dad1', '#07bdb3', '#43db67', '#f9bec0', '#fab360', '#fae260', '#f1f2a1'],
         legend: {
           show: false,
           icon: 'circle',
@@ -1570,7 +1573,7 @@ let app = new Vue({
             return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
         },
-        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'],
+        color: ['#8ba2ff', '#55a5d0', '#55a5d0', '#6a5cfb', '#45dad1', '#07bdb3', '#43db67', '#f9bec0', '#fab360', '#fae260', '#f1f2a1'],
         legend: {
           show: false,
           icon: 'circle',
@@ -1647,7 +1650,7 @@ let app = new Vue({
           }
           // position: ['-5%', '95%'],
         },
-        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'],
+        color: ['#8ba2ff', '#55a5d0', '#55a5d0', '#6a5cfb', '#45dad1', '#07bdb3', '#43db67', '#f9bec0', '#fab360', '#fae260', '#f1f2a1'],
         legend: {
           show: false,
           icon: 'circle',

investment/styles/investHome2.css

@@ -587,6 +587,9 @@ a {
 /* .rows > .row-item:nth-child(2) {
   background-color: #79a4db6c !important;
 } */
+.light {
+  background-color: #79a4db6c !important;
+}
 .header {
   color: #2abbff;
   font-weight: bold;