fix: ucharts 组件引入错误,改用 JS API 方式
- @qiun/ucharts 不包含 Vue 组件 - 改用 uCharts JS 构造函数直接绘制 - 使用 uni.createCanvasContext 创建画布 - 添加 drawChart 方法在数据加载后绘制
This commit is contained in:
parent
cf699c9980
commit
4106fc78c7
@ -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)
|
||||
}]
|
||||
};
|
||||
});
|
||||
nextTick(() => {
|
||||
const data = navHistory.value;
|
||||
|
||||
// 图表配置
|
||||
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
|
||||
}
|
||||
}
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user