fix: 改用原生 canvas 绘制收益曲线，移除 qiun-data-charts 依赖
- 微信小程序对 qiun-data-charts 兼容性差 - 原生 canvas 更轻量、更可靠 - 实现平滑曲线 + 渐变填充 + 网格线 - Y轴自适应数据范围
This commit is contained in:
parent
632b5b6f6d
commit
97149ca59e
@ -81,13 +81,11 @@
|
||||
|
||||
<!-- 收益曲线 -->
|
||||
<view v-else class="nav-chart-wrapper">
|
||||
<qiun-data-charts
|
||||
type="line"
|
||||
:opts="chartOpts"
|
||||
:chartData="chartData"
|
||||
:canvas2d="true"
|
||||
canvasId="navChartCanvas"
|
||||
/>
|
||||
<canvas
|
||||
canvas-id="navChart"
|
||||
id="navChart"
|
||||
class="nav-canvas"
|
||||
></canvas>
|
||||
</view>
|
||||
|
||||
<!-- 统计指标 -->
|
||||
@ -434,7 +432,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, getCurrentInstance, computed } from 'vue';
|
||||
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
|
||||
import { api } from '../../utils/api';
|
||||
|
||||
// 获取 u-toast 实例
|
||||
@ -483,51 +481,95 @@ const navPeriod = ref('30d');
|
||||
const navHistory = ref([]);
|
||||
const navStatistics = ref(null);
|
||||
|
||||
// 图表数据
|
||||
const chartData = computed(() => {
|
||||
if (!navHistory.value || navHistory.value.length === 0) {
|
||||
return { categories: [], series: [] };
|
||||
}
|
||||
// 绘制收益曲线
|
||||
const drawNavChart = () => {
|
||||
const data = navHistory.value;
|
||||
if (!data || data.length === 0) return;
|
||||
|
||||
return {
|
||||
categories: navHistory.value.map(item => item.date.split('-').slice(1).join('/')),
|
||||
series: [{
|
||||
name: '净值',
|
||||
data: navHistory.value.map(item => item.nav)
|
||||
}]
|
||||
};
|
||||
});
|
||||
nextTick(() => {
|
||||
const ctx = uni.createCanvasContext('navChart');
|
||||
|
||||
// 图表配置
|
||||
const chartOpts = ref({
|
||||
color: ['#064E3B'],
|
||||
padding: [15, 15, 0, 15],
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
axisLine: false,
|
||||
fontSize: 10,
|
||||
fontColor: '#6B7280'
|
||||
},
|
||||
yAxis: {
|
||||
data: [{ min: 0 }],
|
||||
gridColor: '#E5E7EB',
|
||||
gridType: 'dash',
|
||||
dashLength: 4,
|
||||
fontSize: 10,
|
||||
fontColor: '#6B7280'
|
||||
},
|
||||
extra: {
|
||||
line: {
|
||||
type: 'curve',
|
||||
width: 2,
|
||||
activeType: 'hollow'
|
||||
// 画布尺寸 (rpx -> px)
|
||||
const width = 320;
|
||||
const height = 200;
|
||||
const padding = { top: 20, right: 20, bottom: 30, left: 45 };
|
||||
const chartWidth = width - padding.left - padding.right;
|
||||
const chartHeight = height - padding.top - padding.bottom;
|
||||
|
||||
// 数据范围
|
||||
const values = data.map(item => item.nav);
|
||||
const minVal = Math.min(...values) * 0.98;
|
||||
const maxVal = Math.max(...values) * 1.02;
|
||||
const range = maxVal - minVal || 1;
|
||||
|
||||
// 清空画布
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// 绘制网格线
|
||||
ctx.setStrokeStyle('#E5E7EB');
|
||||
ctx.setLineWidth(0.5);
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const y = padding.top + (chartHeight / 4) * i;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding.left, y);
|
||||
ctx.lineTo(width - padding.right, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Y轴标签
|
||||
ctx.setFillStyle('#9CA3AF');
|
||||
ctx.setFontSize(10);
|
||||
ctx.setTextAlign('right');
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const y = padding.top + (chartHeight / 4) * i;
|
||||
const val = maxVal - (range / 4) * i;
|
||||
ctx.fillText(val.toFixed(2), padding.left - 5, y + 3);
|
||||
}
|
||||
|
||||
// 计算点坐标
|
||||
const points = data.map((item, index) => ({
|
||||
x: padding.left + (chartWidth / (data.length - 1 || 1)) * index,
|
||||
y: padding.top + chartHeight - ((item.nav - minVal) / range) * chartHeight
|
||||
}));
|
||||
|
||||
// 绘制填充区域
|
||||
ctx.beginPath();
|
||||
points.forEach((p, i) => {
|
||||
if (i === 0) ctx.moveTo(p.x, p.y);
|
||||
else ctx.lineTo(p.x, p.y);
|
||||
});
|
||||
ctx.lineTo(points[points.length - 1].x, padding.top + chartHeight);
|
||||
ctx.lineTo(points[0].x, padding.top + chartHeight);
|
||||
ctx.closePath();
|
||||
ctx.setFillStyle('rgba(6, 78, 59, 0.15)');
|
||||
ctx.fill();
|
||||
|
||||
// 绘制曲线
|
||||
ctx.beginPath();
|
||||
ctx.setStrokeStyle('#064E3B');
|
||||
ctx.setLineWidth(2);
|
||||
points.forEach((p, i) => {
|
||||
if (i === 0) ctx.moveTo(p.x, p.y);
|
||||
else ctx.lineTo(p.x, p.y);
|
||||
});
|
||||
ctx.stroke();
|
||||
|
||||
// X轴日期标签
|
||||
ctx.setFillStyle('#9CA3AF');
|
||||
ctx.setFontSize(10);
|
||||
ctx.setTextAlign('center');
|
||||
const labelCount = Math.min(5, data.length);
|
||||
const step = Math.floor(data.length / labelCount) || 1;
|
||||
for (let i = 0; i < labelCount; i++) {
|
||||
const idx = Math.min(i * step, data.length - 1);
|
||||
const x = padding.left + (chartWidth / (data.length - 1 || 1)) * idx;
|
||||
const dateStr = data[idx].date.split('-').slice(1).join('/');
|
||||
ctx.fillText(dateStr, x, height - 8);
|
||||
}
|
||||
|
||||
ctx.draw();
|
||||
});
|
||||
};
|
||||
|
||||
// 交易表单
|
||||
const showTransactionForm = ref(false);
|
||||
@ -697,6 +739,11 @@ const fetchNavHistory = async () => {
|
||||
if (response.code === 200 && response.data) {
|
||||
navHistory.value = response.data.navHistory || [];
|
||||
navStatistics.value = response.data.statistics || null;
|
||||
|
||||
// 数据加载后绘制图表
|
||||
if (navHistory.value.length > 0) {
|
||||
drawNavChart();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取净值历史失败:', error);
|
||||
@ -1291,6 +1338,14 @@ const deletePortfolio = async () => {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-canvas {
|
||||
width: 640rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.period-tabs {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user