diff --git a/src/components/Progress.vue b/src/components/Progress.vue index 614fb05..e422979 100644 --- a/src/components/Progress.vue +++ b/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: ['温度', '湿度', '过氧化氢浓度'], },