feat: 个人最佳趋势改为折线图 + 底部最佳趋势日期 + 修复
- 趋势组件 trend-chart 新增 chartType(line/bar),line 模式用内联 SVG 渲染折线+渐变面积(无 canvas) - 记录页个人最佳趋势改用折线图,峰值信息移到图表下方对称高亮块显示最佳趋势产生日期 - 修复1: linePoints 漏存绝对坐标 y 导致运行时 toFixed 崩溃 - 修复2: 折线模式漏渲染数据点数值(valueText),现圆点上方显示且 0 值不显示
This commit is contained in:
@@ -35,6 +35,7 @@ Page({
|
||||
trendSummary: {},
|
||||
bestTrendData: [],
|
||||
bestTrendSummary: {},
|
||||
bestLineColor: '#FF6B35',
|
||||
showDayDetail: false,
|
||||
dayDetail: {},
|
||||
icons: iconsMod.build()
|
||||
@@ -138,7 +139,8 @@ Page({
|
||||
trendData,
|
||||
trendSummary: { ...util.getTrendSummary(trendData, trendMode), streakCount: Number(streak.count) || 0 },
|
||||
bestTrendData,
|
||||
bestTrendSummary: util.getTrendSummary(bestTrendData, trendMode),
|
||||
bestTrendSummary: this._buildBestSummary(bestTrendData, trendMode),
|
||||
bestLineColor: theme.primary,
|
||||
loading: false
|
||||
})
|
||||
},
|
||||
@@ -199,7 +201,8 @@ Page({
|
||||
trendData,
|
||||
trendSummary: { ...util.getTrendSummary(trendData, mode), streakCount: Number(storage.getStreak().count) || 0 },
|
||||
bestTrendData,
|
||||
bestTrendSummary: util.getTrendSummary(bestTrendData, mode)
|
||||
bestTrendSummary: this._buildBestSummary(bestTrendData, mode),
|
||||
bestLineColor: themeMod.getCurrentTheme().primary
|
||||
})
|
||||
},
|
||||
|
||||
@@ -217,6 +220,16 @@ Page({
|
||||
return util.getBestTrendData(storage.getRecords(), mode)
|
||||
},
|
||||
|
||||
/**
|
||||
* 个人最佳趋势的峰值摘要:复用通用 getTrendSummary,但把 peakTitle 从
|
||||
* "最高训练日/月" 覆盖成 "个人最佳日/月",贴合"个人最佳趋势"区块语义。
|
||||
*/
|
||||
_buildBestSummary(bestTrendData, mode) {
|
||||
const s = util.getTrendSummary(bestTrendData, mode)
|
||||
s.peakTitle = mode === 'month' ? '个人最佳月' : '个人最佳日'
|
||||
return s
|
||||
},
|
||||
|
||||
onDayTap(e) {
|
||||
const { year, month, day } = e.detail
|
||||
const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
|
||||
|
||||
@@ -125,9 +125,13 @@
|
||||
<image class="history-title-icon" src="{{icons.crownFill}}" mode="aspectFit"></image>
|
||||
<text class="best-trend-title">个人最佳趋势</text>
|
||||
</view>
|
||||
<text class="best-trend-best">{{bestTrendSummary.peakText}}</text>
|
||||
</view>
|
||||
<trend-chart chart-data="{{bestTrendData}}" variant="peak"></trend-chart>
|
||||
<trend-chart chart-data="{{bestTrendData}}" variant="peak" chart-type="line" line-color="{{bestLineColor}}"></trend-chart>
|
||||
<view class="trend-highlight">
|
||||
<image class="trend-highlight-icon" src="{{icons.crownFill}}" mode="aspectFit"></image>
|
||||
<text class="trend-highlight-title">{{bestTrendSummary.peakTitle}}</text>
|
||||
<text class="trend-highlight-text">{{bestTrendSummary.peakText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</ui-card>
|
||||
</block>
|
||||
|
||||
@@ -360,12 +360,6 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.best-trend-best {
|
||||
color: var(--primary);
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---- history ---- */
|
||||
.history-section {
|
||||
padding: 0;
|
||||
|
||||
Reference in New Issue
Block a user