From 4933e4b52d1c45281780bd9de17d2a9cc2aee015 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=AE=81?= <18339727226@163.com>
Date: Fri, 5 Jul 2024 17:31:19 +0800
Subject: [PATCH] =?UTF-8?q?echarts=E7=9A=84=E6=BB=91=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index/right-bottom-two.vue | 145 +++++++++++++++------------
 src/views/index/right-center.vue     |  49 +++++----
 2 files changed, 110 insertions(+), 84 deletions(-)

diff --git a/src/views/index/right-bottom-two.vue b/src/views/index/right-bottom-two.vue
index eb2d2f5..3306766 100644
--- a/src/views/index/right-bottom-two.vue
+++ b/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 yData:Ref<any> = ref([])
+const xData: 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",
-      data: xData,
-      boundaryGap: true, // 是否留白，从原点开始
-      axisLabel: {
-        color: "#fff",
-        fontWeight: "500",
-        formatter: function (value:any) {
-            return value.substring(0, 3) + '..'; // 取每个字符串的前三个字符
-        },
+    type: "category",
+    data: xData,
+    boundaryGap: true, // 是否留白，从原点开始
+    axisLabel: {
+      color: "#fff",
+      fontWeight: "500",
+      formatter: function (value: any) {
+        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",
-      backgroundColor: "rgba(0,0,0,.6)",
-      borderColor: "rgba(147, 235, 248, .8)",
-      textStyle: {
-        color: "#FFF",
-      },
-    },
-    grid: {
-      //布局
-      show: false,
-      left: "10px",
-      right: "30px",
-      bottom: "0px",
-      top: "20px",
-      containLabel: true,
-      // borderColor: "#1F63A3",
-    },
-        // 添加 dataZoom 组件来启用滚动条
-        dataZoom: [
-        {
-            type: 'slider', // 这里是滑块型数据区域缩放组件
-            show: true, // 是否显示滑块
-            start: 0, // 数据窗口范围的起始百分比
-            end: 100, // 数据窗口范围的结束百分比
-            handleSize: 10, // 滑块的大小
-            height: 10, // 滑块组件的高度
-            xAxisIndex: [0], // 控制哪个x轴
-            filterMode: 'empty', // 数据过滤模式，'empty'表示空数据不显示
-            
-        },
-        {
-            type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
-            start: 0,
-            end: 100
-        }
-    ],
-    series: [
-      {
-        data: yData,
-        type: "bar",
-        smooth: false,
-        name: "已报到人数",
-        color: "#2265ff",
-        label: {
-          show: true, // 开启显示  
-          position: 'top', // 在上方显示  
-          color: '#999',
-          fontSize: 12,
+  },
+  grid: {
+    //布局
+    show: false,
+    left: "10px",
+    right: "30px",
+    bottom: "0px",
+    top: "20px",
+    containLabel: true,
+    // borderColor: "#1F63A3",
+  },
+  // 添加 dataZoom 组件来启用滚动条
+  /* dataZoom: [
+  {
+      type: 'slider', // 这里是滑块型数据区域缩放组件
+      show: true, // 是否显示滑块
+      start: 0, // 数据窗口范围的起始百分比
+      end: 50, // 数据窗口范围的结束百分比
+      handleSize: 10, // 滑块的大小
+      height: 10, // 滑块组件的高度
+      xAxisIndex: [0], // 控制哪个x轴
+      filterMode: 'empty', // 数据过滤模式，'empty'表示空数据不显示
+      
+  },
+  {
+      type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
+      start: 0,
+      end: 100
+  }
+], */
+  // 只有当数据超过七条时才添加 dataZoom 配置
+  dataZoom: [{
+    show: showZoom,
+    type: 'slider',
+    start: 0,
+    end: zoomIndex
+  }], // 如果不需要 dataZoom，则设置为 null
+  series: [
+    {
+      data: yData,
+      type: "bar",
+      smooth: false,
+      name: "已报到人数",
+      color: "#2265ff",
+      label: {
+        show: true, // 开启显示  
+        position: 'top', // 在上方显示  
+        color: '#999',
+        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
diff --git a/src/views/index/right-center.vue b/src/views/index/right-center.vue
index ff9baa9..489e5cd 100644
--- a/src/views/index/right-center.vue
+++ b/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: [
-        {
-            type: 'slider', // 这里是滑块型数据区域缩放组件
-            show: true, // 是否显示滑块
-            start: 0, // 数据窗口范围的起始百分比
-            end: 100, // 数据窗口范围的结束百分比
-            handleSize: 10, // 滑块的大小
-            height: 15, // 滑块组件的高度
-            xAxisIndex: [0], // 控制哪个x轴
-            filterMode: 'empty' // 数据过滤模式，'empty'表示空数据不显示
-        },
-        {
-            type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
-            start: 0,
-            end: 100
-        }
-    ],
+    // 添加 dataZoom 组件来启用滚动条
+    /* dataZoom: [
+      {
+        type: 'slider', // 这里是滑块型数据区域缩放组件
+        show: true, // 是否显示滑块
+        start: 0, // 数据窗口范围的起始百分比
+        end: 100, // 数据窗口范围的结束百分比
+        handleSize: 10, // 滑块的大小
+        height: 15, // 滑块组件的高度
+        xAxisIndex: [0], // 控制哪个x轴
+        filterMode: 'empty' // 数据过滤模式，'empty'表示空数据不显示
+      },
+      {
+        type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
+        start: 0,
+        end: 100
+      }
+    ], */
+    // 只有当数据超过七条时才添加 dataZoom 配置
+    dataZoom: [{
+      show: showZoom,
+      type: 'slider',
+      start: 0,
+      end: zoomIndex
+    }], // 如果不需要 dataZoom，则设置为 null
     series: [
       {
         data: yData,