echarts的滑块

src/views/index/right-bottom-two.vue

@@ -1,84 +1,97 @@
-
 <script setup lang="ts">
 import { ElMessage } from "element-plus";
-const xData:Ref<any> = ref([])
+const xData: Ref<any> = ref([])
-const yData:Ref<any> = ref([])
+const yData: Ref<any> = ref([])
+const zoomIndex = computed(() => {
+  return (7 / xData.value.length)?.toFixed(1) as any * 100 || 0
+})
+const showZoom = computed(() => {
+  return xData.value.length > 7
+})
 const option = reactive({
   xAxis: {
-      type: "category",
+    type: "category",
-      data: xData,
+    data: xData,
-      boundaryGap: true, // 是否留白，从原点开始
+    boundaryGap: true, // 是否留白，从原点开始
-      axisLabel: {
+    axisLabel: {
-        color: "#fff",
+      color: "#fff",
-        fontWeight: "500",
+      fontWeight: "500",
-        formatter: function (value:any) {
+      formatter: function (value: any) {
-            return value.substring(0, 3) + '..'; // 取每个字符串的前三个字符
+        return value.substring(0, 3) + '..'; // 取每个字符串的前三个字符
-        },
       },
     },
-    yAxis: {
+  },
-      show: false,
+  yAxis: {
+    show: false,
+  },
+  tooltip: {
+    trigger: "axis",
+    backgroundColor: "rgba(0,0,0,.6)",
+    borderColor: "rgba(147, 235, 248, .8)",
+    textStyle: {
+      color: "#FFF",
     },
-    tooltip: {
+  },
-      trigger: "axis",
+  grid: {
-      backgroundColor: "rgba(0,0,0,.6)",
+    //布局
-      borderColor: "rgba(147, 235, 248, .8)",
+    show: false,
-      textStyle: {
+    left: "10px",
-        color: "#FFF",
+    right: "30px",
-      },
+    bottom: "0px",
-    },
+    top: "20px",
-    grid: {
+    containLabel: true,
-      //布局
+    // borderColor: "#1F63A3",
-      show: false,
+  },
-      left: "10px",
+  // 添加 dataZoom 组件来启用滚动条
-      right: "30px",
+  /* dataZoom: [
-      bottom: "0px",
+  {
-      top: "20px",
+      type: 'slider', // 这里是滑块型数据区域缩放组件
-      containLabel: true,
+      show: true, // 是否显示滑块
-      // borderColor: "#1F63A3",
+      start: 0, // 数据窗口范围的起始百分比
-    },
+      end: 50, // 数据窗口范围的结束百分比
-        // 添加 dataZoom 组件来启用滚动条
+      handleSize: 10, // 滑块的大小
-        dataZoom: [
+      height: 10, // 滑块组件的高度
-        {
+      xAxisIndex: [0], // 控制哪个x轴
-            type: 'slider', // 这里是滑块型数据区域缩放组件
+      filterMode: 'empty', // 数据过滤模式，'empty'表示空数据不显示
-            show: true, // 是否显示滑块
+      
-            start: 0, // 数据窗口范围的起始百分比
+  },
-            end: 100, // 数据窗口范围的结束百分比
+  {
-            handleSize: 10, // 滑块的大小
+      type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
-            height: 10, // 滑块组件的高度
+      start: 0,
-            xAxisIndex: [0], // 控制哪个x轴
+      end: 100
-            filterMode: 'empty', // 数据过滤模式，'empty'表示空数据不显示
+  }
-            
+], */
-        },
+  // 只有当数据超过七条时才添加 dataZoom 配置
-        {
+  dataZoom: [{
-            type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
+    show: showZoom,
-            start: 0,
+    type: 'slider',
-            end: 100
+    start: 0,
-        }
+    end: zoomIndex
-    ],
+  }], // 如果不需要 dataZoom，则设置为 null
-    series: [
+  series: [
-      {
+    {
-        data: yData,
+      data: yData,
-        type: "bar",
+      type: "bar",
-        smooth: false,
+      smooth: false,
-        name: "已报到人数",
+      name: "已报到人数",
-        color: "#2265ff",
+      color: "#2265ff",
-        label: {
+      label: {
-          show: true, // 开启显示  
+        show: true, // 开启显示  
-          position: 'top', // 在上方显示  
+        position: 'top', // 在上方显示  
-          color: '#999',
+        color: '#999',
-          fontSize: 12,
+        fontSize: 12,
 
-        }
       }
-    ],
+    }
+  ],
 });
 const getData = (params: any) => {
   let dateList = params.map((el: any) => el.professionalName)
   let numList = params.map((el: any) => el.reportNumber)
   setOption(dateList, numList)
+
 };
-const setOption = async (x: any[], y: any[]) => {
+const setOption = (x: any[], y: any[]) => {
   // console.log(x, y);
   xData.value = x
   yData.value = y

src/views/index/right-center.vue

@@ -36,6 +36,12 @@ const getData = () => {
   setOption(tabs.value[0].dateList, tabs.value[0].numList)
 };
 const setOption = async (xData: any[], yData: any[]) => {
+  const zoomIndex = computed(() => {
+    return (12 / xData.length)?.toFixed(1) as any * 100 || 0
+  })
+  const showZoom = computed(() => {
+    return xData.length > 12
+  })
   option.value = {
     xAxis: {
       type: "category",
@@ -111,24 +117,31 @@ const setOption = async (xData: any[], yData: any[]) => {
       containLabel: true,
       // borderColor: "#1F63A3",
     },
-        // 添加 dataZoom 组件来启用滚动条
+    // 添加 dataZoom 组件来启用滚动条
-        dataZoom: [
+    /* dataZoom: [
-        {
+      {
-            type: 'slider', // 这里是滑块型数据区域缩放组件
+        type: 'slider', // 这里是滑块型数据区域缩放组件
-            show: true, // 是否显示滑块
+        show: true, // 是否显示滑块
-            start: 0, // 数据窗口范围的起始百分比
+        start: 0, // 数据窗口范围的起始百分比
-            end: 100, // 数据窗口范围的结束百分比
+        end: 100, // 数据窗口范围的结束百分比
-            handleSize: 10, // 滑块的大小
+        handleSize: 10, // 滑块的大小
-            height: 15, // 滑块组件的高度
+        height: 15, // 滑块组件的高度
-            xAxisIndex: [0], // 控制哪个x轴
+        xAxisIndex: [0], // 控制哪个x轴
-            filterMode: 'empty' // 数据过滤模式，'empty'表示空数据不显示
+        filterMode: 'empty' // 数据过滤模式，'empty'表示空数据不显示
-        },
+      },
-        {
+      {
-            type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
+        type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
-            start: 0,
+        start: 0,
-            end: 100
+        end: 100
-        }
+      }
-    ],
+    ], */
+    // 只有当数据超过七条时才添加 dataZoom 配置
+    dataZoom: [{
+      show: showZoom,
+      type: 'slider',
+      start: 0,
+      end: zoomIndex
+    }], // 如果不需要 dataZoom，则设置为 null
     series: [
       {
         data: yData,