lc
ca1793b4c0
- 趋势组件 trend-chart 新增 chartType(line/bar),line 模式用内联 SVG 渲染折线+渐变面积(无 canvas) - 记录页个人最佳趋势改用折线图,峰值信息移到图表下方对称高亮块显示最佳趋势产生日期 - 修复1: linePoints 漏存绝对坐标 y 导致运行时 toFixed 崩溃 - 修复2: 折线模式漏渲染数据点数值(valueText),现圆点上方显示且 0 值不显示
29 lines
1.4 KiB
Plaintext
29 lines
1.4 KiB
Plaintext
<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 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>
|