echarts滚动效果

src/views/gisHome/component/leftMain.vue

@@ -22,8 +22,7 @@
           </div>
           <p>总人数</p>
           <div class="peopleNum">
-            <span>{{ constructionUserData?.peopleCount }}</span
-            >人
+            <span>{{ constructionUserData?.peopleCount + ' ' }} </span>人
           </div>
         </div>
         <div class="card">
@@ -32,8 +31,7 @@
           </div>
           <p>出勤人</p>
           <div class="peopleNum">
-            <span>{{ constructionUserData?.attendanceCount }}</span
-            >人
+            <span>{{ constructionUserData?.attendanceCount + ' ' }} </span>人
           </div>
         </div>
         <div class="card">
@@ -42,8 +40,7 @@
           </div>
           <p>出勤率</p>
           <div class="peopleNum">
-            <span>{{ constructionUserData?.attendanceRate }}</span
-            >%
+            <span>{{ constructionUserData?.attendanceRate + ' ' }} </span>%
           </div>
         </div>
       </div>
@@ -88,6 +85,7 @@ import { getConstructionUserList, getMachineryrList, getMaterialsList } from '@/
 import { ConstructionUserVO, MachineryrVO, MaterialsVO } from '@/api/gis/type';
 import * as echarts from 'echarts';
 import { useUserStoreHook } from '@/store/modules/user';
+import { enableEchartsAutoScroll } from '@/plugins/scrollEcharts';
 const userStore = useUserStoreHook();
 //echarts节点
 const myMachineryChart = ref(null);
@@ -97,6 +95,8 @@ type EChartsOption = echarts.EChartsOption;
 const constructionUserData = ref<ConstructionUserVO>(null);
 const machineryOption = ref<MachineryrVO[]>([]); //机械
 const orderOption = ref<MaterialsVO[]>([]); //材料
+const stopMachineryScroll = ref(null);
+const stopOrderScroll = ref(null);
 const machineryDataAxis = computed(() => machineryOption.value.map((item) => item.machineryName)); //x轴数据
 const machineryData = computed(() => machineryOption.value.map((item) => item.machineryCount)); //柱状图数据
 const orderDataAxis = computed(() => orderOption.value.map((item) => item.materialsName)); //材料x轴数据
@@ -148,7 +148,10 @@ const initMachinerycharts = () => {
       data: machineryDataAxis.value,
       axisLabel: {
         // inside: true,
-        color: 'rgba(202, 218, 226, 1)'
+        color: 'rgba(202, 218, 226, 1)',
+
+        fontSize: 10,
+        interval: 0
       },
       axisTick: {
         show: false
@@ -167,11 +170,11 @@ const initMachinerycharts = () => {
         show: false
       },
       axisLabel: {
-        color: '#999'
+        color: '#999',
+        fontSize: 12
       },
-      min: 0,
-      max: 40,
-      interval: 10,
+      interval: 1,
+      splitNumber: 5,
       splitLine: {
         show: true,
         lineStyle: {
@@ -256,6 +259,7 @@ const initMachinerycharts = () => {
   };
 
   option && myMachineryChart.value.setOption(option);
+  stopMachineryScroll.value = enableEchartsAutoScroll(myMachineryChart.value, machineryDataAxis.value.length, 6, 2000);
 };
 
 const initOrderChart = () => {
@@ -500,6 +504,7 @@ const initOrderChart = () => {
     ]
   };
   option && myOrderChart.value.setOption(option);
+  stopOrderScroll.value = enableEchartsAutoScroll(myOrderChart.value, orderDataAxis.value.length, 5, 2000);
 };
 
 // 防抖函数
@@ -528,6 +533,12 @@ onMounted(() => {
   getMachineryData();
   window.addEventListener('resize', debouncedHandleResize); //监听窗口变化重新生成echarts
 });
+
+onUnmounted(() => {
+  window.removeEventListener('resize', debouncedHandleResize);
+  stopMachineryScroll.value();
+  stopOrderScroll.value();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -560,10 +571,11 @@ onMounted(() => {
 
     span {
       text-shadow: 0 0 vw(8) rgba(2, 3, 7, 0.35);
-      font-size: vw(20);
-      font-weight: 500;
+      font-size: vw(16);
       letter-spacing: 0;
       color: rgba(255, 255, 255, 1);
+      font-family: 'DOUYUFont';
+      padding-top: vh(5);
     }
   }
 
@@ -572,6 +584,7 @@ onMounted(() => {
     font-weight: 400;
     color: rgba(204, 204, 204, 0.5);
     margin-right: vw(20);
+    font-family: 'Roboto';
   }
 
   .mark {
@@ -595,6 +608,7 @@ onMounted(() => {
   position: absolute;
   top: vh(122);
   left: vw(21);
+  z-index: 2;
   .main {
     padding-top: vh(30);
 
@@ -615,7 +629,7 @@ onMounted(() => {
 
         img {
           width: vw(44);
-          margin-bottom: vh(20);
+          margin-bottom: vh(10);
         }
 
         > p {
@@ -631,7 +645,7 @@ onMounted(() => {
 
           text-shadow: 0 vw(1.24) vw(6.21) rgba(0, 190, 247, 1);
           color: rgba(230, 247, 255, 1);
-
+          font-family: 'Roboto';
           span {
             font-size: vw(24);
             font-weight: 700;