49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { mockStats } from '../../services/api';
|
|
|
|
Page({
|
|
data: {
|
|
loading: true,
|
|
stats: mockStats,
|
|
w: 300,
|
|
},
|
|
onLoad() {
|
|
const sys = wx.getSystemInfoSync();
|
|
this.setData({
|
|
stats: mockStats,
|
|
loading: false,
|
|
w: (sys.windowWidth || 320) - 40,
|
|
});
|
|
},
|
|
onReady() {
|
|
this.drawChart();
|
|
},
|
|
drawChart() {
|
|
const curve = mockStats.equity_curve;
|
|
const query = wx.createSelectorQuery().in(this);
|
|
query.select('#chart').fields({ node: true, size: true }).exec((res: any) => {
|
|
const canvas = res[0]?.node;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
const dpr = wx.getSystemInfoSync().pixelRatio || 2;
|
|
canvas.width = this.data.w * dpr;
|
|
canvas.height = 200 * dpr;
|
|
ctx.scale(dpr, dpr);
|
|
const w = this.data.w;
|
|
const h = 200;
|
|
const min = Math.min(...curve);
|
|
const max = Math.max(...curve);
|
|
const range = max - min || 1;
|
|
ctx.strokeStyle = '#5a9';
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
curve.forEach((v: number, i: number) => {
|
|
const x = (i / (curve.length - 1)) * (w - 20) + 10;
|
|
const y = h - 20 - ((v - min) / range) * (h - 40);
|
|
if (i === 0) ctx.moveTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
});
|
|
ctx.stroke();
|
|
});
|
|
},
|
|
});
|