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

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

@@ -247,104 +247,150 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
const { filterPanel, queryFutureStocksListParams, queryParams} = toRefs(data)
// 曲线图配置
const lineChartOpts = ref({
color: ['#667eea'],
padding: [20, 15, 35, 5],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
dataPointShape: true,
legend: {
show: false
},
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,
fontSize: 10,
fontColor: '#999999',
format: (val) => {
if (val >= 10000) {
return (val / 10000).toFixed(1) + 'w'
}
return val.toFixed(0)
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, 60, 15],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
dataPointShape: true,
legend: {
show: false
},
data: [
]
},
extra: {
line: {
type: 'curve',
width: 3,
activeType: 'hollow',
linearType: 'custom',
linearOpacity: 0.2,
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({
color: ['#667eea'],
padding: [20, 15, 35, 5],
enableScroll: false,
dataLabel: false,
legend: {
show: false
},
xAxis: {
disableGrid: true,
boundaryGap: 'center',
axisLine: false,
scrollShow: true,
itemCount: 5,
fontSize: 10,
fontColor: '#999999',
rotateLabel: true,
rotateAngle: 30
},
yAxis: {
gridType: 'dash',
dashLength: 4,
gridColor: '#EEEEEE',
splitNumber: 5,
fontSize: 10,
fontColor: '#999999',
format: (val) => {
if (val >= 10000) {
return (val / 10000).toFixed(1) + 'w'
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 val.toFixed(0)
}
}
return {
color: ['#667eea'],
padding: [15, 15, 80, 15],
enableScroll: false,
dataLabel: false,
legend: {
show: false
},
data: [
]
},
extra: {
column: {
type: 'group',
width: 20,
activeBgColor: '#764ba2',
activeBgOpacity: 0.08,
linearType: 'custom',
linearOpacity: 0.6,
barBorderCircle: true,
seriesGap: 2
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)
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;
}