diff --git a/src/pages/statistic/accounts/accountDealAnalysis/index.vue b/src/pages/statistic/accounts/accountDealAnalysis/index.vue index 7759022..1abe809 100644 --- a/src/pages/statistic/accounts/accountDealAnalysis/index.vue +++ b/src/pages/statistic/accounts/accountDealAnalysis/index.vue @@ -348,55 +348,70 @@ }) // 柱状图配置 - const columnChartOpts = ref({ - color: ['#667eea'], - padding: [20, 30, 50, 5], - enableScroll: false, - dataLabel: false, - legend: { - show: false - }, - xAxis: { - disableGrid: true, - boundaryGap: 'center', - axisLine: true, - axisLineColor: '#CCCCCC', - scrollShow: true, - itemCount: 5, - fontSize: 10, - fontColor: '#999999', - rotateLabel: true, - rotateAngle: 30 - }, - yAxis: { - gridType: 'dash', - dashLength: 4, - gridColor: '#EEEEEE', - splitNumber: 5, - fontSize: 10, - fontColor: '#999999', - showXAxisLine: true, - format: (val) => { - if (val >= 10000) { - return (val / 10000).toFixed(1) + 'w' + const columnChartOpts = computed(() => { + // 计算数据范围以动态设置Y轴 + let minValue = 0 + let maxValue = 0 + if (listData.value && listData.value.length > 0) { + const values = listData.value.map(item => parseFloat(item.value) || 0) + minValue = Math.min(0, ...values) + maxValue = Math.max(0, ...values) + // 给最小值和最大值留出20%的空间 + const range = maxValue - minValue + minValue = minValue - range * 0.2 + maxValue = maxValue + range * 0.2 + } + + return { + color: ['#667eea'], + padding: [15, 15, 80, 15], + enableScroll: false, + dataLabel: false, + legend: { + show: false + }, + xAxis: { + disableGrid: true, + boundaryGap: 'center', + axisLine: false, + scrollShow: true, + itemCount: 5, + fontSize: 10, + fontColor: '#999999', + rotateLabel: true, + rotateAngle: 30 + }, + yAxis: { + gridType: 'dash', + dashLength: 4, + gridColor: '#EEEEEE', + splitNumber: 5, + min: minValue, + max: maxValue, + fontSize: 10, + fontColor: '#999999', + showTitle: false, + disabled: false, + format: (val) => { + if (val >= 10000) { + return (val / 10000).toFixed(1) + 'w' + } + if (val <= -10000) { + return (val / 10000).toFixed(1) + 'w' + } + return val.toFixed(0) } - if (val <= -10000) { - return (val / 10000).toFixed(1) + 'w' + }, + extra: { + column: { + type: 'group', + width: 20, + activeBgColor: '#764ba2', + activeBgOpacity: 0.08, + linearType: 'none', + barBorderCircle: true, + seriesGap: 2 } - return val.toFixed(0) - } - }, - extra: { - column: { - type: 'group', - width: 20, - activeBgColor: '#764ba2', - activeBgOpacity: 0.08, - linearType: 'custom', - barBorderCircle: true, - seriesGap: 2, - categoryGap: 3, - colorStop: 0 } } }) @@ -412,24 +427,6 @@ // 创建副本并反转数组,使时间从前往后排序 const reversedData = [...listData.value].reverse() - // 曲线图使用单一数据系列 - if (viewMode.value === 'line') { - return { - categories: reversedData.map(item => item.time || ''), - series: [ - { - name: '收支金额', - data: reversedData.map(item => { - const value = parseFloat(item.value) - return isNaN(value) ? 0 : value - }), - color: '#667eea' - } - ] - } - } - - // 柱状图使用单一数据系列,每个柱子根据正负设置颜色 return { categories: reversedData.map(item => item.time || ''), series: [ @@ -437,12 +434,12 @@ name: '收支金额', data: reversedData.map(item => { const value = parseFloat(item.value) - const val = isNaN(value) ? 0 : value - return { - value: val, - color: val < 0 ? '#ef4444' : '#667eea' - } - }) + return isNaN(value) ? 0 : value + }), + color: (value) => { + // 负数使用红色,正数使用蓝紫色 + return value < 0 ? '#ef4444' : '#667eea' + } } ] } @@ -669,13 +666,13 @@ function searchSubmit() { .chart-container { margin: 16rpx 24rpx 160rpx; - padding: 16rpx 16rpx 0; + padding: 16rpx; background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); width: calc(100% - 48rpx); - height: 600rpx; - overflow: hidden; + height: 850rpx; + overflow: visible; position: relative; } diff --git a/src/pages/statistic/accounts/accountsBalance/index.vue b/src/pages/statistic/accounts/accountsBalance/index.vue index 0652955..da5acb5 100644 --- a/src/pages/statistic/accounts/accountsBalance/index.vue +++ b/src/pages/statistic/accounts/accountsBalance/index.vue @@ -315,46 +315,59 @@ }) // 柱状图配置 - const columnChartOpts = ref({ - color: ['#667eea'], - padding: [20, 15, 50, 5], - enableScroll: false, - dataLabel: false, - legend: { - show: false - }, - xAxis: { - disabled: true - }, - yAxis: { - gridType: 'dash', - dashLength: 4, - gridColor: '#EEEEEE', - splitNumber: 5, - fontSize: 10, - fontColor: '#999999', - format: (val) => { - if (val >= 10000) { - return (val / 10000).toFixed(1) + 'w' - } - return val.toFixed(0) + const columnChartOpts = computed(() => { + // 计算数据范围以动态设置Y轴 + let minValue = 0 + let maxValue = 0 + if (listData.value && listData.value.length > 0) { + const values = listData.value.map(item => parseFloat(item.availableLimit) || 0) + minValue = Math.min(0, ...values) + maxValue = Math.max(0, ...values) + // 给最小值和最大值留出20%的空间 + const range = maxValue - minValue + minValue = minValue - range * 0.2 + maxValue = maxValue + range * 0.2 + } + + return { + color: ['#667eea'], + padding: [15, 15, 80, 15], + enableScroll: false, + dataLabel: false, + legend: { + show: false }, - data: [ - { - min: 0 + xAxis: { + disabled: true + }, + yAxis: { + gridType: 'dash', + dashLength: 4, + gridColor: '#EEEEEE', + splitNumber: 5, + min: minValue, + max: maxValue, + fontSize: 10, + fontColor: '#999999', + showTitle: false, + disabled: false, + format: (val) => { + if (val >= 10000) { + return (val / 10000).toFixed(1) + 'w' + } + return val.toFixed(0) + } + }, + extra: { + column: { + type: 'group', + width: 20, + activeBgColor: '#764ba2', + activeBgOpacity: 0.08, + linearType: 'none', + barBorderCircle: true, + seriesGap: 2 } - ] - }, - extra: { - column: { - type: 'group', - width: 20, - activeBgColor: '#764ba2', - activeBgOpacity: 0.08, - linearType: 'custom', - linearOpacity: 0.6, - barBorderCircle: true, - seriesGap: 2 } } }) @@ -376,8 +389,10 @@ const value = parseFloat(item.availableLimit) return isNaN(value) ? 0 : value }), - linearIndex: 0, - color: '#667eea' + color: (value) => { + // 负数使用红色,正数使用蓝紫色 + return value < 0 ? '#ef4444' : '#667eea' + } } ] } @@ -633,12 +648,12 @@ } .chart-container { - padding: 16rpx 16rpx 0; + padding: 16rpx; background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); - height: 600rpx; - overflow: hidden; + height: 850rpx; + overflow: visible; position: relative; } diff --git a/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue b/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue index 85b540f..9ab9b78 100644 --- a/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue +++ b/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue @@ -366,54 +366,70 @@ }) // 柱状图配置 - const columnChartOpts = ref({ - color: ['#667eea'], - padding: [20, 15, 60, 5], - enableScroll: false, - dataLabel: false, - legend: { - show: false - }, - xAxis: { - disableGrid: true, - boundaryGap: 'center', - axisLine: true, - axisLineColor: '#CCCCCC', - scrollShow: true, - itemCount: 5, - fontSize: 10, - fontColor: '#999999', - rotateLabel: true, - rotateAngle: 30 - }, - yAxis: { - gridType: 'dash', - dashLength: 4, - gridColor: '#EEEEEE', - splitNumber: 5, - fontSize: 10, - fontColor: '#999999', - showXAxisLine: true, - format: (val) => { - if (val >= 10000) { - return (val / 10000).toFixed(1) + 'w' + const columnChartOpts = computed(() => { + // 计算数据范围以动态设置Y轴 + let minValue = 0 + let maxValue = 0 + if (listData.value && listData.value.length > 0) { + const values = listData.value.map(item => parseFloat(item.value) || 0) + minValue = Math.min(0, ...values) + maxValue = Math.max(0, ...values) + // 给最小值和最大值留出20%的空间 + const range = maxValue - minValue + minValue = minValue - range * 0.2 + maxValue = maxValue + range * 0.2 + } + + return { + color: ['#667eea'], + padding: [15, 15, 80, 15], + enableScroll: false, + dataLabel: false, + legend: { + show: false + }, + xAxis: { + disableGrid: true, + boundaryGap: 'center', + axisLine: false, + scrollShow: true, + itemCount: 5, + fontSize: 10, + fontColor: '#999999', + rotateLabel: true, + rotateAngle: 30 + }, + yAxis: { + gridType: 'dash', + dashLength: 4, + gridColor: '#EEEEEE', + splitNumber: 5, + min: minValue, + max: maxValue, + fontSize: 10, + fontColor: '#999999', + showTitle: false, + disabled: false, + format: (val) => { + if (val >= 10000) { + return (val / 10000).toFixed(1) + 'w' + } + if (val <= -10000) { + return (val / 10000).toFixed(1) + 'w' + } + return val.toFixed(0) } - if (val <= -10000) { - return (val / 10000).toFixed(1) + 'w' + }, + extra: { + column: { + type: 'group', + width: 20, + activeBgColor: '#764ba2', + activeBgOpacity: 0.08, + linearType: 'none', + barBorderCircle: true, + seriesGap: 2 } - return val.toFixed(0) - } - }, - extra: { - column: { - type: 'group', - width: 20, - activeBgColor: '#764ba2', - activeBgOpacity: 0.08, - linearType: 'custom', - linearOpacity: 0.6, - barBorderCircle: true, - seriesGap: 2 } } }) @@ -437,8 +453,10 @@ const value = parseFloat(item.value) return isNaN(value) ? 0 : value }), - linearIndex: 0, - color: '#667eea' + color: (value) => { + // 负数使用红色,正数使用蓝紫色 + return value < 0 ? '#ef4444' : '#667eea' + } } ] } @@ -709,12 +727,12 @@ function searchSubmit() { .chart-container { margin: 16rpx 24rpx 160rpx; - padding: 24rpx; + padding: 16rpx; background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); width: calc(100% - 48rpx); - height: 700rpx; + height: 850rpx; overflow: visible; position: relative; } diff --git a/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue b/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue index 840c56e..d3961e2 100644 --- a/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue +++ b/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue @@ -449,54 +449,68 @@ }) // 柱状图配置 - const columnChartOpts = ref({ - color: ['#667eea'], - padding: [20, 15, 35, 5], - enableScroll: false, - dataLabel: false, - legend: { - show: false - }, - xAxis: { - disableGrid: true, - boundaryGap: 'center', - axisLine: false, - scrollShow: true, - itemCount: 5, - fontSize: 10, - fontColor: '#999999', - rotateLabel: true, - rotateAngle: 30 - }, - yAxis: { - gridType: 'dash', - dashLength: 4, - gridColor: '#EEEEEE', - splitNumber: 5, - fontSize: 10, - fontColor: '#999999', - format: (val) => { - if (val >= 10000) { - return (val / 10000).toFixed(1) + 'w' - } - return val.toFixed(0) + const columnChartOpts = computed(() => { + const currentData = viewMode.value === 'category' ? secondListData.value : listData.value + // 计算数据范围以动态设置Y轴 + let minValue = 0 + let maxValue = 0 + if (currentData && currentData.length > 0) { + const values = currentData.map(item => parseFloat(item.value) || 0) + minValue = Math.min(0, ...values) + maxValue = Math.max(0, ...values) + // 给最小值和最大值留出20%的空间 + const range = maxValue - minValue + minValue = minValue - range * 0.2 + maxValue = maxValue + range * 0.2 + } + + return { + color: ['#667eea'], + padding: [15, 15, 80, 15], + enableScroll: false, + dataLabel: false, + legend: { + show: false }, - data: [ - { - min: 0 + xAxis: { + disableGrid: true, + boundaryGap: 'center', + axisLine: false, + scrollShow: true, + itemCount: 5, + fontSize: 10, + fontColor: '#999999', + rotateLabel: true, + rotateAngle: 30 + }, + yAxis: { + gridType: 'dash', + dashLength: 4, + gridColor: '#EEEEEE', + splitNumber: 5, + min: minValue, + max: maxValue, + fontSize: 10, + fontColor: '#999999', + showTitle: false, + disabled: false, + format: (val) => { + if (val >= 10000) { + return (val / 10000).toFixed(1) + 'w' + } + return val.toFixed(0) + } + }, + extra: { + column: { + type: 'group', + width: 20, + activeBgColor: '#764ba2', + activeBgOpacity: 0.08, + linearType: 'none', + barBorderCircle: true, + seriesGap: 2 } - ] - }, - extra: { - column: { - type: 'group', - width: 20, - activeBgColor: '#764ba2', - activeBgOpacity: 0.08, - linearType: 'custom', - linearOpacity: 0.6, - barBorderCircle: true, - seriesGap: 2 } } }) @@ -521,8 +535,10 @@ const value = parseFloat(item.value) return isNaN(value) ? 0 : value }), - linearIndex: 0, - color: '#667eea' + color: (value) => { + // 负数使用红色,正数使用蓝紫色 + return value < 0 ? '#ef4444' : '#667eea' + } } ] } @@ -802,13 +818,13 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(- .chart-container { margin: 16rpx 24rpx 160rpx; - padding: 16rpx 16rpx 0; + padding: 16rpx; background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); width: calc(100% - 48rpx); - height: 600rpx; - overflow: hidden; + height: 850rpx; + overflow: visible; position: relative; } diff --git a/src/pages/statistic/accounts/dailyLiabilities/index.vue b/src/pages/statistic/accounts/dailyLiabilities/index.vue index bfe4239..4c07761 100644 --- a/src/pages/statistic/accounts/dailyLiabilities/index.vue +++ b/src/pages/statistic/accounts/dailyLiabilities/index.vue @@ -118,9 +118,8 @@ - - - + +