优化键盘

src/components/Progress.vue

@@ -90,6 +90,19 @@ const binOption = ref({
   tooltip: {
     trigger: 'axis',
   },
+  dataZoom: {
+    show: true, // 为true 滚动条出现
+    realtime: true,
+    type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
+    height: 10, // 表示滚动条的高度，也就是粗细
+    start: 40, // 表示默认展示0%～80%这一段。
+    end: 100,
+    backgroundColor: 'transparent',
+    bottom: 10,
+    textStyle: {
+      color: 'transparent',
+    },
+  },
   legend: {
     data: ['温度', '湿度', '过氧化氢浓度'],
   },
@@ -132,6 +145,19 @@ const envir1Option = ref({
   tooltip: {
     trigger: 'axis',
   },
+  dataZoom: {
+    show: true, // 为true 滚动条出现
+    realtime: true,
+    type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
+    height: 10, // 表示滚动条的高度，也就是粗细
+    start: 40, // 表示默认展示0%～80%这一段。
+    end: 100,
+    backgroundColor: 'transparent',
+    bottom: 10,
+    textStyle: {
+      color: 'transparent',
+    },
+  },
   legend: {
     data: ['温度', '湿度', '过氧化氢浓度'],
   },
@@ -174,6 +200,19 @@ const envir2Option = ref({
   tooltip: {
     trigger: 'axis',
   },
+  dataZoom: {
+    show: true, // 为true 滚动条出现
+    realtime: true,
+    type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
+    height: 10, // 表示滚动条的高度，也就是粗细
+    start: 40, // 表示默认展示0%～80%这一段。
+    end: 100,
+    backgroundColor: 'transparent',
+    bottom: 10,
+    textStyle: {
+      color: 'transparent',
+    },
+  },
   legend: {
     data: ['温度', '湿度', '过氧化氢浓度'],
   },