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

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

View File

@@ -348,55 +348,70 @@
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 30, 50, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false minValue = Math.min(0, ...values)
}, maxValue = Math.max(0, ...values)
xAxis: { // 给最小值和最大值留出20%的空间
disableGrid: true, const range = maxValue - minValue
boundaryGap: 'center', minValue = minValue - range * 0.2
axisLine: true, maxValue = maxValue + range * 0.2
axisLineColor: '#CCCCCC', }
scrollShow: true,
itemCount: 5, return {
fontSize: 10, color: ['#667eea'],
fontColor: '#999999', padding: [15, 15, 80, 15],
rotateLabel: true, enableScroll: false,
rotateAngle: 30 dataLabel: false,
}, legend: {
yAxis: { show: false
gridType: 'dash', },
dashLength: 4, xAxis: {
gridColor: '#EEEEEE', disableGrid: true,
splitNumber: 5, boundaryGap: 'center',
fontSize: 10, axisLine: false,
fontColor: '#999999', scrollShow: true,
showXAxisLine: true, itemCount: 5,
format: (val) => { fontSize: 10,
if (val >= 10000) { fontColor: '#999999',
return (val / 10000).toFixed(1) + 'w' 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() 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 { return {
categories: reversedData.map(item => item.time || ''), categories: reversedData.map(item => item.time || ''),
series: [ series: [
@@ -437,12 +434,12 @@
name: '收支金额', name: '收支金额',
data: reversedData.map(item => { data: reversedData.map(item => {
const value = parseFloat(item.value) const value = parseFloat(item.value)
const val = isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
return { }),
value: val, color: (value) => {
color: val < 0 ? '#ef4444' : '#667eea' // 负数使用红色,正数使用蓝紫色
} return value < 0 ? '#ef4444' : '#667eea'
}) }
} }
] ]
} }
@@ -669,13 +666,13 @@ function searchSubmit() {
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -315,46 +315,59 @@
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 50, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.availableLimit) || 0)
show: false minValue = Math.min(0, ...values)
}, maxValue = Math.max(0, ...values)
xAxis: { // 给最小值和最大值留出20%的空间
disabled: true const range = maxValue - minValue
}, minValue = minValue - range * 0.2
yAxis: { maxValue = maxValue + range * 0.2
gridType: 'dash', }
dashLength: 4,
gridColor: '#EEEEEE', return {
splitNumber: 5, color: ['#667eea'],
fontSize: 10, padding: [15, 15, 80, 15],
fontColor: '#999999', enableScroll: false,
format: (val) => { dataLabel: false,
if (val >= 10000) { legend: {
return (val / 10000).toFixed(1) + 'w' show: false
}
return val.toFixed(0)
}, },
data: [ xAxis: {
{ disabled: true
min: 0 },
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) const value = parseFloat(item.availableLimit)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -633,12 +648,12 @@
} }
.chart-container { .chart-container {
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -366,54 +366,70 @@
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 60, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false minValue = Math.min(0, ...values)
}, maxValue = Math.max(0, ...values)
xAxis: { // 给最小值和最大值留出20%的空间
disableGrid: true, const range = maxValue - minValue
boundaryGap: 'center', minValue = minValue - range * 0.2
axisLine: true, maxValue = maxValue + range * 0.2
axisLineColor: '#CCCCCC', }
scrollShow: true,
itemCount: 5, return {
fontSize: 10, color: ['#667eea'],
fontColor: '#999999', padding: [15, 15, 80, 15],
rotateLabel: true, enableScroll: false,
rotateAngle: 30 dataLabel: false,
}, legend: {
yAxis: { show: false
gridType: 'dash', },
dashLength: 4, xAxis: {
gridColor: '#EEEEEE', disableGrid: true,
splitNumber: 5, boundaryGap: 'center',
fontSize: 10, axisLine: false,
fontColor: '#999999', scrollShow: true,
showXAxisLine: true, itemCount: 5,
format: (val) => { fontSize: 10,
if (val >= 10000) { fontColor: '#999999',
return (val / 10000).toFixed(1) + 'w' 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) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -709,12 +727,12 @@ function searchSubmit() {
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 24rpx; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 700rpx; height: 850rpx;
overflow: visible; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -449,54 +449,68 @@
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], const currentData = viewMode.value === 'category' ? secondListData.value : listData.value
padding: [20, 15, 35, 5], // 计算数据范围以动态设置Y轴
enableScroll: false, let minValue = 0
dataLabel: false, let maxValue = 0
legend: { if (currentData && currentData.length > 0) {
show: false const values = currentData.map(item => parseFloat(item.value) || 0)
}, minValue = Math.min(0, ...values)
xAxis: { maxValue = Math.max(0, ...values)
disableGrid: true, // 给最小值和最大值留出20%的空间
boundaryGap: 'center', const range = maxValue - minValue
axisLine: false, minValue = minValue - range * 0.2
scrollShow: true, maxValue = maxValue + range * 0.2
itemCount: 5, }
fontSize: 10,
fontColor: '#999999', return {
rotateLabel: true, color: ['#667eea'],
rotateAngle: 30 padding: [15, 15, 80, 15],
}, enableScroll: false,
yAxis: { dataLabel: false,
gridType: 'dash', legend: {
dashLength: 4, show: false
gridColor: '#EEEEEE',
splitNumber: 5,
fontSize: 10,
fontColor: '#999999',
format: (val) => {
if (val >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 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) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -802,13 +818,13 @@ const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

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

View File

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

View File

@@ -362,54 +362,70 @@
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 60, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false minValue = Math.min(0, ...values)
}, maxValue = Math.max(0, ...values)
xAxis: { // 给最小值和最大值留出20%的空间
disableGrid: true, const range = maxValue - minValue
boundaryGap: 'center', minValue = minValue - range * 0.2
axisLine: true, maxValue = maxValue + range * 0.2
axisLineColor: '#CCCCCC', }
scrollShow: true,
itemCount: 5, return {
fontSize: 10, color: ['#667eea'],
fontColor: '#999999', padding: [15, 15, 80, 15],
rotateLabel: true, enableScroll: false,
rotateAngle: 30 dataLabel: false,
}, legend: {
yAxis: { show: false
gridType: 'dash', },
dashLength: 4, xAxis: {
gridColor: '#EEEEEE', disableGrid: true,
splitNumber: 5, boundaryGap: 'center',
fontSize: 10, axisLine: false,
fontColor: '#999999', scrollShow: true,
showXAxisLine: true, itemCount: 5,
format: (val) => { fontSize: 10,
if (val >= 10000) { fontColor: '#999999',
return (val / 10000).toFixed(1) + 'w' 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
} }
} }
}) })
@@ -433,8 +449,10 @@
const value = parseFloat(item.value) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -705,13 +723,13 @@ function searchSubmit() {
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -292,104 +292,150 @@
const { filterPanel, queryAccountParams, queryParams} = toRefs(data) const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
// 曲线图配置 // 曲线图配置
const lineChartOpts = ref({ const lineChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
enableMarkLine: true, if (listData.value && listData.value.length > 0) {
dataLabel: false, const values = listData.value.map(item => parseFloat(item.value) || 0)
dataPointShape: true, minValue = Math.min(0, ...values)
legend: { maxValue = Math.max(0, ...values)
show: false // 给最小值和最大值留出20%的空间
}, const range = maxValue - minValue
xAxis: { minValue = minValue - range * 0.2
disableGrid: true, maxValue = maxValue + range * 0.2
boundaryGap: 'justify', }
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)
},
data: [
] return {
}, color: ['#667eea'],
extra: { padding: [20, 15, 60, 15],
line: { enableScroll: false,
type: 'curve', enableMarkLine: true,
width: 3, dataLabel: false,
activeType: 'hollow', dataPointShape: true,
linearType: 'custom', legend: {
linearOpacity: 0.2, show: false
onShadow: true, },
animation: true xAxis: {
disableGrid: true,
boundaryGap: 'justify',
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) => {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
}
} }
} }
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
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)
},
data: [
] // 确保包含0轴
}, minValue = Math.min(0, dataMin)
extra: { maxValue = Math.max(0, dataMax)
column: {
type: 'group', // 给数据留出更大的上下空间,特别是负数方向
width: 20, const range = maxValue - minValue
activeBgColor: '#764ba2', if (range > 0) {
activeBgOpacity: 0.08, // 如果有负数,给底部留出更多空间
linearType: 'custom', if (dataMin < 0) {
linearOpacity: 0.6, minValue = minValue - range * 0.3
barBorderCircle: true, maxValue = maxValue + range * 0.1
seriesGap: 2 } else {
minValue = minValue - range * 0.1
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) => {
const absVal = Math.abs(val)
if (absVal >= 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
}
} }
} }
}) })
@@ -404,17 +450,24 @@
} }
// 创建副本并反转数组,使时间从前往后排序 // 创建副本并反转数组,使时间从前往后排序
const reversedData = [...listData.value].reverse() 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 { return {
categories: reversedData.map(item => item.time || ''), categories: reversedData.map(item => item.time || ''),
series: [ series: [
{ {
name: '收益金额', name: '收益金额',
data: reversedData.map(item => { data: dataWithColors.map(item => item.value),
const value = parseFloat(item.value) pointColor: dataWithColors.map(item => item.color)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
} }
] ]
} }
@@ -684,13 +737,13 @@ function searchSubmit() {
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -260,102 +260,144 @@
const { filterPanel, queryParams} = toRefs(data) const { filterPanel, queryParams} = toRefs(data)
// 曲线图配置 // 曲线图配置
const lineChartOpts = ref({ const lineChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
enableMarkLine: true, if (listData.value && listData.value.length > 0) {
dataLabel: false, const values = listData.value.map(item => parseFloat(item.value) || 0)
dataPointShape: true, minValue = Math.min(0, ...values)
legend: { maxValue = Math.max(0, ...values)
show: false // 给最小值和最大值留出20%的空间
}, const range = maxValue - minValue
xAxis: { minValue = minValue - range * 0.2
disableGrid: true, maxValue = maxValue + range * 0.2
boundaryGap: 'justify', }
axisLine: false,
scrollShow: true, return {
itemCount: 5, color: ['#667eea'],
fontSize: 10, padding: [20, 15, 60, 15],
fontColor: '#999999', enableScroll: false,
rotateLabel: true, enableMarkLine: true,
rotateAngle: 30 dataLabel: false,
}, dataPointShape: true,
yAxis: { legend: {
gridType: 'dash', show: false
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
fontSize: 10,
fontColor: '#999999',
format: (val) => {
return val.toFixed(0)
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 boundaryGap: 'justify',
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) => {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
} }
]
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
} }
} }
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
xAxis: {
disableGrid: true, // 确保包含0轴
boundaryGap: 'center', minValue = Math.min(0, dataMin)
axisLine: false, maxValue = Math.max(0, dataMax)
scrollShow: true,
itemCount: 5, // 给数据留出更大的上下空间
fontSize: 10, const range = maxValue - minValue
fontColor: '#999999', if (range > 0) {
rotateLabel: true, minValue = minValue - range * 0.1
rotateAngle: 30 maxValue = maxValue + range * 0.2
}, }
yAxis: { }
gridType: 'dash',
dashLength: 4, return {
gridColor: '#EEEEEE', color: ['#667eea'],
splitNumber: 5, padding: [15, 15, 80, 15],
fontSize: 10, enableScroll: false,
fontColor: '#999999', dataLabel: false,
format: (val) => { legend: {
return val.toFixed(0) show: false
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 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) => {
const absVal = Math.abs(val)
if (absVal >= 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
} }
} }
}) })
@@ -379,8 +421,10 @@
const value = parseFloat(item.value) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 开卡数量都是正数,统一使用蓝紫色
return '#667eea'
}
} }
] ]
} }
@@ -631,13 +675,13 @@ function getList() {
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -247,108 +247,144 @@
const { filterPanel, queryAccountParams, queryParams} = toRefs(data) const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
// 曲线图配置 // 曲线图配置
const lineChartOpts = ref({ const lineChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
enableMarkLine: true, if (listData.value && listData.value.length > 0) {
dataLabel: false, const values = listData.value.map(item => parseFloat(item.value) || 0)
dataPointShape: true, minValue = Math.min(0, ...values)
legend: { maxValue = Math.max(0, ...values)
show: false // 给最小值和最大值留出20%的空间
}, const range = maxValue - minValue
xAxis: { minValue = minValue - range * 0.2
disableGrid: true, maxValue = maxValue + range * 0.2
boundaryGap: 'justify', }
axisLine: false,
scrollShow: true, return {
itemCount: 5, color: ['#667eea'],
fontSize: 10, padding: [20, 15, 60, 15],
fontColor: '#999999', enableScroll: false,
rotateLabel: true, enableMarkLine: true,
rotateAngle: 30 dataLabel: false,
}, dataPointShape: true,
yAxis: { legend: {
gridType: 'dash', show: false
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)
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 boundaryGap: 'justify',
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) => {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
} }
]
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
} }
} }
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
xAxis: {
disableGrid: true, // 确保包含0轴
boundaryGap: 'center', minValue = Math.min(0, dataMin)
axisLine: false, maxValue = Math.max(0, dataMax)
scrollShow: true,
itemCount: 5, // 给数据留出更大的上下空间
fontSize: 10, const range = maxValue - minValue
fontColor: '#999999', if (range > 0) {
rotateLabel: true, minValue = minValue - range * 0.1
rotateAngle: 30 maxValue = maxValue + range * 0.2
}, }
yAxis: { }
gridType: 'dash',
dashLength: 4, return {
gridColor: '#EEEEEE', color: ['#667eea'],
splitNumber: 5, padding: [15, 15, 80, 15],
fontSize: 10, enableScroll: false,
fontColor: '#999999', dataLabel: false,
format: (val) => { legend: {
if (val >= 10000) { show: false
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 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) => {
const absVal = Math.abs(val)
if (absVal >= 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
} }
} }
}) })
@@ -361,8 +397,14 @@
series: [] series: []
} }
} }
// 创建副本并反转数组,使时间从前往后排序 // 创建副本并反转数组,使时间从前往后排序过滤掉刷卡金额为0的数据
const reversedData = [...listData.value].reverse() const reversedData = [...listData.value]
.filter(item => {
const value = parseFloat(item.value)
return !isNaN(value) && value > 0
})
.reverse()
return { return {
categories: reversedData.map(item => item.time || ''), categories: reversedData.map(item => item.time || ''),
series: [ series: [
@@ -372,8 +414,10 @@
const value = parseFloat(item.value) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 刷卡金额都是正数,统一使用蓝紫色
return '#667eea'
}
} }
] ]
} }
@@ -636,13 +680,13 @@ function searchSubmit() {
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -41,7 +41,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="header-con" ref="searchHeightRef"> <!-- <div class="header-con" ref="searchHeightRef">
<div class="item"> <div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);"> <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons> <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -60,7 +60,7 @@
<div class="num">{{ debitCardAnalysis.oneMonthAmount }}<span></span></div> <div class="num">{{ debitCardAnalysis.oneMonthAmount }}<span></span></div>
</div> </div>
</div> </div>
</div> </div> -->
<div class="header-con" ref="searchHeightRef"> <div class="header-con" ref="searchHeightRef">
<div class="item"> <div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);"> <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
@@ -81,7 +81,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="header-con" ref="searchHeightRef"> <!-- <div class="header-con" ref="searchHeightRef">
<div class="item"> <div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);"> <view class="item-icon" style="background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons> <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -100,7 +100,7 @@
<div class="num">{{ debitCardAnalysis.sixMonthAmount }}<span></span></div> <div class="num">{{ debitCardAnalysis.sixMonthAmount }}<span></span></div>
</div> </div>
</div> </div>
</div> </div> -->
<div class="header-con" ref="searchHeightRef"> <div class="header-con" ref="searchHeightRef">
<div class="item"> <div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);"> <view class="item-icon" style="background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);">
@@ -121,7 +121,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="header-con" ref="searchHeightRef"> <!-- <div class="header-con" ref="searchHeightRef">
<div class="item"> <div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);"> <view class="item-icon" style="background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons> <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -140,8 +140,8 @@
<div class="num">{{ debitCardAnalysis.twoYearAmount }}<span></span></div> <div class="num">{{ debitCardAnalysis.twoYearAmount }}<span></span></div>
</div> </div>
</div> </div>
</div> </div> -->
<div class="header-con" ref="searchHeightRef"> <!-- <div class="header-con" ref="searchHeightRef">
<div class="item"> <div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%);"> <view class="item-icon" style="background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons> <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
@@ -160,7 +160,7 @@
<div class="num">{{ debitCardAnalysis.fiveYearAmount }}<span></span></div> <div class="num">{{ debitCardAnalysis.fiveYearAmount }}<span></span></div>
</div> </div>
</div> </div>
</div> </div> -->
<div class="header-con" ref="searchHeightRef"> <div class="header-con" ref="searchHeightRef">
<div class="item"> <div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);"> <view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
@@ -394,110 +394,164 @@ const data = reactive({
const { filterPanel, queryParams} = toRefs(data) const { filterPanel, queryParams} = toRefs(data)
// 曲线图配置 // 曲线图配置
const lineChartOpts = ref({ const lineChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
enableMarkLine: true, if (secondListData.value && secondListData.value.length > 0) {
dataLabel: false, // 过滤掉金额为0的数据后再计算Y轴范围
dataPointShape: true, const filteredValues = secondListData.value
legend: { .filter(item => {
show: false const value = parseFloat(item.amount)
}, return !isNaN(value) && value > 0
xAxis: { })
disableGrid: true, .map(item => parseFloat(item.amount) || 0)
boundaryGap: 'justify',
axisLine: false, if (filteredValues.length > 0) {
scrollShow: true, minValue = Math.min(0, ...filteredValues)
itemCount: 5, maxValue = Math.max(0, ...filteredValues)
disabled: true, // 给最小值和最大值留出20%的空间
fontSize: 0, const range = maxValue - minValue
fontColor: '#999999', minValue = minValue - range * 0.2
rotateLabel: true, maxValue = maxValue + range * 0.2
rotateAngle: 30 }
}, }
yAxis: {
gridType: 'dash', return {
dashLength: 4, color: ['#667eea'],
gridColor: '#EEEEEE', padding: [20, 15, 60, 15],
splitNumber: 5, enableScroll: false,
fontSize: 10, enableMarkLine: true,
fontColor: '#999999', dataLabel: false,
format: (val) => { dataPointShape: true,
if (val >= 10000) { legend: {
return (val / 10000).toFixed(1) + 'w' show: false
}
return val.toFixed(0)
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 boundaryGap: 'justify',
axisLine: false,
scrollShow: true,
itemCount: 5,
disabled: true,
fontSize: 0,
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) => {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
} }
]
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
} }
} }
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (secondListData.value && secondListData.value.length > 0) {
legend: { // 过滤掉金额为0的数据后再计算Y轴范围
show: false const filteredValues = secondListData.value
}, .filter(item => {
xAxis: { const value = parseFloat(item.amount)
disableGrid: true, return !isNaN(value) && value > 0
boundaryGap: 'center', })
axisLine: false, .map(item => parseFloat(item.amount) || 0)
scrollShow: true,
itemCount: 5, if (filteredValues.length > 0) {
disabled: true, const dataMin = Math.min(...filteredValues)
fontSize: 0, const dataMax = Math.max(...filteredValues)
fontColor: '#999999',
rotateLabel: true, // 确保包含0轴
rotateAngle: 30 minValue = Math.min(0, dataMin)
}, maxValue = Math.max(0, dataMax)
yAxis: {
gridType: 'dash', // 给数据留出更大的上下空间
dashLength: 4, const range = maxValue - minValue
gridColor: '#EEEEEE', if (range > 0) {
splitNumber: 5, minValue = minValue - range * 0.1
fontSize: 10, maxValue = maxValue + range * 0.2
fontColor: '#999999',
format: (val) => {
if (val >= 10000) {
return (val / 10000).toFixed(1) + 'w'
} }
return val.toFixed(0) }
}
return {
color: ['#667eea'],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
show: false
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 boundaryGap: 'center',
axisLine: false,
scrollShow: true,
itemCount: 5,
disabled: true,
fontSize: 0,
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) => {
const absVal = Math.abs(val)
if (absVal >= 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
} }
} }
}) })
@@ -510,8 +564,14 @@ const chartData = computed(() => {
series: [] series: []
} }
} }
// 创建副本并反转数组,使时间从前往后排序 // 创建副本并反转数组,使时间从前往后排序过滤掉金额为0的数据
const reversedData = [...secondListData.value].reverse() const reversedData = [...secondListData.value]
.filter(item => {
const value = parseFloat(item.amount)
return !isNaN(value) && value > 0
})
.reverse()
return { return {
categories: reversedData.map(item => item.pos || ''), categories: reversedData.map(item => item.pos || ''),
series: [ series: [
@@ -521,8 +581,10 @@ const chartData = computed(() => {
const value = parseFloat(item.amount) const value = parseFloat(item.amount)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 刷卡金额都是正数,统一使用蓝紫色
return '#667eea'
}
} }
] ]
} }
@@ -809,13 +871,13 @@ function settingCancel() {
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -329,54 +329,75 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
xAxis: {
disableGrid: true, // 确保包含0轴
boundaryGap: 'center', minValue = Math.min(0, dataMin)
axisLine: false, maxValue = Math.max(0, dataMax)
scrollShow: true,
itemCount: 5, // 给数据留出更大的上下空间
fontSize: 10, const range = maxValue - minValue
fontColor: '#999999', if (range > 0) {
rotateLabel: true, minValue = minValue - range * 0.1
rotateAngle: 30 maxValue = maxValue + range * 0.2
}, }
yAxis: { }
gridType: 'dash',
dashLength: 4, return {
gridColor: '#EEEEEE', color: ['#667eea'],
splitNumber: 5, padding: [15, 15, 80, 15],
fontSize: 10, enableScroll: false,
fontColor: '#999999', dataLabel: false,
format: (val) => { legend: {
if (val >= 10000) { show: false
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 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) => {
const absVal = Math.abs(val)
if (absVal >= 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
} }
} }
}) })
@@ -400,8 +421,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -667,13 +690,13 @@ const start = dayjs(end).add(-11, 'months')
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -342,54 +342,75 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
xAxis: {
disableGrid: true, // 确保包含0轴
boundaryGap: 'center', minValue = Math.min(0, dataMin)
axisLine: false, maxValue = Math.max(0, dataMax)
scrollShow: true,
itemCount: 5, // 给数据留出更大的上下空间
fontSize: 10, const range = maxValue - minValue
fontColor: '#999999', if (range > 0) {
rotateLabel: true, minValue = minValue - range * 0.1
rotateAngle: 30 maxValue = maxValue + range * 0.2
}, }
yAxis: { }
gridType: 'dash',
dashLength: 4, return {
gridColor: '#EEEEEE', color: ['#667eea'],
splitNumber: 5, padding: [15, 15, 80, 15],
fontSize: 10, enableScroll: false,
fontColor: '#999999', dataLabel: false,
format: (val) => { legend: {
if (val >= 10000) { show: false
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 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) => {
const absVal = Math.abs(val)
if (absVal >= 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
} }
} }
}) })
@@ -413,8 +434,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -683,13 +706,13 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -299,54 +299,75 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
xAxis: {
disableGrid: true, // 确保包含0轴
boundaryGap: 'center', minValue = Math.min(0, dataMin)
axisLine: false, maxValue = Math.max(0, dataMax)
scrollShow: true,
itemCount: 5, // 给数据留出更大的上下空间
fontSize: 10, const range = maxValue - minValue
fontColor: '#999999', if (range > 0) {
rotateLabel: true, minValue = minValue - range * 0.1
rotateAngle: 30 maxValue = maxValue + range * 0.2
}, }
yAxis: { }
gridType: 'dash',
dashLength: 4, return {
gridColor: '#EEEEEE', color: ['#667eea'],
splitNumber: 5, padding: [15, 15, 80, 15],
fontSize: 10, enableScroll: false,
fontColor: '#999999', dataLabel: false,
format: (val) => { legend: {
if (val >= 10000) { show: false
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 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) => {
const absVal = Math.abs(val)
if (absVal >= 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
} }
} }
}) })
@@ -370,8 +391,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -636,13 +659,13 @@ const start = dayjs(end).add(-24, 'months')
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -342,51 +342,71 @@
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
xAxis: {
disableGrid: true, // 确保包含0轴
boundaryGap: 'center', minValue = Math.min(0, dataMin)
axisLine: false, maxValue = Math.max(0, dataMax)
scrollShow: true,
itemCount: 5, // 给数据留出更大的上下空间
fontSize: 10, const range = maxValue - minValue
fontColor: '#999999', if (range > 0) {
rotateLabel: true, minValue = minValue - range * 0.1
rotateAngle: 30 maxValue = maxValue + range * 0.2
}, }
yAxis: { }
gridType: 'dash',
dashLength: 4, return {
gridColor: '#EEEEEE', color: ['#667eea'],
splitNumber: 5, padding: [15, 15, 80, 15],
fontSize: 10, enableScroll: false,
fontColor: '#999999', dataLabel: false,
format: (val) => { legend: {
return val.toFixed(0) show: false
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 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) => {
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
} }
} }
}) })
@@ -410,8 +430,10 @@
const value = parseFloat(item.value) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -637,13 +659,13 @@ function searchSubmit() {
.chart-container { .chart-container {
margin: 16rpx 24rpx 24rpx; margin: 16rpx 24rpx 24rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -247,104 +247,150 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data) const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data)
// 曲线图配置 // 曲线图配置
const lineChartOpts = ref({ const lineChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
enableMarkLine: true, if (listData.value && listData.value.length > 0) {
dataLabel: false, const values = listData.value.map(item => parseFloat(item.value) || 0)
dataPointShape: true, minValue = Math.min(0, ...values)
legend: { maxValue = Math.max(0, ...values)
show: false // 给最小值和最大值留出20%的空间
}, const range = maxValue - minValue
xAxis: { minValue = minValue - range * 0.2
disableGrid: true, maxValue = maxValue + range * 0.2
boundaryGap: 'justify', }
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)
},
data: [
] return {
}, color: ['#667eea'],
extra: { padding: [20, 15, 60, 15],
line: { enableScroll: false,
type: 'curve', enableMarkLine: true,
width: 3, dataLabel: false,
activeType: 'hollow', dataPointShape: true,
linearType: 'custom', legend: {
linearOpacity: 0.2, show: false
onShadow: true, },
animation: true xAxis: {
disableGrid: true,
boundaryGap: 'justify',
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) => {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
}
} }
} }
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
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)
},
data: [
] // 确保包含0轴
}, minValue = Math.min(0, dataMin)
extra: { maxValue = Math.max(0, dataMax)
column: {
type: 'group', // 给数据留出更大的上下空间,特别是负数方向
width: 20, const range = maxValue - minValue
activeBgColor: '#764ba2', if (range > 0) {
activeBgOpacity: 0.08, // 如果有负数,给底部留出更多空间
linearType: 'custom', if (dataMin < 0) {
linearOpacity: 0.6, minValue = minValue - range * 0.3
barBorderCircle: true, maxValue = maxValue + range * 0.1
seriesGap: 2 } else {
minValue = minValue - range * 0.1
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) => {
const absVal = Math.abs(val)
if (absVal >= 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
}
} }
} }
}) })
@@ -359,17 +405,24 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
} }
// 创建副本并反转数组,使时间从前往后排序 // 创建副本并反转数组,使时间从前往后排序
const reversedData = [...listData.value].reverse() 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 { return {
categories: reversedData.map(item => item.time || ''), categories: reversedData.map(item => item.time || ''),
series: [ series: [
{ {
name: '收益', name: '收益',
data: reversedData.map(item => { data: dataWithColors.map(item => item.value),
const value = parseFloat(item.value) pointColor: dataWithColors.map(item => item.color)
return isNaN(value) ? 0 : value
}),
linearIndex: 0,
color: '#667eea'
} }
] ]
} }
@@ -633,13 +686,13 @@ const start = dayjs(end).add(-12, 'months')
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -249,104 +249,150 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data) const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data)
// 曲线图配置 // 曲线图配置
const lineChartOpts = ref({ const lineChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
enableMarkLine: true, if (listData.value && listData.value.length > 0) {
dataLabel: false, const values = listData.value.map(item => parseFloat(item.value) || 0)
dataPointShape: true, minValue = Math.min(0, ...values)
legend: { maxValue = Math.max(0, ...values)
show: false // 给最小值和最大值留出20%的空间
}, const range = maxValue - minValue
xAxis: { minValue = minValue - range * 0.2
disableGrid: true, maxValue = maxValue + range * 0.2
boundaryGap: 'justify', }
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)
},
data: [
] return {
}, color: ['#667eea'],
extra: { padding: [20, 15, 60, 15],
line: { enableScroll: false,
type: 'curve', enableMarkLine: true,
width: 3, dataLabel: false,
activeType: 'hollow', dataPointShape: true,
linearType: 'custom', legend: {
linearOpacity: 0.2, show: false
onShadow: true, },
animation: true xAxis: {
disableGrid: true,
boundaryGap: 'justify',
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) => {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
}
} }
} }
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
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)
},
data: [
] // 确保包含0轴
}, minValue = Math.min(0, dataMin)
extra: { maxValue = Math.max(0, dataMax)
column: {
type: 'group', // 给数据留出更大的上下空间,特别是负数方向
width: 20, const range = maxValue - minValue
activeBgColor: '#764ba2', if (range > 0) {
activeBgOpacity: 0.08, // 如果有负数,给底部留出更多空间
linearType: 'custom', if (dataMin < 0) {
linearOpacity: 0.6, minValue = minValue - range * 0.3
barBorderCircle: true, maxValue = maxValue + range * 0.1
seriesGap: 2 } else {
minValue = minValue - range * 0.1
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) => {
const absVal = Math.abs(val)
if (absVal >= 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
}
} }
} }
}) })
@@ -370,8 +416,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -634,13 +682,13 @@ const start = dayjs(end).add(-12, 'months')
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -343,54 +343,75 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
xAxis: {
disableGrid: true, // 确保包含0轴
boundaryGap: 'center', minValue = Math.min(0, dataMin)
axisLine: false, maxValue = Math.max(0, dataMax)
scrollShow: true,
itemCount: 5, // 给数据留出更大的上下空间
fontSize: 10, const range = maxValue - minValue
fontColor: '#999999', if (range > 0) {
rotateLabel: true, minValue = minValue - range * 0.1
rotateAngle: 30 maxValue = maxValue + range * 0.2
}, }
yAxis: { }
gridType: 'dash',
dashLength: 4, return {
gridColor: '#EEEEEE', color: ['#667eea'],
splitNumber: 5, padding: [15, 15, 80, 15],
fontSize: 10, enableScroll: false,
fontColor: '#999999', dataLabel: false,
format: (val) => { legend: {
if (val >= 10000) { show: false
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 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) => {
const absVal = Math.abs(val)
if (absVal >= 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
} }
} }
}) })
@@ -414,8 +435,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -683,13 +706,13 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -298,54 +298,75 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
xAxis: {
disableGrid: true, // 确保包含0轴
boundaryGap: 'center', minValue = Math.min(0, dataMin)
axisLine: false, maxValue = Math.max(0, dataMax)
scrollShow: true,
itemCount: 5, // 给数据留出更大的上下空间
fontSize: 10, const range = maxValue - minValue
fontColor: '#999999', if (range > 0) {
rotateLabel: true, minValue = minValue - range * 0.1
rotateAngle: 30 maxValue = maxValue + range * 0.2
}, }
yAxis: { }
gridType: 'dash',
dashLength: 4, return {
gridColor: '#EEEEEE', color: ['#667eea'],
splitNumber: 5, padding: [15, 15, 80, 15],
fontSize: 10, enableScroll: false,
fontColor: '#999999', dataLabel: false,
format: (val) => { legend: {
if (val >= 10000) { show: false
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}, },
data: [ xAxis: {
{ disableGrid: true,
min: 0 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) => {
const absVal = Math.abs(val)
if (absVal >= 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
} }
} }
}) })
@@ -369,8 +390,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -426,7 +449,7 @@ function searchSubmit() {
let formatValue = 'YYYY-MM' let formatValue = 'YYYY-MM'
const today = new Date() const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) 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.startTime = dayjs(start).format(formatValue)
queryParams.value.endTime = dayjs(end).format(formatValue) queryParams.value.endTime = dayjs(end).format(formatValue)
queryParams.value.time = dayjs(start).format(formatValue)+'-'+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' let formatValue = 'YYYY-MM'
const today = new Date() const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) 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.startTime = dayjs(start).format(formatValue)
queryParams.value.endTime = dayjs(end).format(formatValue) queryParams.value.endTime = dayjs(end).format(formatValue)
queryParams.value.time = dayjs(start).format(formatValue)+'-'+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 { .chart-container {
margin: 16rpx 24rpx 24rpx; margin: 16rpx 24rpx 24rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }

View File

@@ -247,104 +247,150 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data) const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data)
// 曲线图配置 // 曲线图配置
const lineChartOpts = ref({ const lineChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
enableMarkLine: true, if (listData.value && listData.value.length > 0) {
dataLabel: false, const values = listData.value.map(item => parseFloat(item.value) || 0)
dataPointShape: true, minValue = Math.min(0, ...values)
legend: { maxValue = Math.max(0, ...values)
show: false // 给最小值和最大值留出20%的空间
}, const range = maxValue - minValue
xAxis: { minValue = minValue - range * 0.2
disableGrid: true, maxValue = maxValue + range * 0.2
boundaryGap: 'justify', }
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)
},
data: [
] return {
}, color: ['#667eea'],
extra: { padding: [20, 15, 60, 15],
line: { enableScroll: false,
type: 'curve', enableMarkLine: true,
width: 3, dataLabel: false,
activeType: 'hollow', dataPointShape: true,
linearType: 'custom', legend: {
linearOpacity: 0.2, show: false
onShadow: true, },
animation: true xAxis: {
disableGrid: true,
boundaryGap: 'justify',
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) => {
const absVal = Math.abs(val)
if (absVal >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
}
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
onShadow: true,
animation: true
}
} }
} }
}) })
// 柱状图配置 // 柱状图配置
const columnChartOpts = ref({ const columnChartOpts = computed(() => {
color: ['#667eea'], // 计算数据范围以动态设置Y轴
padding: [20, 15, 35, 5], let minValue = 0
enableScroll: false, let maxValue = 0
dataLabel: false, if (listData.value && listData.value.length > 0) {
legend: { const values = listData.value.map(item => parseFloat(item.value) || 0)
show: false const dataMin = Math.min(...values)
}, const dataMax = Math.max(...values)
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)
},
data: [
] // 确保包含0轴
}, minValue = Math.min(0, dataMin)
extra: { maxValue = Math.max(0, dataMax)
column: {
type: 'group', // 给数据留出更大的上下空间,特别是负数方向
width: 20, const range = maxValue - minValue
activeBgColor: '#764ba2', if (range > 0) {
activeBgOpacity: 0.08, // 如果有负数,给底部留出更多空间
linearType: 'custom', if (dataMin < 0) {
linearOpacity: 0.6, minValue = minValue - range * 0.3
barBorderCircle: true, maxValue = maxValue + range * 0.1
seriesGap: 2 } else {
minValue = minValue - range * 0.1
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) => {
const absVal = Math.abs(val)
if (absVal >= 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
}
} }
} }
}) })
@@ -368,8 +414,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const value = parseFloat(item.value) const value = parseFloat(item.value)
return isNaN(value) ? 0 : value return isNaN(value) ? 0 : value
}), }),
linearIndex: 0, color: (value) => {
color: '#667eea' // 负数使用红色,正数使用蓝紫色
return value < 0 ? '#ef4444' : '#667eea'
}
} }
] ]
} }
@@ -633,13 +681,13 @@ const start = dayjs(end).add(-12, 'months')
.chart-container { .chart-container {
margin: 16rpx 24rpx 160rpx; margin: 16rpx 24rpx 160rpx;
padding: 16rpx 16rpx 0; padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%); background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx); width: calc(100% - 48rpx);
height: 600rpx; height: 850rpx;
overflow: hidden; overflow: visible;
position: relative; position: relative;
} }