dataZoom样式

src/pages/views/home/components/CehicleOperation.vue

@@ -813,7 +813,22 @@ const rightContent = ref({
           },
           data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
         } ],
-        dataZoom: {}
+        dataZoom: {
+          type: 'slider',
+          height: 20,
+          bottom: 8,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '140%',
+          handleStyle: {
+            color: '#fff'
+          },
+          moveHandleSize: 0,
+          textStyle: {
+            color: '#666'
+          },
+          fillerColor: 'rgba(24,38,73,.3)',
+          borderColor: 'none'
+        }
       }
     },
     {
@@ -942,7 +957,22 @@ const rightContent = ref({
           },
           data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
         } ],
-        dataZoom: {}
+        dataZoom: {
+          type: 'slider',
+          height: 20,
+          bottom: 8,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '140%',
+          handleStyle: {
+            color: '#fff'
+          },
+          moveHandleSize: 0,
+          textStyle: {
+            color: '#666'
+          },
+          fillerColor: 'rgba(24,38,73,.3)',
+          borderColor: 'none'
+        }
       }
     }
   ],

src/pages/views/home/components/LineAnalysis.vue

@@ -580,7 +580,22 @@ const rightContent: Ref<any> = ref({
       data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
     }
     ],
-    dataZoom: {}
+    dataZoom: {
+      type: 'slider',
+      height: 20,
+      bottom: 8,
+      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+      handleSize: '140%',
+      handleStyle: {
+        color: '#fff'
+      },
+      moveHandleSize: 0,
+      textStyle: {
+        color: '#666'
+      },
+      fillerColor: 'rgba(24,38,73,.3)',
+      borderColor: 'none'
+    }
   },
   bottom: {
     grid: {

src/pages/views/home/components/MaintenanceDynamics.vue

@@ -271,15 +271,16 @@ const leftContent:Ref<any> = ref({
           height: 20,
           bottom: 8,
           handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-          handleSize: '100%',
+          handleSize: '140%',
           handleStyle: {
-            color: '#409eff'
+            color: '#fff'
           },
+          moveHandleSize: 0,
           textStyle: {
             color: '#666'
           },
-          fillerColor: 'rgba(255,255,255,0.2)',
-          borderColor: 'rgba(64,158,225,0.3)'
+          fillerColor: 'rgba(24,38,73,.3)',
+          borderColor: 'none'
         }
       }
     },

src/pages/views/home/components/PassengerFlow.vue

@@ -287,7 +287,22 @@ const leftContent = ref({
             data: [ 200, 108, 200, 40, 210, 100 ]
           }
         ],
-        dataZoom: {}
+        dataZoom: {
+          type: 'slider',
+          height: 20,
+          bottom: 8,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '140%',
+          handleStyle: {
+            color: '#fff'
+          },
+          moveHandleSize: 0,
+          textStyle: {
+            color: '#666'
+          },
+          fillerColor: 'rgba(24,38,73,.3)',
+          borderColor: 'none'
+        }
       }
     }
   ],
@@ -837,7 +852,22 @@ const rightContent = ref({
       data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
     }
     ],
-    dataZoom: {}
+    dataZoom: {
+      type: 'slider',
+      height: 20,
+      bottom: 8,
+      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+      handleSize: '140%',
+      handleStyle: {
+        color: '#fff'
+      },
+      moveHandleSize: 0,
+      textStyle: {
+        color: '#666'
+      },
+      fillerColor: 'rgba(24,38,73,.3)',
+      borderColor: 'none'
+    }
   },
   center: {
     grid: {
@@ -1018,7 +1048,22 @@ const rightContent = ref({
       data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
     }
     ],
-    dataZoom: {}
+    dataZoom: {
+      type: 'slider',
+      height: 20,
+      bottom: 8,
+      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+      handleSize: '140%',
+      handleStyle: {
+        color: '#fff'
+      },
+      moveHandleSize: 0,
+      textStyle: {
+        color: '#666'
+      },
+      fillerColor: 'rgba(24,38,73,.3)',
+      borderColor: 'none'
+    }
   },
   bottom: {
     grid: {
@@ -1199,7 +1244,22 @@ const rightContent = ref({
       data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
     }
     ],
-    dataZoom: {}
+    dataZoom: {
+      type: 'slider',
+      height: 20,
+      bottom: 8,
+      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+      handleSize: '140%',
+      handleStyle: {
+        color: '#fff'
+      },
+      moveHandleSize: 0,
+      textStyle: {
+        color: '#666'
+      },
+      fillerColor: 'rgba(24,38,73,.3)',
+      borderColor: 'none'
+    }
   }
 })
 

src/pages/views/home/components/StationManagement.vue

@@ -507,8 +507,20 @@ const powerChart = ref({
     }
   },
   dataZoom: {
-    show: true,
-    type: 'slider'
+    type: 'slider',
+    height: 20,
+    bottom: 8,
+    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+    handleSize: '140%',
+    handleStyle: {
+      color: '#fff'
+    },
+    moveHandleSize: 0,
+    textStyle: {
+      color: '#666'
+    },
+    fillerColor: 'rgba(24,38,73,.3)',
+    borderColor: 'none'
   },
   series: {
     data: [ 820, 932, 901, 934, 1290, 1330, 1320 ],