From a0e37e1dbb1dd795b52f28266c3a8820db698b31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E5=AE=81?= <18339727226@163.com> Date: Wed, 3 Jul 2024 14:05:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE=E3=80=81=E6=8A=98?= =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E5=A2=9E=E5=8A=A0=E6=BB=9A=E5=8A=A8=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/index/index.vue | 6 +++--- src/views/index/right-bottom-two.vue | 21 ++++++++++++++++++++- src/views/index/right-bottom.vue | 2 -- src/views/index/right-center.vue | 26 +++++++++++++++++++++++--- 4 files changed, 46 insertions(+), 9 deletions(-) diff --git a/src/views/index/index.vue b/src/views/index/index.vue index 00b66c4..4069966 100644 --- a/src/views/index/index.vue +++ b/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() }) diff --git a/src/views/index/right-bottom-two.vue b/src/views/index/right-bottom-two.vue index 9ee7e9d..eb2d2f5 100644 --- a/src/views/index/right-bottom-two.vue +++ b/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 }; diff --git a/src/views/index/right-bottom.vue b/src/views/index/right-bottom.vue index ff1435a..f389f7e 100644 --- a/src/views/index/right-bottom.vue +++ b/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) => { diff --git a/src/views/index/right-center.vue b/src/views/index/right-center.vue index f466233..ff9baa9 100644 --- a/src/views/index/right-center.vue +++ b/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 })