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 @@
-
-
-
+
+