柱状图、折线图增加滚动条

src/views/index/index.vue

@@ -139,15 +139,15 @@ const getAdminPCIndex = () => {
 };
 
 watch(years,()=>{
-  console.log('years.value',years.value);
+  // console.log('years.value',years.value);
   payData()
 })
 watch(months,()=>{
-  console.log('months.value',months.value);
+  // console.log('months.value',months.value);
   payData()
 })
 watch(days,()=>{
-  console.log('days.value',days.value);
+  // console.log('days.value',days.value);
   payData()
 })
 

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

@@ -37,6 +37,25 @@ const option = reactive({
       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,
@@ -60,7 +79,7 @@ const getData = (params: any) => {
   setOption(dateList, numList)
 };
 const setOption = async (x: any[], y: any[]) => {
-  console.log(x, y);
+  // console.log(x, y);
   xData.value = x
   yData.value = y
 };

src/views/index/right-bottom.vue

@@ -15,8 +15,6 @@ const { provinceDto } = storeToRefs(dataStore)
 
 const rankProvinceData:any = ref([])
 const rankProvince = (data: any) => {
-  console.log('data=====>', data);
-
   rankProvinceData.value = data
 }
 const findDegree = (degree: any, name: string) => {

src/views/index/right-center.vue

@@ -24,13 +24,11 @@ const option = ref({});
 // 这里拿不到pinia的值 因为子组件比父组件先渲染
 // 暴露出去 让父组件调用 来赋值------待修改
 const getData = () => {
-  console.log('bkPay.value===>',bkPay.value);
   // let dateList = ['05-30', '05-31', '06-01', '06-02', '06-03', "06-04"]
   // let numList = [0, 0, 0, 0, 0, 0]
   tabs.value[0].dateList = Object.keys(bkPay.value?.statistics)
   tabs.value[1].dateList = Object.keys(zkPay.value?.statistics)
   tabs.value[2].dateList = Object.keys(zsbPay.value?.statistics)
-
   tabs.value[0].numList = Object.values(bkPay.value?.statistics)
   tabs.value[1].numList = Object.values(zkPay.value?.statistics)
   tabs.value[2].numList = Object.values(zsbPay.value?.statistics)
@@ -58,6 +56,10 @@ const setOption = async (xData: any[], yData: any[]) => {
       axisLabel: {
         color: "#fff",
         fontWeight: "500",
+        formatter: function (value: any) {
+          // 去除前五位 只显示具体的日期
+          return value.slice(5);
+        }
       },
       axisPointer: {
         type: 'line',
@@ -109,6 +111,24 @@ 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
+        }
+    ],
     series: [
       {
         data: yData,
@@ -186,7 +206,7 @@ defineExpose({ getData })
 <template>
   <div class="tabs">
     <div class="no-tab">
-      <p>{{ nowTitle }}缴费总人数</p>
+      <p>缴费总人数</p>
       <!-- <p> {{ bkPay?.todayPayDto?.payNum }} </p> -->
       <p> {{ totalPay ?? '0' }} </p>
     </div>