refactor: 改用 uni_modules 方式引入 qiun-data-charts

- 移除 npm @qiun/ucharts 依赖
- 改用 qiun-data-charts 组件(需从插件市场安装)
- 恢复 computed chartData 和 ref chartOpts 配置
This commit is contained in:
claw_bot 2026-03-15 07:07:36 +00:00
parent 4106fc78c7
commit 632b5b6f6d
3 changed files with 52 additions and 81 deletions

7
package-lock.json generated
View File

@ -5,16 +5,9 @@
"packages": { "packages": {
"": { "": {
"dependencies": { "dependencies": {
"@qiun/ucharts": "^2.5.0-20230101",
"uview-plus": "^3.7.13" "uview-plus": "^3.7.13"
} }
}, },
"node_modules/@qiun/ucharts": {
"version": "2.5.0-20230101",
"resolved": "https://registry.npmjs.org/@qiun/ucharts/-/ucharts-2.5.0-20230101.tgz",
"integrity": "sha512-C7ccBgfPuGF6dxTRuMW0NPPMSCf1k/kh3I9zkRVBc5PaivudX/rPL+jd2Wty6gn5ya5L3Ob+YmYe09V5xw66Cw==",
"license": "Apache"
},
"node_modules/uview-plus": { "node_modules/uview-plus": {
"version": "3.7.13", "version": "3.7.13",
"resolved": "https://registry.npmjs.org/uview-plus/-/uview-plus-3.7.13.tgz", "resolved": "https://registry.npmjs.org/uview-plus/-/uview-plus-3.7.13.tgz",

View File

@ -1,6 +1,5 @@
{ {
"dependencies": { "dependencies": {
"@qiun/ucharts": "^2.5.0-20230101",
"uview-plus": "^3.7.13" "uview-plus": "^3.7.13"
} }
} }

View File

@ -81,12 +81,13 @@
<!-- 收益曲线 --> <!-- 收益曲线 -->
<view v-else class="nav-chart-wrapper"> <view v-else class="nav-chart-wrapper">
<canvas <qiun-data-charts
canvas-id="navChartCanvas" type="line"
id="navChartCanvas" :opts="chartOpts"
class="nav-canvas" :chartData="chartData"
type="2d" :canvas2d="true"
></canvas> canvasId="navChartCanvas"
/>
</view> </view>
<!-- 统计指标 --> <!-- 统计指标 -->
@ -433,11 +434,8 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, getCurrentInstance, computed, nextTick } from 'vue'; import { ref, onMounted, getCurrentInstance, computed } from 'vue';
import { api } from '../../utils/api'; import { api } from '../../utils/api';
import uCharts from '@qiun/ucharts/u-charts.js';
let chartInstance = null;
// u-toast // u-toast
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
@ -485,30 +483,23 @@ const navPeriod = ref('30d');
const navHistory = ref([]); const navHistory = ref([]);
const navStatistics = ref(null); const navStatistics = ref(null);
// //
const drawChart = () => { const chartData = computed(() => {
if (!navHistory.value || navHistory.value.length === 0) return; if (!navHistory.value || navHistory.value.length === 0) {
return { categories: [], series: [] };
}
nextTick(() => { return {
const data = navHistory.value; categories: navHistory.value.map(item => item.date.split('-').slice(1).join('/')),
const chartData = {
categories: data.map(item => item.date.split('-').slice(1).join('/')),
series: [{ series: [{
name: '净值', name: '净值',
data: data.map(item => item.nav) data: navHistory.value.map(item => item.nav)
}] }]
}; };
});
chartInstance = new uCharts({ //
type: 'line', const chartOpts = ref({
canvas: uni.createCanvasContext('navChartCanvas'),
width: uni.upx2px(640),
height: uni.upx2px(400),
pixelRatio: 1,
categories: chartData.categories,
series: chartData.series,
animation: true,
color: ['#064E3B'], color: ['#064E3B'],
padding: [15, 15, 0, 15], padding: [15, 15, 0, 15],
enableScroll: false, enableScroll: false,
@ -536,9 +527,7 @@ const drawChart = () => {
activeType: 'hollow' activeType: 'hollow'
} }
} }
}); });
});
};
// //
const showTransactionForm = ref(false); const showTransactionForm = ref(false);
@ -708,11 +697,6 @@ 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);
@ -1309,11 +1293,6 @@ 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;