lc/wx_pbzc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 个人最佳趋势改为折线图 + 底部最佳趋势日期 + 修复

Browse Source 
- 趋势组件 trend-chart 新增 chartType(line/bar),line 模式用内联 SVG 渲染折线+渐变面积(无 canvas)
- 记录页个人最佳趋势改用折线图,峰值信息移到图表下方对称高亮块显示最佳趋势产生日期
- 修复1: linePoints 漏存绝对坐标 y 导致运行时 toFixed 崩溃
- 修复2: 折线模式漏渲染数据点数值(valueText),现圆点上方显示且 0 值不显示
This commit is contained in:
cnliucheng
2026-08-04 15:46:18 +08:00
parent 187c426243
commit ca1793b4c0
8 changed files with 222 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/trend-chart/trend-chart.wxml
+25 -9
View File
@@ -1,12 +1,28 @@
<view class="trend-chart {{variant === 'peak' ? 'peak' : ''}}">
<view class="trend-bars">
<view class="trend-bar-col" wx:for="{{bars}}" wx:key="label">
<view class="trend-bar {{item.value === 0 ? 'zero' : ''}} {{item.highlight ? 'highlight' : ''}}" style="height: {{item.percent}}%;">
<text class="trend-bar-value" wx:if="{{item.value > 0}}">{{item.valueText}}</text>
<view class="trend-chart {{variant === 'peak' ? 'peak' : ''}} {{chartType === 'line' ? 'line' : ''}}">
<!-- Bar mode -->
<block wx:if="{{chartType !== 'line'}}">
<view class="trend-bars">
<view class="trend-bar-col" wx:for="{{bars}}" wx:key="label">
<view class="trend-bar {{item.value === 0 ? 'zero' : ''}} {{item.highlight ? 'highlight' : ''}}" style="height: {{item.percent}}%;">
<text class="trend-bar-value" wx:if="{{item.value > 0}}">{{item.valueText}}</text>
</view>
</view>
</view>
</view>
<view class="trend-labels">
<text class="trend-bar-label {{item.highlight ? 'highlight' : ''}}" wx:for="{{bars}}" wx:key="label">{{item.label}}</text>
</view>
<view class="trend-labels">
<text class="trend-bar-label {{item.highlight ? 'highlight' : ''}}" wx:for="{{bars}}" wx:key="label">{{item.label}}</text>
</view>
</block>
<!-- Line mode -->
<block wx:else>
<view class="trend-line">
<image class="trend-line-img" src="{{lineSvg}}" mode="widthFix"></image>
<view wx:for="{{linePoints}}" wx:key="label" class="trend-line-dot {{item.highlight ? 'highlight' : ''}}" style="left: {{item.xPercent}}%; top: {{item.yPercent}}%;">
<text wx:if="{{item.value > 0}}" class="trend-line-value">{{item.valueText}}</text>
</view>
</view>
<view class="trend-line-labels">
<text wx:for="{{linePoints}}" wx:key="label" class="trend-line-label {{item.highlight ? 'highlight' : ''}}" style="left: {{item.xPercent}}%;">{{item.label}}</text>
</view>
</block>
</view>