应用部署排名分析自动轮播

src/components/e-charts/toplist.vue

 <template>
-  <div class="top_list apass_scroll">
+  <div
+    class="top_list apass_scroll"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
+  >
     <ul>
       <li class="item_list" v-for="(option, index) in options" :key="index">
         <div class="item_index">
@@ -40,10 +44,55 @@ export default {
       default: () => 1000,
     },
   },
+  data() {
+    return {
+      timer: null,
+    };
+  },
+  watch: {
+    text() {
+      this.autoScroll();
+    },
+  },
   methods: {
     getPercent(value) {
       return Math.min((value / this.targetValue) * 100, 100);
     },
+    autoScroll() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+
+      this.$el.scrollTop = 0;
+
+      this.timer = setInterval(() => {
+        let curScrollTop = this.$el.scrollTop + 1;
+        if (curScrollTop > this.$el.scrollHeight - this.$el.clientHeight) {
+          curScrollTop = 0;
+        }
+        this.$el.scrollTop = curScrollTop;
+      }, 50);
+    },
+    mouseenter() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+    },
+    mouseleave() {
+      this.autoScroll();
+    },
+  },
+  mounted() {
+    this.autoScroll();
+
+    window.addEventListener("resize", () => {
+      this.autoScroll();
+    });
+  },
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
   },
 };
 </script>