refactor: 改用 uni_modules 方式引入 qiun-data-charts
- 移除 npm @qiun/ucharts 依赖 - 改用 qiun-data-charts 组件(需从插件市场安装) - 恢复 computed chartData 和 ref chartOpts 配置
This commit is contained in:
parent
4106fc78c7
commit
632b5b6f6d
7
package-lock.json
generated
7
package-lock.json
generated
@ -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",
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@qiun/ucharts": "^2.5.0-20230101",
|
|
||||||
"uview-plus": "^3.7.13"
|
"uview-plus": "^3.7.13"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user