109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
|
// subpackage/parent/fitness-detail/fitness-detail.js
|
||
|
|
import uCharts from '../../../utils/chart/u-charts';
|
||
|
|
|
||
|
|
var uChartsInstance = {};
|
||
|
|
|
||
|
|
Page({
|
||
|
|
data: {
|
||
|
|
item: null, // 当前指标完整数据
|
||
|
|
name: '',
|
||
|
|
unit: '',
|
||
|
|
// canvas尺寸
|
||
|
|
lineCWidth: 300,
|
||
|
|
lineCHeight: 220,
|
||
|
|
pixelRatio: 2,
|
||
|
|
},
|
||
|
|
|
||
|
|
onLoad() {
|
||
|
|
const item = wx.getStorageSync('fitnessDetailItem') || null
|
||
|
|
if (item) {
|
||
|
|
this.setData({ item, name: item.name, unit: item.unit || '' })
|
||
|
|
wx.setNavigationBarTitle({ title: item.name + '详情' })
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
onReady() {
|
||
|
|
const info = wx.getWindowInfo()
|
||
|
|
const pixelRatio = info.pixelRatio
|
||
|
|
const lineCWidth = info.windowWidth * 0.86
|
||
|
|
const lineCHeight = info.windowWidth * 0.58
|
||
|
|
this.setData({ lineCWidth, lineCHeight, pixelRatio }, () => {
|
||
|
|
this.drawLineChart()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
drawLineChart() {
|
||
|
|
const that = this
|
||
|
|
const item = that.data.item
|
||
|
|
const trend = item && item.scoreTrendChart
|
||
|
|
if (!trend || !trend.axisX || trend.axisX.length === 0) return
|
||
|
|
const query = wx.createSelectorQuery().in(that)
|
||
|
|
query.select('#lineCanvas').fields({ node: true, size: true }).exec(res => {
|
||
|
|
if (!res[0]) return
|
||
|
|
const canvas = res[0].node
|
||
|
|
const ctx = canvas.getContext('2d')
|
||
|
|
canvas.width = res[0].width * that.data.pixelRatio
|
||
|
|
canvas.height = res[0].height * that.data.pixelRatio
|
||
|
|
uChartsInstance['lineCanvas'] = new uCharts({
|
||
|
|
type: 'line',
|
||
|
|
context: ctx,
|
||
|
|
width: that.data.lineCWidth * that.data.pixelRatio,
|
||
|
|
height: that.data.lineCHeight * that.data.pixelRatio,
|
||
|
|
categories: trend.axisX,
|
||
|
|
series: [{ name: that.data.name, data: trend.axisY, color: '#4A90E2' }],
|
||
|
|
pixelRatio: that.data.pixelRatio,
|
||
|
|
animation: true,
|
||
|
|
background: '#FFFFFF',
|
||
|
|
color: ['#4A90E2'],
|
||
|
|
padding: [20, 20, 10, 0],
|
||
|
|
enableScroll: true,
|
||
|
|
legend: { show: false },
|
||
|
|
xAxis: {
|
||
|
|
disableGrid: true,
|
||
|
|
itemCount: 4,
|
||
|
|
scrollShow: true,
|
||
|
|
fontSize: 11,
|
||
|
|
fontColor: '#666',
|
||
|
|
axisLineColor: '#eee',
|
||
|
|
scrollColor: '#e8f4ff',
|
||
|
|
scrollBackgroundColor: '#f5f5f5',
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
gridType: 'dash',
|
||
|
|
gridColor: '#f1f1f1',
|
||
|
|
fontSize: 11,
|
||
|
|
fontColor: '#666',
|
||
|
|
},
|
||
|
|
extra: {
|
||
|
|
line: {
|
||
|
|
type: 'curve',
|
||
|
|
width: 3,
|
||
|
|
activeType: 'hollow',
|
||
|
|
onShadow: true,
|
||
|
|
linearType: 'custom',
|
||
|
|
},
|
||
|
|
tooltip: { showBox: true },
|
||
|
|
},
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
tapLine(e) {
|
||
|
|
if (uChartsInstance['lineCanvas']) {
|
||
|
|
uChartsInstance['lineCanvas'].showToolTip(e)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
touchstartLine(e) {
|
||
|
|
if (uChartsInstance['lineCanvas']) uChartsInstance['lineCanvas'].scrollStart(e)
|
||
|
|
},
|
||
|
|
touchmoveLine(e) {
|
||
|
|
if (uChartsInstance['lineCanvas']) uChartsInstance['lineCanvas'].scroll(e)
|
||
|
|
},
|
||
|
|
touchendLine(e) {
|
||
|
|
if (uChartsInstance['lineCanvas']) {
|
||
|
|
uChartsInstance['lineCanvas'].scrollEnd(e)
|
||
|
|
uChartsInstance['lineCanvas'].showToolTip(e)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
})
|