qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 统计分析ui进一步功能优化。

Browse Source
This commit is contained in:
tianyongbao
2025-11-19 16:06:26 +08:00
parent 7c4c20e67c
commit 312c93a374
20 changed files with 1991 additions and 1381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/statistic/accounts/accountDealAnalysis/index.vue
View File

@@ -348,9 +348,23 @@
})
// 柱状图配置
const columnChartOpts = ref({
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: [20, 30, 50, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -359,8 +373,7 @@
xAxis: {
disableGrid: true,
boundaryGap: 'center',
axisLine: true,
axisLineColor: '#CCCCCC',
axisLine: false,
scrollShow: true,
itemCount: 5,
fontSize: 10,
@@ -373,9 +386,12 @@
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showXAxisLine: true,
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
return (val / 10000).toFixed(1) + 'w'
@@ -392,11 +408,10 @@
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearType: 'none',
barBorderCircle: true,
seriesGap: 2,
categoryGap: 3,
colorStop: 0
seriesGap: 2
}
}
}
})
@@ -412,8 +427,6 @@
// 创建副本并反转数组，使时间从前往后排序
const reversedData = [...listData.value].reverse()
// 曲线图使用单一数据系列
if (viewMode.value === 'line') {
return {
categories: reversedData.map(item => item.time || ''),
series: [
@@ -423,26 +436,10 @@
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
color: '#667eea'
color: (value) => {
// 负数使用红色，正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
]
}
}
// 柱状图使用单一数据系列，每个柱子根据正负设置颜色
return {
categories: reversedData.map(item => item.time || ''),
series: [
{
name: '收支金额',
data: reversedData.map(item => {
const value = parseFloat(item.value)
const val = isNaN(value) ? 0 : value
return {
value: val,
color: val < 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;
}

43
src/pages/statistic/accounts/accountsBalance/index.vue
View File

@@ -315,9 +315,23 @@
})
// 柱状图配置
const columnChartOpts = ref({
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: [20, 15, 50, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -331,19 +345,18 @@
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)
},
data: [
{
min: 0
}
]
},
extra: {
column: {
@@ -351,12 +364,12 @@
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
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;
}

40
src/pages/statistic/accounts/creditCardDealAnalysis/index.vue
View File

@@ -366,9 +366,23 @@
})
// 柱状图配置
const columnChartOpts = ref({
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: [20, 15, 60, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -377,8 +391,7 @@
xAxis: {
disableGrid: true,
boundaryGap: 'center',
axisLine: true,
axisLineColor: '#CCCCCC',
axisLine: false,
scrollShow: true,
itemCount: 5,
fontSize: 10,
@@ -391,9 +404,12 @@
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showXAxisLine: true,
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
return (val / 10000).toFixed(1) + 'w'
@@ -410,12 +426,12 @@
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
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;
}

44
src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
View File

@@ -449,9 +449,24 @@
})
// 柱状图配置
const columnChartOpts = ref({
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: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -473,19 +488,18 @@
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)
},
data: [
{
min: 0
}
]
},
extra: {
column: {
@@ -493,12 +507,12 @@
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
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;
}

9
src/pages/statistic/accounts/dailyLiabilities/index.vue
View File

@@ -118,9 +118,8 @@
<u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
@confirm="settingConfirm" @cancel="settingCancel"></u-picker>
</view>
<!-- 悬停按钮返回工作台-->
<suspend></suspend>
<refresh></refresh>
<!-- 悬停按钮返回统计分析-->
<statisticBtn></statisticBtn>
</template>
<script setup>
@@ -442,7 +441,7 @@ function getDict() {
.card-name {
color: #ffffff;
font-size: 28rpx;
font-size: 26rpx;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
@@ -468,7 +467,7 @@ function getDict() {
.balance-value {
color: #fa8c16;
font-size: 32rpx;
font-size: 30rpx;
font-weight: 700;
line-height: 1;
white-space: nowrap;

118
src/pages/statistic/accounts/debitCardAnalysis/index.vue
View File

@@ -41,7 +41,7 @@
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<!-- <div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -60,7 +60,7 @@
<div class="num">{{ debitCardAnalysis.oneMonthAmount }}<span>元</span></div>
</div>
</div>
</div>
</div> -->
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
@@ -81,7 +81,7 @@
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<!-- <div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -100,7 +100,7 @@
<div class="num">{{ debitCardAnalysis.sixMonthAmount }}<span>元</span></div>
</div>
</div>
</div>
</div> -->
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
@@ -121,7 +121,7 @@
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<!-- <div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -140,8 +140,8 @@
<div class="num">{{ debitCardAnalysis.twoYearAmount }}<span>元</span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
</div> -->
<!-- <div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -160,7 +160,7 @@
<div class="num">{{ debitCardAnalysis.fiveYearAmount }}<span>元</span></div>
</div>
</div>
</div>
</div> -->
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);">
@@ -394,9 +394,32 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
const { filterPanel, queryParams} = toRefs(data)
// 曲线图配置
const lineChartOpts = ref({
const lineChartOpts = computed(() => {
// 计算数据范围以动态设置Y轴
let minValue = 0
let maxValue = 0
if (secondListData.value && secondListData.value.length > 0) {
// 过滤掉金额为0的数据
const filteredValues = secondListData.value
.filter(item => {
const value = parseFloat(item.amount)
return !isNaN(value) && value > 0
})
.map(item => parseFloat(item.amount) || 0)
if (filteredValues.length > 0) {
minValue = Math.min(0, ...filteredValues)
maxValue = Math.max(0, ...filteredValues)
// 给最小值和最大值留出20%的空间
const range = maxValue - minValue
minValue = minValue - range * 0.2
maxValue = maxValue + range * 0.2
}
}
return {
color: ['#667eea'],
padding: [20, 15, 60, 5],
padding: [20, 15, 60, 15],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
@@ -407,8 +430,7 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
xAxis: {
disableGrid: true,
boundaryGap: 'justify',
axisLine: true,
axisLineColor: '#CCCCCC',
axisLine: false,
scrollShow: true,
itemCount: 5,
disabled: true,
@@ -422,10 +444,12 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showXAxisLine: true,
data: [{ min: null, max: null }],
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
return (val / 10000).toFixed(1) + 'w'
@@ -441,17 +465,42 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'none',
onShadow: false,
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
}
}
}
})
// 柱状图配置
const columnChartOpts = ref({
const columnChartOpts = computed(() => {
// 计算数据范围以动态设置Y轴
let minValue = 0
let maxValue = 0
if (secondListData.value && secondListData.value.length > 0) {
// 过滤掉金额为0的数据
const filteredValues = secondListData.value
.filter(item => {
const value = parseFloat(item.amount)
return !isNaN(value) && value > 0
})
.map(item => parseFloat(item.amount) || 0)
if (filteredValues.length > 0) {
minValue = Math.min(0, ...filteredValues)
maxValue = Math.max(0, ...filteredValues)
// 给最小值和最大值留出20%的空间
const range = maxValue - minValue
minValue = minValue - range * 0.2
maxValue = maxValue + range * 0.2
}
}
return {
color: ['#667eea'],
padding: [20, 15, 60, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -460,8 +509,7 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
xAxis: {
disableGrid: true,
boundaryGap: 'center',
axisLine: true,
axisLineColor: '#CCCCCC',
axisLine: false,
scrollShow: true,
itemCount: 5,
disabled: true,
@@ -475,10 +523,12 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showXAxisLine: true,
data: [{ min: null, max: null }],
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
return (val / 10000).toFixed(1) + 'w'
@@ -495,12 +545,12 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -511,8 +561,14 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
series: []
}
}
// 创建副本并反转数组，使数据从前往后排序
const reversedData = [...secondListData.value].reverse()
// 创建副本并反转数组，使数据从前往后排序，过滤掉金额为0的数据
const reversedData = [...secondListData.value]
.filter(item => {
const value = parseFloat(item.amount)
return !isNaN(value) && value > 0
})
.reverse()
return {
categories: reversedData.map(item => item.debitCard || ''),
series: [
@@ -523,8 +579,10 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
const value = parseFloat(item.amount)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 负数使用红色，正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
}
]
}
@@ -798,12 +856,12 @@ const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 '
.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;
}

42
src/pages/statistic/accounts/debitDealAnalysis/index.vue
View File

@@ -362,9 +362,23 @@
})
// 柱状图配置
const columnChartOpts = ref({
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: [20, 15, 60, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -373,8 +387,7 @@
xAxis: {
disableGrid: true,
boundaryGap: 'center',
axisLine: true,
axisLineColor: '#CCCCCC',
axisLine: false,
scrollShow: true,
itemCount: 5,
fontSize: 10,
@@ -387,9 +400,12 @@
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showXAxisLine: true,
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
return (val / 10000).toFixed(1) + 'w'
@@ -406,12 +422,12 @@
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -433,8 +449,10 @@
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 负数使用红色，正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
}
]
}
@@ -705,13 +723,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;
}

103
src/pages/statistic/accounts/investDealAnalysis/index.vue
View File

@@ -292,9 +292,23 @@
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
// 曲线图配置
const lineChartOpts = ref({
const lineChartOpts = 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: [20, 15, 35, 5],
padding: [20, 15, 60, 15],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
@@ -318,17 +332,19 @@
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
]
}
},
extra: {
line: {
@@ -341,12 +357,40 @@
animation: true
}
}
}
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间，特别是负数方向
const range = maxValue - minValue
if (range > 0) {
// 如果有负数，给底部留出更多空间
if (dataMin < 0) {
minValue = minValue - range * 0.3
maxValue = maxValue + range * 0.1
} else {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -368,17 +412,19 @@
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
]
}
},
extra: {
column: {
@@ -386,12 +432,12 @@
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -404,17 +450,24 @@
}
// 创建副本并反转数组，使时间从前往后排序
const reversedData = [...listData.value].reverse()
// 为每个数据点计算颜色和值
const dataWithColors = reversedData.map(item => {
const value = parseFloat(item.value)
const numValue = isNaN(value) ? 0 : value
return {
value: numValue,
color: numValue < 0 ? '#ef4444' : '#667eea' // 负数红色，正数蓝紫色
}
})
return {
categories: reversedData.map(item => item.time || ''),
series: [
{
name: '收益金额',
data: reversedData.map(item => {
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
data: dataWithColors.map(item => item.value),
pointColor: dataWithColors.map(item => item.color)
}
]
}
@@ -684,13 +737,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;
}

90
src/pages/statistic/accounts/openCardStatics/index.vue
View File

@@ -260,9 +260,23 @@
const { filterPanel, queryParams} = toRefs(data)
// 曲线图配置
const lineChartOpts = ref({
const lineChartOpts = 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: [20, 15, 35, 5],
padding: [20, 15, 60, 15],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
@@ -286,16 +300,19 @@
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
return val.toFixed(0)
},
data: [
{
min: 0
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}
]
},
extra: {
line: {
@@ -308,12 +325,34 @@
animation: true
}
}
}
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间
const range = maxValue - minValue
if (range > 0) {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -335,16 +374,19 @@
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
return val.toFixed(0)
},
data: [
{
min: 0
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}
]
},
extra: {
column: {
@@ -352,12 +394,12 @@
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -379,8 +421,10 @@
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 开卡数量都是正数，统一使用蓝紫色
return '#667eea'
}
}
]
}
@@ -631,13 +675,13 @@ function getList() {
.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;
}

94
src/pages/statistic/accounts/posAnalysis/index.vue
View File

@@ -247,9 +247,23 @@
const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
// 曲线图配置
const lineChartOpts = ref({
const lineChartOpts = 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: [20, 15, 35, 5],
padding: [20, 15, 60, 15],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
@@ -273,19 +287,19 @@
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
line: {
@@ -298,12 +312,34 @@
animation: true
}
}
}
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间
const range = maxValue - minValue
if (range > 0) {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -325,19 +361,19 @@
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
column: {
@@ -345,12 +381,12 @@
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -361,8 +397,14 @@
series: []
}
}
// 创建副本并反转数组，使时间从前往后排序
const reversedData = [...listData.value].reverse()
// 创建副本并反转数组，使时间从前往后排序，过滤掉刷卡金额为0的数据
const reversedData = [...listData.value]
.filter(item => {
const value = parseFloat(item.value)
return !isNaN(value) && value > 0
})
.reverse()
return {
categories: reversedData.map(item => item.time || ''),
series: [
@@ -372,8 +414,10 @@
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 刷卡金额都是正数，统一使用蓝紫色
return '#667eea'
}
}
]
}
@@ -636,13 +680,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;
}

128
src/pages/statistic/accounts/posStatics/index.vue
View File

@@ -41,7 +41,7 @@
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<!-- <div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -60,7 +60,7 @@
<div class="num">{{ debitCardAnalysis.oneMonthAmount }}<span>元</span></div>
</div>
</div>
</div>
</div> -->
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
@@ -81,7 +81,7 @@
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<!-- <div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -100,7 +100,7 @@
<div class="num">{{ debitCardAnalysis.sixMonthAmount }}<span>元</span></div>
</div>
</div>
</div>
</div> -->
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);">
@@ -121,7 +121,7 @@
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<!-- <div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -140,8 +140,8 @@
<div class="num">{{ debitCardAnalysis.twoYearAmount }}<span>元</span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
</div> -->
<!-- <div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -160,7 +160,7 @@
<div class="num">{{ debitCardAnalysis.fiveYearAmount }}<span>元</span></div>
</div>
</div>
</div>
</div> -->
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
@@ -394,9 +394,32 @@ const data = reactive({
const { filterPanel, queryParams} = toRefs(data)
// 曲线图配置
const lineChartOpts = ref({
const lineChartOpts = computed(() => {
// 计算数据范围以动态设置Y轴
let minValue = 0
let maxValue = 0
if (secondListData.value && secondListData.value.length > 0) {
// 过滤掉金额为0的数据后再计算Y轴范围
const filteredValues = secondListData.value
.filter(item => {
const value = parseFloat(item.amount)
return !isNaN(value) && value > 0
})
.map(item => parseFloat(item.amount) || 0)
if (filteredValues.length > 0) {
minValue = Math.min(0, ...filteredValues)
maxValue = Math.max(0, ...filteredValues)
// 给最小值和最大值留出20%的空间
const range = maxValue - minValue
minValue = minValue - range * 0.2
maxValue = maxValue + range * 0.2
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [20, 15, 60, 15],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
@@ -421,19 +444,19 @@ const lineChartOpts = ref({
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
line: {
@@ -446,12 +469,43 @@ const lineChartOpts = ref({
animation: true
}
}
}
})
// 柱状图配置
const columnChartOpts = ref({
const columnChartOpts = computed(() => {
// 计算数据范围以动态设置Y轴
let minValue = 0
let maxValue = 0
if (secondListData.value && secondListData.value.length > 0) {
// 过滤掉金额为0的数据后再计算Y轴范围
const filteredValues = secondListData.value
.filter(item => {
const value = parseFloat(item.amount)
return !isNaN(value) && value > 0
})
.map(item => parseFloat(item.amount) || 0)
if (filteredValues.length > 0) {
const dataMin = Math.min(...filteredValues)
const dataMax = Math.max(...filteredValues)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间
const range = maxValue - minValue
if (range > 0) {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -474,19 +528,19 @@ const columnChartOpts = ref({
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
column: {
@@ -494,12 +548,12 @@ const columnChartOpts = ref({
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据 - 基于 secondListData（近6月刷卡金额统计）
@@ -510,8 +564,14 @@ const chartData = computed(() => {
series: []
}
}
// 创建副本并反转数组，使时间从前往后排序
const reversedData = [...secondListData.value].reverse()
// 创建副本并反转数组，使时间从前往后排序，过滤掉金额为0的数据
const reversedData = [...secondListData.value]
.filter(item => {
const value = parseFloat(item.amount)
return !isNaN(value) && value > 0
})
.reverse()
return {
categories: reversedData.map(item => item.pos || ''),
series: [
@@ -521,8 +581,10 @@ const chartData = computed(() => {
const value = parseFloat(item.amount)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 刷卡金额都是正数，统一使用蓝紫色
return '#667eea'
}
}
]
}
@@ -809,13 +871,13 @@ function settingCancel() {
.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;
}

53
src/pages/statistic/bill/creditBillAnalysis/index.vue
View File

@@ -329,9 +329,30 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间
const range = maxValue - minValue
if (range > 0) {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -353,19 +374,19 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
column: {
@@ -373,12 +394,12 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -400,8 +421,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 负数使用红色，正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
}
]
}
@@ -667,13 +690,13 @@ const start = dayjs(end).add(-11, 'months')
.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;
}

53
src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
View File

@@ -342,9 +342,30 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间
const range = maxValue - minValue
if (range > 0) {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -366,19 +387,19 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
column: {
@@ -386,12 +407,12 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -413,8 +434,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 负数使用红色，正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
}
]
}
@@ -683,13 +706,13 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
.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;
}

53
src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
View File

@@ -299,9 +299,30 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间
const range = maxValue - minValue
if (range > 0) {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -323,19 +344,19 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
column: {
@@ -343,12 +364,12 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -370,8 +391,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 负数使用红色，正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
}
]
}
@@ -636,13 +659,13 @@ const start = dayjs(end).add(-24, 'months')
.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;
}

50
src/pages/statistic/bill/creditRecordAnalysis/index.vue
View File

@@ -342,9 +342,30 @@
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间
const range = maxValue - minValue
if (range > 0) {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -366,16 +387,15 @@
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
column: {
@@ -383,12 +403,12 @@
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -410,8 +430,10 @@
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 负数使用红色，正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
}
]
}
@@ -637,13 +659,13 @@ function searchSubmit() {
.chart-container {
margin: 16rpx 24rpx 24rpx;
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;
}

103
src/pages/statistic/bill/futuresAnalysis/index.vue
View File

@@ -247,9 +247,23 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data)
// 曲线图配置
const lineChartOpts = ref({
const lineChartOpts = 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: [20, 15, 35, 5],
padding: [20, 15, 60, 15],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
@@ -273,17 +287,19 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
]
}
},
extra: {
line: {
@@ -296,12 +312,40 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
animation: true
}
}
}
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间，特别是负数方向
const range = maxValue - minValue
if (range > 0) {
// 如果有负数，给底部留出更多空间
if (dataMin < 0) {
minValue = minValue - range * 0.3
maxValue = maxValue + range * 0.1
} else {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -323,17 +367,19 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
]
}
},
extra: {
column: {
@@ -341,12 +387,12 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -359,17 +405,24 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
}
// 创建副本并反转数组，使时间从前往后排序
const reversedData = [...listData.value].reverse()
// 为每个数据点计算颜色和值
const dataWithColors = reversedData.map(item => {
const value = parseFloat(item.value)
const numValue = isNaN(value) ? 0 : value
return {
value: numValue,
color: numValue < 0 ? '#ef4444' : '#667eea' // 负数红色，正数蓝紫色
}
})
return {
categories: reversedData.map(item => item.time || ''),
series: [
{
name: '收益',
data: reversedData.map(item => {
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
data: dataWithColors.map(item => item.value),
pointColor: dataWithColors.map(item => item.color)
}
]
}
@@ -633,13 +686,13 @@ const start = dayjs(end).add(-12, 'months')
.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;
}

90
src/pages/statistic/bill/investAnalysis/index.vue
View File

@@ -249,9 +249,23 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data)
// 曲线图配置
const lineChartOpts = ref({
const lineChartOpts = 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: [20, 15, 35, 5],
padding: [20, 15, 60, 15],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
@@ -275,17 +289,19 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
]
}
},
extra: {
line: {
@@ -298,12 +314,40 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
animation: true
}
}
}
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间，特别是负数方向
const range = maxValue - minValue
if (range > 0) {
// 如果有负数，给底部留出更多空间
if (dataMin < 0) {
minValue = minValue - range * 0.3
maxValue = maxValue + range * 0.1
} else {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -325,17 +369,19 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
]
}
},
extra: {
column: {
@@ -343,12 +389,12 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -370,8 +416,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 负数使用红色，正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
}
]
}
@@ -634,13 +682,13 @@ const start = dayjs(end).add(-12, 'months')
.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;
}

53
src/pages/statistic/bill/onlineLendAnalysis/index.vue
View File

@@ -343,9 +343,30 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间
const range = maxValue - minValue
if (range > 0) {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -367,19 +388,19 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
column: {
@@ -387,12 +408,12 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -414,8 +435,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 负数使用红色，正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
}
]
}
@@ -683,13 +706,13 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
.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;
}

57
src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
View File

@@ -298,9 +298,30 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间
const range = maxValue - minValue
if (range > 0) {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -322,19 +343,19 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
{
min: 0
}
]
},
extra: {
column: {
@@ -342,12 +363,12 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -369,8 +390,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 负数使用红色，正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
}
]
}
@@ -426,7 +449,7 @@ function searchSubmit() {
let formatValue = 'YYYY-MM'
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
const start = dayjs(end).add(-60, 'months')
const start = dayjs(end).add(-24, 'months')
queryParams.value.startTime = dayjs(start).format(formatValue)
queryParams.value.endTime = dayjs(end).format(formatValue)
queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -443,7 +466,7 @@ function searchSubmit() {
let formatValue = 'YYYY-MM'
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
const start = dayjs(end).add(-60, 'months')
const start = dayjs(end).add(-24, 'months')
queryParams.value.startTime = dayjs(start).format(formatValue)
queryParams.value.endTime = dayjs(end).format(formatValue)
queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -635,13 +658,13 @@ const start = dayjs(end).add(-60, 'months')
.chart-container {
margin: 16rpx 24rpx 24rpx;
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;
}

90
src/pages/statistic/bill/stocksAnalysis/index.vue
View File

@@ -247,9 +247,23 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data)
// 曲线图配置
const lineChartOpts = ref({
const lineChartOpts = 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: [20, 15, 35, 5],
padding: [20, 15, 60, 15],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
@@ -273,17 +287,19 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
]
}
},
extra: {
line: {
@@ -296,12 +312,40 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
animation: true
}
}
}
})
// 柱状图配置
const columnChartOpts = ref({
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)
const dataMin = Math.min(...values)
const dataMax = Math.max(...values)
// 确保包含0轴
minValue = Math.min(0, dataMin)
maxValue = Math.max(0, dataMax)
// 给数据留出更大的上下空间，特别是负数方向
const range = maxValue - minValue
if (range > 0) {
// 如果有负数，给底部留出更多空间
if (dataMin < 0) {
minValue = minValue - range * 0.3
maxValue = maxValue + range * 0.1
} else {
minValue = minValue - range * 0.1
maxValue = maxValue + range * 0.2
}
}
}
return {
color: ['#667eea'],
padding: [20, 15, 35, 5],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
@@ -323,17 +367,19 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
min: minValue,
max: maxValue,
fontSize: 10,
fontColor: '#999999',
showTitle: false,
disabled: false,
format: (val) => {
if (val >= 10000) {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
},
data: [
]
}
},
extra: {
column: {
@@ -341,12 +387,12 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
linearType: 'none',
barBorderCircle: true,
seriesGap: 2
}
}
}
})
// 图表数据
@@ -368,8 +414,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
color: (value) => {
// 负数使用红色，正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
}
]
}
@@ -633,13 +681,13 @@ const start = dayjs(end).add(-12, 'months')
.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;
}