fix: ucharts 组件引入错误,改用 JS API 方式

- @qiun/ucharts 不包含 Vue 组件
- 改用 uCharts JS 构造函数直接绘制
- 使用 uni.createCanvasContext 创建画布
- 添加 drawChart 方法在数据加载后绘制
This commit is contained in:
claw_bot 2026-03-15 07:02:14 +00:00
parent cf699c9980
commit 4106fc78c7

View File

@ -81,13 +81,12 @@
<!-- 收益曲线 --> <!-- 收益曲线 -->
<view v-else class="nav-chart-wrapper"> <view v-else class="nav-chart-wrapper">
<qiun-ucharts <canvas
type="line" canvas-id="navChartCanvas"
:opts="chartOpts" id="navChartCanvas"
:chartData="chartData" class="nav-canvas"
:canvas2d="true" type="2d"
canvasId="navChartCanvas" ></canvas>
/>
</view> </view>
<!-- 统计指标 --> <!-- 统计指标 -->
@ -434,9 +433,11 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, getCurrentInstance, computed } from 'vue'; import { ref, onMounted, getCurrentInstance, computed, nextTick } from 'vue';
import { api } from '../../utils/api'; import { api } from '../../utils/api';
import qiunUcharts from '@qiun/ucharts/components/qiun-ucharts/qiun-ucharts.vue'; import uCharts from '@qiun/ucharts/u-charts.js';
let chartInstance = null;
// u-toast // u-toast
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
@ -484,55 +485,59 @@ const navPeriod = ref('30d');
const navHistory = ref([]); const navHistory = ref([]);
const navStatistics = ref(null); const navStatistics = ref(null);
// //
const chartData = computed(() => { const drawChart = () => {
if (!navHistory.value || navHistory.value.length === 0) { if (!navHistory.value || navHistory.value.length === 0) return;
return { categories: [], series: [] };
}
return { nextTick(() => {
categories: navHistory.value.map(item => item.date.split('-').slice(1).join('/')), const data = navHistory.value;
series: [{
name: '净值',
data: navHistory.value.map(item => item.nav)
}]
};
});
// const chartData = {
const chartOpts = { categories: data.map(item => item.date.split('-').slice(1).join('/')),
color: ['#064E3B'], series: [{
padding: [15, 15, 0, 15], name: '净值',
enableScroll: false, data: data.map(item => item.nav)
legend: { }]
show: false };
},
xAxis: { chartInstance = new uCharts({
disableGrid: true, type: 'line',
axisLine: false, canvas: uni.createCanvasContext('navChartCanvas'),
fontSize: 10, width: uni.upx2px(640),
fontColor: '#6B7280' height: uni.upx2px(400),
}, pixelRatio: 1,
yAxis: { categories: chartData.categories,
data: [{ min: 0 }], series: chartData.series,
gridColor: '#E5E7EB', animation: true,
gridType: 'dash', color: ['#064E3B'],
dashLength: 4, padding: [15, 15, 0, 15],
fontSize: 10, enableScroll: false,
fontColor: '#6B7280' legend: {
}, show: false
extra: { },
line: { xAxis: {
type: 'curve', disableGrid: true,
width: 2, axisLine: false,
activeType: 'hollow' fontSize: 10,
}, fontColor: '#6B7280'
area: { },
type: 'curve', yAxis: {
opacity: 0.3, data: [{ min: 0 }],
addLine: true gridColor: '#E5E7EB',
} gridType: 'dash',
} dashLength: 4,
fontSize: 10,
fontColor: '#6B7280'
},
extra: {
line: {
type: 'curve',
width: 2,
activeType: 'hollow'
}
}
});
});
}; };
// //
@ -703,6 +708,11 @@ const fetchNavHistory = async () => {
if (response.code === 200 && response.data) { if (response.code === 200 && response.data) {
navHistory.value = response.data.navHistory || []; navHistory.value = response.data.navHistory || [];
navStatistics.value = response.data.statistics || null; navStatistics.value = response.data.statistics || null;
//
if (navHistory.value.length > 0) {
drawChart();
}
} }
} catch (error) { } catch (error) {
console.error('获取净值历史失败:', error); console.error('获取净值历史失败:', error);
@ -1299,6 +1309,11 @@ const deletePortfolio = async () => {
height: 400rpx; height: 400rpx;
} }
.nav-canvas {
width: 640rpx;
height: 400rpx;
}
.period-tabs { .period-tabs {
display: flex; display: flex;
gap: 16rpx; gap: 16rpx;