echarts的滑块

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

@@ -1,8 +1,13 @@
-
 <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",
@@ -11,7 +16,7 @@ const option = reactive({
     axisLabel: {
       color: "#fff",
       fontWeight: "500",
-        formatter: function (value:any) {
+      formatter: function (value: any) {
         return value.substring(0, 3) + '..'; // 取每个字符串的前三个字符
       },
     },
@@ -38,12 +43,12 @@ const option = reactive({
     // borderColor: "#1F63A3",
   },
   // 添加 dataZoom 组件来启用滚动条
-        dataZoom: [
+  /* dataZoom: [
   {
       type: 'slider', // 这里是滑块型数据区域缩放组件
       show: true, // 是否显示滑块
       start: 0, // 数据窗口范围的起始百分比
-            end: 100, // 数据窗口范围的结束百分比
+      end: 50, // 数据窗口范围的结束百分比
       handleSize: 10, // 滑块的大小
       height: 10, // 滑块组件的高度
       xAxisIndex: [0], // 控制哪个x轴
@@ -55,7 +60,14 @@ const option = reactive({
       start: 0,
       end: 100
   }
-    ],
+], */
+  // 只有当数据超过七条时才添加 dataZoom 配置
+  dataZoom: [{
+    show: showZoom,
+    type: 'slider',
+    start: 0,
+    end: zoomIndex
+  }], // 如果不需要 dataZoom，则设置为 null
   series: [
     {
       data: yData,
@@ -77,8 +89,9 @@ 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",
@@ -112,7 +118,7 @@ const setOption = async (xData: any[], yData: any[]) => {
       // borderColor: "#1F63A3",
     },
     // 添加 dataZoom 组件来启用滚动条
-        dataZoom: [
+    /* dataZoom: [
       {
         type: 'slider', // 这里是滑块型数据区域缩放组件
         show: true, // 是否显示滑块
@@ -128,7 +134,14 @@ const setOption = async (xData: any[], yData: any[]) => {
         start: 0,
         end: 100
       }
-    ],
+    ], */
+    // 只有当数据超过七条时才添加 dataZoom 配置
+    dataZoom: [{
+      show: showZoom,
+      type: 'slider',
+      start: 0,
+      end: zoomIndex
+    }], // 如果不需要 dataZoom，则设置为 null
     series: [
       {
         data: yData,