update:运动馆报告
This commit is contained in:
parent
b73b277489
commit
2e9154085b
@ -290,9 +290,35 @@ Page({
|
|||||||
const currentDataLabels = list.map(i => {
|
const currentDataLabels = list.map(i => {
|
||||||
const score = i.lastScore != null ? i.lastScore : ''
|
const score = i.lastScore != null ? i.lastScore : ''
|
||||||
const rank = i.rank != null ? i.rank : ''
|
const rank = i.rank != null ? i.rank : ''
|
||||||
|
return ''
|
||||||
return rank ? score + '\n' + rank : String(score)
|
return rank ? score + '\n' + rank : String(score)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 富文本 label:名称行 + 颜色区分的成绩行(上次/本次+等级)
|
||||||
|
const labelLines = list.map(i => {
|
||||||
|
const name = i.name || ''
|
||||||
|
const lines = []
|
||||||
|
// 名称行,超5字自动换行
|
||||||
|
if (name.length > 15) {
|
||||||
|
const mid = Math.ceil(name.length / 2)
|
||||||
|
lines.push(name.slice(0, mid))
|
||||||
|
lines.push(name.slice(mid))
|
||||||
|
} else {
|
||||||
|
lines.push(name)
|
||||||
|
}
|
||||||
|
// 成绩行:上次(蓝)/本次+等级(红)
|
||||||
|
const prevScore = i.prevScore != null ? String(i.prevScore) : '-'
|
||||||
|
const lastScore = i.lastScore != null ? String(i.lastScore) : '-'
|
||||||
|
const rank = i.rank ? i.rank : ''
|
||||||
|
const currentText = rank ? lastScore + rank : lastScore
|
||||||
|
lines.push([
|
||||||
|
{ text: prevScore, color: '#4A90E2' },
|
||||||
|
{ text: ' / ', color: '#999999' },
|
||||||
|
{ text: currentText, color: '#E74C3C' },
|
||||||
|
])
|
||||||
|
return lines
|
||||||
|
})
|
||||||
|
|
||||||
const query = wx.createSelectorQuery().in(that)
|
const query = wx.createSelectorQuery().in(that)
|
||||||
query.select('#radarCanvas').fields({ node: true, size: true }).exec(res => {
|
query.select('#radarCanvas').fields({ node: true, size: true }).exec(res => {
|
||||||
if (!res[0]) return
|
if (!res[0]) return
|
||||||
@ -307,7 +333,7 @@ Page({
|
|||||||
height: that.data.radarCHeight * that.data.pixelRatio,
|
height: that.data.radarCHeight * that.data.pixelRatio,
|
||||||
categories,
|
categories,
|
||||||
series: [
|
series: [
|
||||||
{ name: '上次成绩', data: prevData, color: '#4A90E2', dataLabel: false },
|
{ name: '上次成绩', data: prevData, color: '#4A90E2', dataLabels: currentDataLabels },
|
||||||
{ name: '本次成绩', data: currentData, color: '#E74C3C', dataLabels: currentDataLabels, textColor: '#E74C3C', textSize: 11 },
|
{ name: '本次成绩', data: currentData, color: '#E74C3C', dataLabels: currentDataLabels, textColor: '#E74C3C', textSize: 11 },
|
||||||
],
|
],
|
||||||
pixelRatio: that.data.pixelRatio,
|
pixelRatio: that.data.pixelRatio,
|
||||||
@ -315,7 +341,7 @@ Page({
|
|||||||
tapLegend:true,
|
tapLegend:true,
|
||||||
background: 'rgba(0,0,0,0)',
|
background: 'rgba(0,0,0,0)',
|
||||||
color: ['#4A90E2', '#E74C3C'],
|
color: ['#4A90E2', '#E74C3C'],
|
||||||
padding: [0, 0, 0, 15],
|
padding: [0, 0, 0, 20],
|
||||||
legend: {
|
legend: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'bottom',
|
position: 'bottom',
|
||||||
@ -339,6 +365,7 @@ Page({
|
|||||||
labelMargin: 30,
|
labelMargin: 30,
|
||||||
labelPointShow: false,
|
labelPointShow: false,
|
||||||
max: 100,
|
max: 100,
|
||||||
|
labelLines,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@ -119,7 +119,10 @@ Page({
|
|||||||
// min: Math.max(0, that.data.moderateHR - 20),
|
// min: Math.max(0, that.data.moderateHR - 20),
|
||||||
max: that.data.highHR + 20,
|
max: that.data.highHR + 20,
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
tofix:0
|
formatter: function (val) {
|
||||||
|
console.log('y轴刻度', val)
|
||||||
|
return val.toFixed(0);
|
||||||
|
}
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
extra: {
|
extra: {
|
||||||
|
|||||||
@ -252,10 +252,34 @@ Page({
|
|||||||
});
|
});
|
||||||
const prevData = list.map(i => i.prevScore || 0);
|
const prevData = list.map(i => i.prevScore || 0);
|
||||||
const currentData = list.map(i => i.lastScore || 0);
|
const currentData = list.map(i => i.lastScore || 0);
|
||||||
|
// 本次成绩数据标签:显示分数 + 等级
|
||||||
const currentDataLabels = list.map(i => {
|
const currentDataLabels = list.map(i => {
|
||||||
const score = i.lastScore != null ? i.lastScore : '';
|
const score = i.lastScore != null ? i.lastScore : ''
|
||||||
const rank = i.rank != null ? i.rank : '';
|
const rank = i.rank != null ? i.rank : ''
|
||||||
return rank ? score + '\n' + rank : String(score);
|
return ''
|
||||||
|
return rank ? score + '\n' + rank : String(score)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 富文本 label:名称行 + 颜色区分的成绩行(上次/本次+等级)
|
||||||
|
const labelLines = list.map(i => {
|
||||||
|
const name = i.name || '';
|
||||||
|
const lines = [];
|
||||||
|
if (name.length > 15) {
|
||||||
|
const mid = Math.ceil(name.length / 2);
|
||||||
|
lines.push(name.slice(0, mid));
|
||||||
|
lines.push(name.slice(mid));
|
||||||
|
} else {
|
||||||
|
lines.push(name);
|
||||||
|
}
|
||||||
|
const prevScore = i.prevScore != null ? String(i.prevScore) : '-';
|
||||||
|
const lastScore = i.lastScore != null ? String(i.lastScore) : '-';
|
||||||
|
const rank = i.rank ? i.rank : '';
|
||||||
|
const currentText = rank ? lastScore + rank : lastScore;
|
||||||
|
lines.push([
|
||||||
|
{ text: prevScore + '/', color: '#4A90E2' },
|
||||||
|
{ text: currentText, color: '#E74C3C' },
|
||||||
|
]);
|
||||||
|
return lines;
|
||||||
});
|
});
|
||||||
|
|
||||||
const query = wx.createSelectorQuery().in(that);
|
const query = wx.createSelectorQuery().in(that);
|
||||||
@ -272,15 +296,15 @@ Page({
|
|||||||
height: that.data.radarCHeight * that.data.pixelRatio,
|
height: that.data.radarCHeight * that.data.pixelRatio,
|
||||||
categories,
|
categories,
|
||||||
series: [
|
series: [
|
||||||
{ name: '上次成绩', data: prevData, color: '#4A90E2', dataLabel: false },
|
{ name: '上次成绩', data: prevData, color: '#4A90E2', dataLabels: currentDataLabels },
|
||||||
{ name: '本次成绩', data: currentData, color: '#E74C3C', dataLabels: currentDataLabels, textColor: '#E74C3C', textSize: 11 },
|
{ name: '本次成绩', data: currentData, color: '#E74C3C', dataLabels: currentDataLabels },
|
||||||
],
|
],
|
||||||
pixelRatio: that.data.pixelRatio,
|
pixelRatio: that.data.pixelRatio,
|
||||||
animation: true,
|
animation: true,
|
||||||
tapLegend: true,
|
tapLegend: true,
|
||||||
background: 'rgba(0,0,0,0)',
|
background: 'rgba(0,0,0,0)',
|
||||||
color: ['#4A90E2', '#E74C3C'],
|
color: ['#4A90E2', '#E74C3C'],
|
||||||
padding: [0, 0, 0, 10],
|
padding: [0, 0, 0, 20],
|
||||||
legend: {
|
legend: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'bottom',
|
position: 'bottom',
|
||||||
@ -304,6 +328,7 @@ Page({
|
|||||||
labelMargin: 30,
|
labelMargin: 30,
|
||||||
labelPointShow: false,
|
labelPointShow: false,
|
||||||
max: 100,
|
max: 100,
|
||||||
|
labelLines,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -450,6 +450,8 @@ function measureText(text, fontSize, context) {
|
|||||||
width += 3.25;
|
width += 3.25;
|
||||||
} else if (/:/.test(item)) {
|
} else if (/:/.test(item)) {
|
||||||
width += 2.5;
|
width += 2.5;
|
||||||
|
} else if (/\//.test(item)) {
|
||||||
|
width += 3.5;
|
||||||
} else if (/[\u4e00-\u9fa5]/.test(item)) {
|
} else if (/[\u4e00-\u9fa5]/.test(item)) {
|
||||||
width += 10;
|
width += 10;
|
||||||
} else if (/\(|\)/.test(item)) {
|
} else if (/\(|\)/.test(item)) {
|
||||||
@ -2461,10 +2463,57 @@ function drawRadarLabel(angleList, radius, centerPosition, opts, config, context
|
|||||||
y: (radius + labelMargin * opts.pix) * Math.sin(angle)
|
y: (radius + labelMargin * opts.pix) * Math.sin(angle)
|
||||||
};
|
};
|
||||||
var posRelativeCanvas = convertCoordinateOrigin(pos.x, pos.y, centerPosition);
|
var posRelativeCanvas = convertCoordinateOrigin(pos.x, pos.y, centerPosition);
|
||||||
var startX = posRelativeCanvas.x;
|
|
||||||
var startY = posRelativeCanvas.y;
|
var startY = posRelativeCanvas.y;
|
||||||
|
var richLines = radarOption.labelLines && radarOption.labelLines[index];
|
||||||
|
if (richLines) {
|
||||||
|
// Rich text mode: each element is a plain string or array of {text, color} segments
|
||||||
|
context.beginPath();
|
||||||
|
context.setFontSize(config.fontSize);
|
||||||
|
var lineHeight = config.fontSize + 4 * opts.pix;
|
||||||
|
var offsetY = richLines.length > 1 ? -(richLines.length - 1) * lineHeight / 2 : 0;
|
||||||
|
richLines.forEach(function(lineData, li) {
|
||||||
|
var y = startY + config.fontSize / 2 + offsetY + li * lineHeight;
|
||||||
|
if (Array.isArray(lineData)) {
|
||||||
|
// Multi-color segments
|
||||||
|
var totalWidth = lineData.reduce(function(sum, seg) {
|
||||||
|
return sum + measureText(seg.text, config.fontSize, context);
|
||||||
|
}, 0);
|
||||||
|
var lx;
|
||||||
|
if (util.approximatelyEqual(pos.x, 0)) {
|
||||||
|
lx = posRelativeCanvas.x - totalWidth / 2;
|
||||||
|
} else if (pos.x < 0) {
|
||||||
|
lx = posRelativeCanvas.x - totalWidth;
|
||||||
|
} else {
|
||||||
|
lx = posRelativeCanvas.x;
|
||||||
|
}
|
||||||
|
lineData.forEach(function(seg) {
|
||||||
|
var segWidth = measureText(seg.text, config.fontSize, context);
|
||||||
|
context.setFillStyle(seg.color || radarOption.labelColor || opts.fontColor);
|
||||||
|
context.fillText(seg.text, lx, y);
|
||||||
|
lx += segWidth;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Plain string
|
||||||
|
var lineText = String(lineData);
|
||||||
|
var lx;
|
||||||
|
if (util.approximatelyEqual(pos.x, 0)) {
|
||||||
|
lx = posRelativeCanvas.x - measureText(lineText, config.fontSize, context) / 2;
|
||||||
|
} else if (pos.x < 0) {
|
||||||
|
lx = posRelativeCanvas.x - measureText(lineText, config.fontSize, context);
|
||||||
|
} else {
|
||||||
|
lx = posRelativeCanvas.x;
|
||||||
|
}
|
||||||
|
context.setFillStyle(radarOption.labelColor || opts.fontColor);
|
||||||
|
context.fillText(lineText, lx, y);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
context.closePath();
|
||||||
|
context.stroke();
|
||||||
|
} else {
|
||||||
|
// Original plain text mode
|
||||||
var labelLines = (opts.categories[index] || '').split('\n');
|
var labelLines = (opts.categories[index] || '').split('\n');
|
||||||
var maxLineWidth = Math.max.apply(null, labelLines.map(function(l) { return measureText(l, config.fontSize, context); }));
|
var maxLineWidth = Math.max.apply(null, labelLines.map(function(l) { return measureText(l, config.fontSize, context); }));
|
||||||
|
var startX = posRelativeCanvas.x;
|
||||||
if (util.approximatelyEqual(pos.x, 0)) {
|
if (util.approximatelyEqual(pos.x, 0)) {
|
||||||
startX -= maxLineWidth / 2;
|
startX -= maxLineWidth / 2;
|
||||||
} else if (pos.x < 0) {
|
} else if (pos.x < 0) {
|
||||||
@ -2487,6 +2536,7 @@ function drawRadarLabel(angleList, radius, centerPosition, opts, config, context
|
|||||||
context.closePath();
|
context.closePath();
|
||||||
context.stroke();
|
context.stroke();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user