From 4106fc78c74671ff2b227fa03acaca8e5bc626a0 Mon Sep 17 00:00:00 2001
From: claw_bot <claw@jb18cm.plus>
Date: Sun, 15 Mar 2026 07:02:14 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20ucharts=20=E7=BB=84=E4=BB=B6=E5=BC=95?=
 =?UTF-8?q?=E5=85=A5=E9=94=99=E8=AF=AF=EF=BC=8C=E6=94=B9=E7=94=A8=20JS=20A?=
 =?UTF-8?q?PI=20=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- @qiun/ucharts 不包含 Vue 组件
- 改用 uCharts JS 构造函数直接绘制
- 使用 uni.createCanvasContext 创建画布
- 添加 drawChart 方法在数据加载后绘制
---
 pages/detail/detail.vue | 129 ++++++++++++++++++++++------------------
 1 file changed, 72 insertions(+), 57 deletions(-)

diff --git a/pages/detail/detail.vue b/pages/detail/detail.vue
index f6f4742..7976fc3 100755
--- a/pages/detail/detail.vue
+++ b/pages/detail/detail.vue
@@ -81,13 +81,12 @@
         
         <!-- 收益曲线 -->
         <view v-else class="nav-chart-wrapper">
-          <qiun-ucharts 
-            type="line"
-            :opts="chartOpts"
-            :chartData="chartData"
-            :canvas2d="true"
-            canvasId="navChartCanvas"
-          />
+          <canvas 
+            canvas-id="navChartCanvas"
+            id="navChartCanvas"
+            class="nav-canvas"
+            type="2d"
+          ></canvas>
         </view>
         
         <!-- 统计指标 -->
@@ -434,9 +433,11 @@
 </template>
 
 <script setup>
-import { ref, onMounted, getCurrentInstance, computed } from 'vue';
+import { ref, onMounted, getCurrentInstance, computed, nextTick } from 'vue';
 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 实例
 const { proxy } = getCurrentInstance();
@@ -484,55 +485,59 @@ 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 drawChart = () => {
+  if (!navHistory.value || navHistory.value.length === 0) return;
   
-  return {
-    categories: navHistory.value.map(item => item.date.split('-').slice(1).join('/')),
-    series: [{
-      name: '净值',
-      data: navHistory.value.map(item => item.nav)
-    }]
-  };
-});
-
-// 图表配置
-const chartOpts = {
-  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'
-    },
-    area: {
-      type: 'curve',
-      opacity: 0.3,
-      addLine: true
-    }
-  }
+  nextTick(() => {
+    const data = navHistory.value;
+    
+    const chartData = {
+      categories: data.map(item => item.date.split('-').slice(1).join('/')),
+      series: [{
+        name: '净值',
+        data: data.map(item => item.nav)
+      }]
+    };
+    
+    chartInstance = new uCharts({
+      type: 'line',
+      canvas: uni.createCanvasContext('navChartCanvas'),
+      width: uni.upx2px(640),
+      height: uni.upx2px(400),
+      pixelRatio: 1,
+      categories: chartData.categories,
+      series: chartData.series,
+      animation: true,
+      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'
+        }
+      }
+    });
+  });
 };
 
 // 交易表单
@@ -703,6 +708,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) {
+        drawChart();
+      }
     }
   } catch (error) {
     console.error('获取净值历史失败:', error);
@@ -1299,6 +1309,11 @@ const deletePortfolio = async () => {
   height: 400rpx;
 }
 
+.nav-canvas {
+  width: 640rpx;
+  height: 400rpx;
+}
+
 .period-tabs {
   display: flex;
   gap: 16rpx;